even主题动态词云

  1. 安装费插件
    1
    npm install hexo-tag-cloud@^2.0.* --save

  1. 删除themes/even/layout/tags.swig文中下面这段代码

    1
    {{ tagcloud({min_font: 16, max_font: 28, amount: 100, orderby: 'count'}) }}

    用以下代码替换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {% 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 %}

    紧接着可以在后面添加运行时间代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div id="days"></div>
    </script>
    <script language="javascript">
    function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("09/11/2018 16:53:09");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML=daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒";
    }
    function setzero(i){
    if(i<10){i="0" + i};
    return i;
    }
    show_date_time();
    </script>

  2. 在博客根目录(不是主题目录)，找到 _config.yml 文件然后添加如下的配置项:

    1
    2
    3
    4
    5
    6
    # hexo-tag-cloud
    tag_cloud:
        textFont: Trebuchet MS, Helvetica
        textColour: \#333
        textHeight: 25
        outlineColour: \#E2E1D1

    在themes/even/source/css/_custom/_custom.css中添加运行时间字体样式

    1
    2
    3
    4
    #days {
      display: block;
      color: rgb(7, 179, 155);
    }

具体效果参见:
https://geolibra.github.io/tags/

添加背景图片

打开themes\even\source\css\ _custom\custom.styl文件，添加以下样式：

1
2
3
4
5
6
body {
  background:url(https://source.unsplash.com/random/1600x900)  !important;
  background-repeat: no-repeat !important;
  background-attachment:fixed !important;
  background-position:50% 50% !important;
}

或者将themes\even\source\css\ _custom_base.scss中body的background样式注释掉，添加以下样式：

1
2
3
4
5
6
body {
  background:url(https://source.unsplash.com/random/1600x900);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
}

图片来源:https://source.unsplash.com/.提供了高质量且免费的图片，而且还提供一个随机拉取图片服务的API，可以实现动态背景。
另外也可以添加自己的图片，在source新建img文件夹，存放自己的图片。样式背景图片按以下方式引用：

1
2
3
body {
  background:url('../../img/map.jpg')  !important;
}

访客可视化

  1. https://www.revolvermaps.com/
  2. https://clustrmaps.com/

参考文献:
https://github.com/MikeCoder/hexo-tag-cloud/blob/master/README.ZH.md
http://www.tianguolangzi.com/2018/01/17/hexo%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/