最近對(duì)hexo和NexT博客又做了一次優(yōu)化蠢壹。主要干了三件事。
頂部加載條實(shí)現(xiàn)：
這個(gè)如果用的是比較新的NexT主題瓷翻，只需要在配置文件里面進(jìn)行修改就可以了仰税。舊的話构资，就需要對(duì)/next/layout/_partials/head.swig文件做些修改，添加對(duì)應(yīng)的代碼陨簇。
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link rel="stylesheet">
<style>
.pace .pace-progress {
background: #1E92FB; /*進(jìn)度條顏色*/
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>
具體的可以點(diǎn)擊上次那篇推薦的文章吐绵。
hexo的next主題個(gè)性化教程：打造炫酷網(wǎng)站
另外就是增加了詞云和運(yùn)行時(shí)間。
詞云其實(shí)就是標(biāo)簽做的，放在側(cè)邊欄上拦赠。需要安裝插件。
npm install hexo-tag-cloud@^2.0.* --save
接著在next/layout/_macro/sidebar.swig添加如下內(nèi)容葵姥。
{% 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 %}
運(yùn)行時(shí)間的話荷鼠，在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="已運(yùn)行"+daysold+"天"+hrsold+"時(shí)"+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 }}
<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 %}
覺(jué)得需要調(diào)整顏色的還可以在/next/source/css/_custom/custom.styl加入如下的語(yǔ)句允乐。
// 自定義的側(cè)欄時(shí)間樣式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
另外參照著增加了Readme，增加了一些圖標(biāo)等削咆。
有找到了幾篇還不錯(cuò)的文章牍疏。以及本次優(yōu)化參考的主要文章鏈接。
打造個(gè)性超贊博客Hexo+NexT+GithubPages的超深度優(yōu)化
在移動(dòng)設(shè)備下啟用NexT主題的目錄頁(yè)面和回到頂部按鈕
Hexo博客中使用標(biāo)簽云hexo-tag-cloud
Hexo 標(biāo)簽云插件github地址
