由于電腦重裝了一次，發(fā)現(xiàn)之前Hexo與NexT主題版本過(guò)于落后括享，重新部署了下。

1 Node.js與git安裝

這一塊安裝就不贅述了剩愧。去兩個(gè)官網(wǎng)找安裝文件安裝即可娇斩。

node.js

git

打開(kāi)git以后配置的幾個(gè)關(guān)鍵命令行。

git config --global user.name "你的github名字"
git config --global user.email "你的郵箱地址"

生成ssh密鑰五督，根據(jù)地址找到ssh密鑰文件瓶殃，用記事本打開(kāi)。

ssh-keygen -t rsa -C "你的郵箱地址"
根據(jù)上面然后在自己的github賬戶上設(shè)置中進(jìn)行上傳密鑰基矮。

關(guān)于安裝成功測(cè)試冠场，可以輸入以下幾個(gè)命令。

node -v
npm -v

關(guān)于重新部署的原因碴裙，最早是安裝一些插件報(bào)了錯(cuò)。

后面雖然有一些參考資料的語(yǔ)句是有用的莺琳，但是整體還是因?yàn)楸容^古老的版本各種bug载慈，于是痛定思痛決定重新部署。

2 Hexo與NexT主題安裝

Hexo的博客我前面寫(xiě)過(guò)很多了辞做，有興趣大家可以移步前面。這里主要講最新的幾個(gè)安裝步驟秤茅。首先給出官網(wǎng)文檔。

Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

相關(guān)hexo主題孔厉。

Hexo可選主題

我還是選擇老朋友NexT主題帖努。

NexT官方倉(cāng)庫(kù)

NexT官方文檔

cd "你的博客根目錄"
npm install hexo-theme-next

hexo server

顯示NexT版本粪般。

然后安裝部分插件亩歹。

npm install hexo-tag-cloud@^2.0.* --save
npm install --save hexo-tag-aplayer
npm install hexo-tag-dplayer --save
npm install --save hexo-pdf
npm install --save hexo-admin-qiniu
npm install hexo-generator-searchdb
npm install hexo-filter-mathjax
npm install hexo-word-counter
npm install hexo-related-posts
npm install next-theme/hexo-next-valine

從git上clone下next主題，修改配置文件小作。

git clone https://github.com/next-theme/hexo-theme-next themes/next

Hexo配置主題的本質(zhì)就是有兩個(gè)_config.yml顾稀，一個(gè)是根目錄下的，一個(gè)是主題文件下的静秆。根據(jù)這兩個(gè)進(jìn)行不同的修改。

• 數(shù)學(xué)公式啟用
• busuanzi訪客統(tǒng)計(jì)插件配置
• 本地搜索插件配置
• 進(jìn)度條配置
• 相關(guān)文章配置

相關(guān)配置文檔和倉(cāng)庫(kù)：

• awesome next
• hexo word counter
• hexo next valine

配置過(guò)程中的幾個(gè)注意事項(xiàng)扶认。valine出現(xiàn)了一個(gè)報(bào)錯(cuò)是“Cannot read property ‘enable_sync’ of undefined”殊橙，后面發(fā)現(xiàn)需要在根目錄的配置文件添加如下的命令即可正常運(yùn)行。

關(guān)于配置valine評(píng)論系統(tǒng)時(shí)報(bào)了401的錯(cuò)誤螃概。且以前的評(píng)論不顯示鸽疾。需要配置serverURLs。具體配置可以見(jiàn)參考資料的內(nèi)容冒窍，這里不贅述了。

3 自定義的一些插件

3.1 頁(yè)腳修改

這個(gè)地方主要是修改了下訪客數(shù)量和訪問(wèn)總量那兩部分中文综液。打開(kāi)theme/next/layout/_partials/footer.njk文件。在畫(huà)圈部分加上中文即可檩奠。

效果圖附帽。

3.2 側(cè)邊欄插入訪客可視化、詞云整胃、建站時(shí)間以及最近推送文章

