hexo-tag-cloud

    2.1.2 • Public • Published

    hexo-tag-cloud

    npm version Build Status Scrutinizer Code Quality

    中文说明版本

    Yet, just another tag cloud plugin for hexo.

    How it looks like

    TagCloud

    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="<%- 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>
    <% } %>
    

    If you are using icarus, please see Issue #31.

    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="{{ 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

    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=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()
    ...
    

    For pug Users

    • 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'})
    

    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]
        pauseOnSelected: false # true means pause the cloud tag movement when highlight a tag
    
    • then use hexo clean && hexo g && hexo s to enjoy your different tag cloud

    Troubleshooting

    Submit issue please

    Thanks

    Keywords

    Install

    npm i hexo-tag-cloud

    DownloadsWeekly Downloads

    89

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    595 kB

    Total Files

    11

    Last publish

    Collaborators

    • mikecoder