pengzhangsir/hexo-tag-cloud

Yet, just another tag cloud plugin for hexo.

hexo-tag-cloud

中文说明版本

Yet, just another tag cloud plugin for hexo.

How it looks like

And you can see online live demo by clicking here

How to Use

Install

• go into your hexo system folder, and add depandence "hexo-tag-cloud": "2.1.*" to package.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 ejs Users

• 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="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/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>
<% } %>

For swig Users

• 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="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/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

For jade Users

• 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='/oj-code/js/tagcloud.js')
        script(type='text/javascript', charset='utf-8', src='/oj-code/js/tagcanvas.js')
        #myCanvasContainer.widget.tagcloud(align='center')
            canvas#resCanvas(width='500', height='500', style='width=100%')
                !=tagcloud()
            !=tagcloud()
    +postList()
...

Last step

• use hexo clean && hexo g && hexo s to see the change. hexo clean must be done before use hexo g.
• PS: Don't use the command hexo g -d or hexo d -g, @See Issue 7

Customize

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

Troubleshooting

Submit issue please

TODO

See Todo.md

Thanks

• TagCanvas