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地址