本文主要介紹基于yilia主題及其它一些插件完善hexo,搭建hexo靜態(tài)博客請(qǐng)參考铃彰。生命不息绍豁，折騰不止。

yilia 主題設(shè)置

安裝主題

cd /Hexo/themes/
git clone https://github.com/litten/hexo-theme-yilia.git yilia

vim /Hexo/_config.yml

theme: yilia

修改默認(rèn)設(shè)置

vim yilia/_config.yml

menu:
  主頁(yè): /
  歸檔: /archives/index.html
  關(guān)于: /about

# SubNav
subnav:
  jianshu: "http://www.reibang.com/users/1a96b9218380/timeline"
  github: "https://github.com/EvanVivian"
  zhihu: "https://www.zhihu.com/people/yan-wei-chao-78/activities"

# 文章太長(zhǎng)牙捉，截?cái)喟粹o文字
# excerpt_link: more             注釋掉此行

# 打賞
# 打賞type設(shè)定：0-關(guān)閉打賞竹揍； 1-文章對(duì)應(yīng)的md文件里有reward:true屬性，才有打賞邪铲； 2-所有文章均有打賞
reward_type: 2    
# 打賞wording
reward_wording: '請(qǐng)我吃顆糖果吧'          修改文案     
# 支付寶二維碼圖片地址芬位，跟你設(shè)置頭像的方式一樣。比如：/assets/img/alipay.jpg
alipay: /img/EvanAlipay.jpg             添加圖片并寫上地址
# 微信二維碼圖片地址
weixin: /img/EvanWechat.jpg             添加圖片并寫上地址

# 目錄
# 目錄設(shè)定：0-不顯示目錄霜浴； 1-文章對(duì)應(yīng)的md文件里有toc:true屬性晶衷，才有目錄； 2-所有文章均顯示目錄
toc: 2           ## 修改為默認(rèn)開(kāi)啟目錄

favicon: /img/xhren.jpg

#你的頭像url
avatar: /img/daerzi.jpg

##修改默認(rèn)評(píng)論系統(tǒng) 4選一 推薦 gitalk 或 valine
#評(píng)論：1阴孟、Disqus晌纫；2、Gitment 3.gitalk 4.valine
#不需要使用某項(xiàng)永丝，直接設(shè)置值為false锹漱，或注釋掉
#具體請(qǐng)參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、Disqus 在hexo根目錄的config里也有disqus_shortname字段慕嚷，優(yōu)先使用yilia的
disqus: false

#2哥牍、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: 'xxxxxx'          #存儲(chǔ)評(píng)論的 repo
gitment_oauth:
  client_id: 'xxxxxxxxxxxxxxxxx'           #client ID
  client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxx'       #client secret

#3、gitalk
gitalk:
  enable:  true
  githubID:  ********
  repo:  *****
  ClientID:  '*****************'
  ClientSecret:  '****************************'
  adminUser:  **********
  distractionFreeMode: true

#4喝检、Valine https://valine.js.org
valine: 
  appid:  #Leancloud應(yīng)用的appId
  appkey:  #Leancloud應(yīng)用的appKey
  verify: false #驗(yàn)證碼
  notify: false #評(píng)論回復(fù)提醒
  avatar: mm #評(píng)論列表頭像樣式：''/mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go #評(píng)論框占位符


# 樣式定制 - 一般不需要修改嗅辣，除非有很強(qiáng)的定制欲望…      
style:
  # 頭像上面的背景顏色
  header: '#03344b'     #修改為這個(gè)顏色后就跟為的頁(yè)面一樣了
  # 右滑板塊背景
  slider: 'linear-gradient(200deg,#a0cfe4,#03344b)'

## 版權(quán)聲明 后續(xù)步驟請(qǐng)看下邊
declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際許可協(xié)議'

# 智能菜單
# 如不需要，將該對(duì)應(yīng)項(xiàng)置為false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '搜索'
  friends: '友鏈'
  aboutme: false

## 關(guān)閉 aboutme 

修改代碼塊樣式

直接修改編譯好的文件挠说。路徑為： theme/yilia/source/main.0cf68a.css 
修改代碼背景色澡谭，搜索 .article-entry .highlight, 修改background后面的顏色

pre{background:#272822;
改為
pre{background:#1a0139;

修改行號(hào)顏色，搜索 .article-entry .highlight .gutter pre .line
將
.article-entry .highlight .gutter pre .line{color:#666
改為
.article-entry .highlight .gutter pre .line{color:#fc0000

修改代碼字體顏色 .article-entry .highlight .line
.article-entry .highlight .line{color:#fff;
修改為
.article-entry .highlight .line{color:#00ff0d;

代碼塊行號(hào)顯示錯(cuò)亂

vim yilia/source/main.0cf68a.css

將 white-space:pre-wrap; 刪除.
這個(gè)問(wèn)題是自動(dòng)換行造成的损俭，使用不自動(dòng)換行的white-space:pre;
樣式代碼塊部分會(huì)自動(dòng)出現(xiàn)底部滾動(dòng)條蛙奖，行號(hào)錯(cuò)亂問(wèn)題就沒(méi)有了潘酗。

添加不蒜子統(tǒng)計(jì)

yilia/layout/_partial/after-footer.ejs   中加入

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

單篇文章點(diǎn)擊量

themes/yilia/layout/_partial/article.ejs中 在 <%- partial('post/title', {class_name: 'article-title'}) %> 插入如下代碼

<!--顯示閱讀次數(shù)-->
<% if (!index && post.comments){ %>
  <br/>
  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
  <span class="icon-sort"></span>
  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
            閱讀數(shù): <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
  </span>
  </a>
<% } %>

參考

備案信息、PV & UV統(tǒng)計(jì)雁仲、網(wǎng)站運(yùn)行時(shí)間仔夺、網(wǎng)站框架及模板

修改 yilia/layout/_partial/footer.ej 內(nèi)容為

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %> - <a  target="_blank">京ICP備16022690號(hào)</a>
        </div>
        <div class="footer-right">
            <a  target="_blank">Evan</a>  Always Love<a  target="_blank"> Vivian</a>
        </div>
        </div>
        <span id="timeDate">載入天數(shù)...</span><span id="times">載入時(shí)分秒...</span> &||& <span id="busuanzi_container_site_uv">你是本博第 <span id="busuanzi_value_site_uv"></span> 位訪客</span> || <span id="busuanzi_container_site_pv">歷經(jīng) <span id="busuanzi_value_site_pv"></span> 次回眸才與你相遇</span> 
    <script>
        var now = new Date(); 
        function createtime() { 
            var grt= new Date("02/19/2017 22:02:00");//此處修改你的建站時(shí)間或者網(wǎng)站上線時(shí)間 
            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 + " 小時(shí) " + mnum + " 分 " + snum + " 秒"; 
        } 
    setInterval("createtime()",250);
    </script>
  </div>
</footer>

版權(quán)聲明

themes/yilia/layout/_partial/article.ejs中 在 <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %> 上邊插入如下代碼

<%
  var sUrl = url.replace(/index\.html$/, '');
  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
%>
<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
  <div class="declare">
    <strong>本文作者：</strong>
    <% if(config.author != undefined){ %>
      <%= config.author%>
    <% }else{%>
      <font color="red">請(qǐng)?jiān)诓┛透夸洝癬config.yml”中填入正確的“author”</font>
    <%}%>
    <br>
    <strong>本文鏈接：</strong>
    <%= sUrl%>
    <br>
    <strong>版權(quán)聲明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    進(jìn)行許可。轉(zhuǎn)載請(qǐng)注明出處攒砖！
    <% if(theme.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.licensee_url%>"><img alt="知識(shí)共享許可協(xié)議" style="border-width:0" src="<%=    theme.licensee_img%>"/></a>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

版權(quán)添加樣式
vim yilia/source/main.0cf68a.css 添加如下代碼

.declare {
  background-color: #eaeaea;
  margin-top: 2em;
  border-left: 3px solid #ff1700;
  padding: .5em 1em; }

版權(quán)聲明參考

Hexo 之yilia主題 添加分類

參考

博文置頂

修改 hexo-generator-index 插件
修改文件：node_modules/hexo-generator-index/lib/generator.js 為：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

設(shè)置文章置頂
在文章 頂部 添加 top 值缸兔，數(shù)值越大文章越靠前，如：

---
title: Hexo+yilia主題配置備忘
date: 2019-03-05 18:47:55
top: 10
---

參考

評(píng)論系統(tǒng)

Valine - 一款快速祭衩、簡(jiǎn)潔且高效的無(wú)后端評(píng)論系統(tǒng)灶体。
GITALK 一個(gè)基于 Github Issue 和 Preact 開(kāi)發(fā)的評(píng)論插件。

刪除 多說(shuō)掐暮、網(wǎng)易云跟帖蝎抽、暢言 添加 gitalk、valine

cd /Hexo/themes/EvanM/layout/_partial/post/
\rm -rf changyan.ejs duoshuo.ejs wangyiyun.ejs

vim gitalk.ejs

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
  
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">

if(<%=theme.gitalk.enable%>){
        var gitalk = new Gitalk({
        clientID: '<%=theme.gitalk.ClientID%>',
        clientSecret: '<%=theme.gitalk.ClientSecret%>',
        repo: '<%=theme.gitalk.repo%>',
        owner: '<%=theme.gitalk.githubID%>',
        admin: ['<%=theme.gitalk.adminUser%>'],
        id: '<%= page.date %>',
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>

vim valine.ejs

<div id="vcomment" class="comment"></div> 
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="http://unpkg.com/valine/dist/Valine.min.js"></script>
<script>
   var notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }
</script>

vim /Hexo/themes/EvanM/layout/_partial/article.ejs
刪除內(nèi)容為

<% if (theme.duoshuo){ %>
<%- partial('post/duoshuo', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

<% if (theme.wangyiyun){ %>
<%- partial('post/wangyiyun', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

<% if (theme.changyan_appid && theme.changyan_conf){ %>
<%- partial('post/changyan', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

添加如下內(nèi)容

  <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" style="margin:10px;padding:10px;background:#fff;">
      <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
    </section>
  <% } %>

  <% if(theme.gitalk.enable){ %>
    <%- partial('post/gitalk', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>    ##倒數(shù)第一行

參考
參考
參考

Hexo 之 yilia 添加在線聊天

最近瀏覽博客時(shí)路克，發(fā)現(xiàn)了在線聊天的插件樟结。愛(ài)折騰的我肯定是要在自己的站點(diǎn)試試的。
相關(guān)產(chǎn)品有 Tidio精算、 TalkJS瓢宦、Intercom、tawk.to灰羽、 DaoVoice等驮履，使用體驗(yàn)都很好，交互界面也很干凈別致廉嚼。本站目前已測(cè)試Tidio玫镐、DaoVoice

yilia/layout/_partial/head.ejs

image

SEO 之 Url持久化

安裝 hexo-abbrlink

npm install hexo-abbrlink --save

配置_config.yml

permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32
  rep: hex

參考

Hexo 實(shí)現(xiàn)私密文件加密

cd /Hexo
npm install hexo-blog-encrypt

vim /Hexo/_config.yml  添加如下內(nèi)容

# Security
## 文章加密 hexo-blog-encrypt
encrypt:
    enable: true

然后在想加密的文章頭部添加上對(duì)應(yīng)字段，如

---
title: hello world
date: 2016-03-30 21:18:02   
tags:       
password: 12345   （密碼）
abstract: Welcome to my blog, enter password to read. 
message: Welcome to my blog, enter password to read.     
---

password: 是該博客加密使用的密碼
abstract: 是該博客的摘要怠噪，會(huì)顯示在博客的列表頁(yè)
message: 這個(gè)是博客查看時(shí)恐似，密碼輸入框上面的描述性文字

參考

原文鏈接