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.ejs
file 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()
...
- Here we use theme Butterfly as an example.
- Then find this file:
Butterfly/layout/includes/widget/card_tags.pug
- Modiefy the file as following code:
if site.tags.length
.card-widget.card-tags
.card-content
.item-headline
i.fa.fa-tags(aria-hidden="true")
span= _p('aside.card_tags')
script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
#myCanvasContainer.widget.tagcloud(align='center')
canvas#resCanvas(width='200', height='200', style='width=100%')
!= tagcloud()
!= tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})
- use
hexo clean && hexo g && hexo s
to 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 s
to enjoy your different tag cloud
Submit issue please
See Todo.md