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/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>

接着在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地址

hexo+NexT博客优化第二弹

猜你喜欢