Yet, just another tag cloud plugin for hexo.
And you can see online live demo by clicking here
- go into your hexo system folder, and add depandence
"hexo-tag-cloud": "2.1.*"topackage.json - then do npm install command
- then you need to change your theme layout file and add the following content to that file depended on your render system.
- For example, in its default theme landscape.
- We should find
hexo/themes/landscape/layout/_widget/tagcloud.ejsfile and insert the following code.
<% if (site.tags.length) { %>
<script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcloud.js') %>"></script>
<script type="text/javascript" charset="utf-8" src="<%- url_for('/js/tagcanvas.js') %>"></script>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('tagcloud') %></h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
<%- tagcloud() %>
</canvas>
</div>
</div>
<% } %>
- Here we use theme Next as an example.
- You should insert the following code into
next/layout/_macro/sidebar.swig.
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}
@See Issue 6
- eg. theme Apollo.
- You can add change the container block code to the following in
apollo/layout/archive.jade.
...
block container
include mixins/post
.archive
h2(class='archive-year')= 'Tag Cloud'
script(type='text/javascript', charset='utf-8', src=url_for("/js/tagcloud.js"))
script(type='text/javascript', charset='utf-8', src=url_for("/js/tagcanvas.js"))
#myCanvasContainer.widget.tagcloud(align='center')
canvas#resCanvas(width='500', height='500', style='width=100%')
!=tagcloud()
!=tagcloud()
+postList()
...
- use
hexo clean && hexo g && hexo sto see the change. hexo clean must be done before usehexo g. - PS: Don't use the command
hexo g -d or hexo d -g, @See Issue 7
Now the hexo-tag-cloud plugin support customize feature. It's simple to change the color and the font for the tag cloud.
- Add these config below to your _config.yml file(which under your blog root directory)
# hexo-tag-cloud
tag_cloud:
textFont: 'Trebuchet MS, Helvetica'
textColor: '#333'
textHeight: 25
outlineColor: '#E2E1D1'
maxSpeed: 0.5 # range from [0.01 ~ 1]
- then use
hexo clean && hexo g && hexo sto enjoy your different tag cloud
Submit issue please
See Todo.md
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent