博客系統(tǒng)hexo yelee搭建歷程

使用hexo搭建博客

什么是 Hexo已烤？
Hexo 是一個快速含懊、簡潔且高效的博客框架斤彼。Hexo 使用 Markdown（或其他渲染引擎）解析文章范抓，在幾秒內(nèi)纸型，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁拇砰。

npm install hexo
hexo init <blog folder>
cd <blog folder>
npm install 
hexo clean && hexo g && hexo d
hexo server

使用yelee模板

使用hexo-theme-yelee 模板，該模板個人感覺非常高大上狰腌，故使用該模板搭建除破。
進(jìn)入themes目錄，拉取yelee代碼

cd themes
git clone https://github.com/MOxFIVE/hexo-theme-yelee

更改根目錄的_config.yml文件

theme: yelee

在使用命令

hexo clean | hexo g | hexo s

即可進(jìn)入到自己的博客頁琼腔。

在這里插入圖片描述

我的博客：Zoey-Share-Site

yelee模板bug處理

首頁不顯示文章列表,這是因?yàn)榧虞d出錯了,進(jìn)行更改
進(jìn)入yelee模板頁的 .config.yml
將search.onload false 配置改成 search.on false 即可使首頁正常顯示

創(chuàng)建一些系統(tǒng)頁

生成標(biāo)簽云
hexo new page tags
生成關(guān)于我
hexo new page about
為文章添加分類
hexo new page categories

添加統(tǒng)計字?jǐn)?shù)

npm i --save hexo-wordcount

文件配置：

在yelee/layout/_partial/post/word.ejs下創(chuàng)建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字?jǐn)?shù)統(tǒng)計: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  閱讀時長: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在 themes/yelee/layout/_partial/article.ejs中添加

<div class="article-inner">
    <% if (theme.fancybox){ %>
      <input type="hidden" class="isFancy" />
    <% } %>
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <!-- 開始添加字?jǐn)?shù)統(tǒng)計-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
         <!-- 添加完成 -->
      </header>

開啟功能
在yelee主題的_config.yml中添加下面代碼

word_count: True

配置本地搜索

npm install hexo-generator-search --save

然后配置文件themes/yelee/_config.yml中修改為：

search:
  on: ture
  #on: false

左邊的本地搜索即可使用瑰枫，不過可能會有點(diǎn)慢。

RSS 訂閱

npm install hexo-generator-feed --save

重啟服務(wù)即可本地查看效果丹莲。

網(wǎng)站運(yùn)行時間添加

<span id="timeDate">載入天數(shù)...</span><span id="times">載入時分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("02/14/2018 12:49:00");//此處修改你的建站時間或者網(wǎng)站上線時間 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全運(yùn)行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>

Url 持久化

我們可以發(fā)現(xiàn) hexo 默認(rèn)生成的文章地址路徑是【網(wǎng)站名稱／年／月／日／文章名稱】光坝。

這種鏈接對搜索爬蟲是很不友好的，它的 url 結(jié)構(gòu)超過了三層圾笨，太深了教馆。

下面我推薦安裝 hexo-abbrlink 插件：

npm install hexo-abbrlink --save

然后配置根目錄的_config.yml

permalink: :title/

減少出站鏈接能夠有效防止權(quán)重分散，hexo 有很方便的自動為出站鏈接添加 nofollow 的插件擂达。

首先安裝 hexo-autonofollow 插件：

npm install hexo-autonofollow --save

再在外層_config.yml 中添加配置土铺，將 nofollow 設(shè)置為 true：

# 外部鏈接優(yōu)化
nofollow:
    enable: true
    exclude:     # 例外的鏈接，可將友情鏈接放置此處
    - 'yousite'

這樣板鬓，例外的鏈接將不會被加上 nofollow 屬性悲敷。

示例：Zoey-Share-Site

添加萌妹子

獲取

npm install --save hexo-helper-live2d

配置

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-unitychan
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

需要哪個萌妹子，需要先下載模型俭令，官方

npm install live2d-widget-model-shizuku

添加文章評論

文章評論可以選擇來必力或者Valine等后德。
這里演示Valine的接入方式，當(dāng)然來必力接入也非常簡單抄腔，有興趣者也可以研究下瓢湃。
先去Valine官網(wǎng)注冊賬號，創(chuàng)建開發(fā)版應(yīng)用赫蛇，申請獲得appid和appkey绵患，
然后修改配置文件：

在/yelee/_config.yml中加入：

valine:
  on: true
  appid: ***** # App ID
  appkey: ***** # App Key
  verify: true # 驗(yàn)證碼
  notify: true # 評論回復(fù)郵箱提醒
  avatar: mp # 匿名者頭像選項(xiàng)
  placeholder: Just go go!

在CDN中加入：

valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

在/yelee/layout/_partial/article.ejs中加入

 <% } else if (theme.livere.on) { %>
      <%- partial('comments/livere') %>
      <!--加入下面內(nèi)容-->
    <% } else if (theme.valine.on){ %>
        <%- partial('comments/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
          }) %>
          
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% }

創(chuàng)建/yelee/layout/_partial/comments/valine.ejs文件，寫入：

<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
    <div id="vcomment" class="comment"></div>
    <script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="<%- theme.CDN.valine %>"></script>
    <script>
      new Valine({
        el: '#vcomment',
        notify: '<%= theme.valine.notify %>',
        verify: '<%= theme.valine.verify %>',
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar: "<%= theme.valine.avatar %>"
      });
    </script>
</section>

在/yelee/source/css/_partial/mobile.styl最后加入：

#comments {
    margin: (10/16)rem 10px !important;
    padding: 1rem !important;
}

加入網(wǎng)易云音樂

進(jìn)入網(wǎng)易云音樂版悟耘，可以選擇單曲生成音樂鏈接外鏈落蝙，也可以創(chuàng)建歌單，添加多條歌曲，在生成一個歌單播放器外鏈筏勒，注意部分歌曲因?yàn)榘鏅?quán)問題而無法生成外鏈移迫，應(yīng)當(dāng)去除有版權(quán)的歌曲。

image

在自己覺得需要的地方加入管行，樣式可以自己在調(diào)整下厨埋，相信你可以的。

<div style="position:absolute; bottom:120px;left:auto; width:85%">
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="http://music.163.com/outchain/player?type=2&id=422428548&auto=1&height=66"></iframe>
</div>

示例：Zoey-Share-Site

讓Hexo一直在后臺運(yùn)行

安裝pm2

$ npm install -g pm2

寫一個執(zhí)行腳本
在博客根目錄下面創(chuàng)建一個hexo_run.js

//run
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})

運(yùn)行腳本
在根目錄下

# pm2 start hexo_run.js