hexo+NexT博客优化第二弹

最近对hexo和NexT博客又做了一次优化。主要干了三件事。

博客地址

顶部加载条实现：

这个如果用的是比较新的NexT主题，只需要在配置文件里面进行修改就可以了。旧的话，就需要对/next/layout/_partials/head.swig文件做些修改，添加对应的代码。

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet"><style>.pace .pace-progress {    background: #1E92FB; /*进度条颜色*/    height: 3px;}.pace .pace-progress-inner {     box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/}.pace .pace-activity {    border-top-color: #1E92FB;    /*上边框颜色*/    border-left-color: #1E92FB;    /*左边框颜色*/}</style>

具体的可以点击上次那篇推荐的文章。

hexo的next主题个性化教程：打造炫酷网站

另外就是增加了词云和运行时间。

词云其实就是标签做的，放在侧边栏上。需要安装插件。

npm install hexo-tag-cloud@^2.0.* --save

接着在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 %}

运行时间的话，在next/layout/_custom/sidebar.swig文件中先添加。

<div id="days"></div></script><script language="javascript">function show_date_time(){window.setTimeout("show_date_time()", 1000);BirthDay=new Date("05/27/2017 15:00:00");today=new Date();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDaydaysold=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>

接着在next/layout/_macro/sidebar.swig文件中修改。

    {# Blogroll #}    {% if theme.links %}      <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">        <div class="links-of-blogroll-title">          <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>          {{ theme.links_title }}&nbsp;          <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>        </div>        <ul class="links-of-blogroll-list">          {% for name, link in theme.links %}            <li class="links-of-blogroll-item">              <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>            </li>          {% endfor %}        </ul>         {% include '../_custom/sidebar.swig' %}      </div>     {% endif %}

觉得需要调整颜色的还可以在/next/source/css/_custom/custom.styl加入如下的语句。

// 自定义的侧栏时间样式#days {display: block;color: rgb(7, 179, 155);font-size: 13px;margin-top: 15px;}

另外参照着增加了Readme，增加了一些图标等。

有找到了几篇还不错的文章。以及本次优化参考的主要文章链接。

打造个性超赞博客Hexo+NexT+GithubPages的超深度优化
在移动设备下启用NexT主题的目录页面和回到顶部按钮
Hexo博客中使用标签云hexo-tag-cloud
Hexo 标签云插件github地址