這些插件主要實(shí)現(xiàn)方式是喳钟，在根目錄/source下建立一個(gè)新的文件夾_data，然后新建一個(gè)sidebar.njk的新文件并輸入如下的代碼蛮寂。

<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("你的建站時(shí)間");
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>
<script type="text/javascript" id="clstr_globe" src="http://cdn.clustrmaps.com/globe.js?d=你自己的數(shù)字"></script>

{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/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 %}

{%- if theme.recent_posts %}
  <div class="links-of-recent-posts motion-element">
    <div class="links-of-recent-posts-title">
      {%- if theme.recent_posts.icon %}
      <i class="{{ theme.recent_posts.icon }} fa-fw"></i>
      {%- endif %}
      {{ theme.recent_posts.title }}
    </div>
    <ul class="links-of-recent-posts-list">
      {%- set posts = site.posts.sort('date', 'desc').toArray() %}
      {%- for post in posts.slice('0', theme.recent_posts.max_count) %}
        <li class="links-of-recent-posts-item">
          {{ next_url(post.path, post.title, {title: post.path}) }}
        </li>
      {%- endfor %}
    </ul>
  </div>
{%- endif %}

另外在NexT主題的配置文件中也要修改下酬蹋。

訪客可視化以及建站時(shí)間效果疾呻。

文章標(biāo)簽詞云以及最近推送文章效果。

3.3 背景圖的替換以及下方背景色塊設(shè)置

同樣需要在根目錄/source/_data下新建一個(gè)style.styl的新文件并輸入如下的代碼尉咕。

#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
body {
      background: url(http://media.gisersqdai.top/snzs.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}
// 頁(yè)面底部頁(yè)腳
.footer {
    line-height: 1.5;
    background-color: rgba(255, 255, 255, 0.75);
    color: #333;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: rgb(161, 102, 171);
    box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.15);
}
// 選中文字部分的樣式
::selection {
    background-color: rgb(255, 241, 89);
    color: #555;
}

.links-of-recent-posts
  font-size: 0.8125em
  margin-top: 10px

.links-of-recent-posts-title
  font-size: 1.03em
  font-weight: 600
  margin-top: 0

.links-of-recent-posts-list
  list-style: none
  margin: 0
  padding: 0

也需要在NexT配置文件中修改璃岳。

背景色塊效果。

3.4 Daovoice

增加一個(gè)Daovoice支持的聊天界面单芜。daovoice控制臺(tái)犁柜。在next/layout/_partials/head/head.njk文件中加入如下代碼。

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

NexT配置文件中增加扒腕。

效果圖。

[

參考資料:

• 【Git】保姆級(jí)詳解：Git配置SSH Key（密鑰和公鑰）到github
• git設(shè)置SSH密鑰
• "Cannot read property 'match' of undefined" during Npm install
• "internal/modules/cjs/loader.js:582 throw err"
• nodejs 報(bào)錯(cuò) Error: EPERM: operation not permitted,mkdir‘xxxxxxxxxxxxxxxx‘
• Cannot read property ‘enable_sync’ of undefined
• 解決Valine評(píng)論不顯示的問(wèn)題
• 【解決方法】Valine評(píng)論不顯示
• Valine評(píng)論異常解決
• 為博客新增評(píng)論系統(tǒng)
• Next主題設(shè)置-安裝Valine和Artitalk
• hexo d命令報(bào)錯(cuò) ERROR Deployer not found: git
• Hexo主題中添加日歷云功能
• hexo next主題添加日歷云
• Hexo日歷插件
• Hexo x NexT - 顯示最新文章皆的、導(dǎo)入Google Analytics 的坑
• Hexo-NexT 設(shè)置近期文章
• hexo next主題添加日歷云
• Hexo日歷插件
• 迎來(lái)船新版本的Hexo+NexT
• 個(gè)人blog搭建指南github pages和hexo-theme-next
• 【目錄】Hexo+NexT+Gemini 搭建博客擁抱舒爽