Hexo 基于yilia主題及其它插件優(yōu)化

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

yilia 主題設(shè)置

安裝主題

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

vim /Hexo/_config.yml

theme: yilia

修改默認設(shè)置

vim yilia/_config.yml

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

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

# 文章太長，截斷按鈕文字
# excerpt_link: more             注釋掉此行

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

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

favicon: /img/xhren.jpg

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

##修改默認評論系統(tǒng) 4選一 推薦 gitalk 或 valine
#評論：1、Disqus；2、Gitment 3.gitalk 4.valine
#不需要使用某項，直接設(shè)置值為false，或注釋掉
#具體請參考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'          #存儲評論的 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 #驗證碼
  notify: false #評論回復(fù)提醒
  avatar: mm #評論列表頭像樣式：''/mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go #評論框占位符


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

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

# 智能菜單
# 如不需要，將該對應(yī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;

修改行號顏色，搜索 .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;

代碼塊行號顯示錯亂

vim yilia/source/main.0cf68a.css

將 white-space:pre-wrap; 刪除.
這個問題是自動換行造成的，使用不自動換行的white-space:pre;
樣式代碼塊部分會自動出現(xiàn)底部滾動條，行號錯亂問題就沒有了。

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

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

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

單篇文章點擊量

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)計、網(wǎng)站運行時間、網(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號</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">載入時分秒...</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");//此處修改你的建站時間或者網(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 = "本站已安全運行 "+dnum+" 天 "; 
            document.getElementById("times").innerHTML = hnum + " 小時 " + 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">請在博客根目錄“_config.yml”中填入正確的“author”</font>
    <%}%>
    <br>
    <strong>本文鏈接：</strong>
    <%= sUrl%>
    <br>
    <strong>版權(quán)聲明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
    進行許可。轉(zhuǎn)載請注明出處！
    <% if(theme.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.licensee_url%>"><img alt="知識共享許可協(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
---

參考

評論系統(tǒng)

Valine - 一款快速、簡潔且高效的無后端評論系統(tǒng)。
GITALK 一個基于 Github Issue 和 Preact 開發(fā)的評論插件。

刪除 多說、網(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 添加在線聊天

最近瀏覽博客時，發(fā)現(xiàn)了在線聊天的插件。愛折騰的我肯定是要在自己的站點試試的。
相關(guān)產(chǎn)品有 Tidio、 TalkJS、Intercom、tawk.to、 DaoVoice等，使用體驗都很好，交互界面也很干凈別致。本站目前已測試Tidio、DaoVoice

yilia/layout/_partial/head.ejs

image

Tidio參考
DaoVoice參考

SEO 之 Url持久化

安裝 hexo-abbrlink

npm install hexo-abbrlink --save

配置_config.yml

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

參考

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

cd /Hexo
npm install hexo-blog-encrypt

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

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

然后在想加密的文章頭部添加上對應(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: 是該博客的摘要，會顯示在博客的列表頁
message: 這個是博客查看時，密碼輸入框上面的描述性文字

參考

原文鏈接

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 內(nèi)容簡介此篇文章介紹的是個人博客的一些配置內(nèi)容，包含博客項目的介紹、主題配置、圖床配置以及各種第三方功能插件的使用...
    Little_Dragon_閱讀 1,802評論 0贊 9
  • 前言 這算是各種文章的集合了，如果你有耐心就看完吧(Ｔ▽Ｔ) 如果是明確想要哪一種功能的童鞋，那就直接查找吧( ...
    前端攻城獅阿黃閱讀 3,336評論 1贊 6
  • 背景 搭建自己的hexo博客 解決 我的博客最終事例 1.草稿相當于很多博客都有的“私密文章”功能。 會在sour...
    飛奔的阿加西閱讀 12,787評論 1贊 13
  • 我愛你 可是我卻從不言語， 我怕說出來，字眼太輕浮，褻瀆了這份純潔的愛。 就默默的將它放在了心底。 時間的推移，讓...
    小馨馨的小世界閱讀 434評論 3贊 7
  • 電影《回陣》講的主題是如果你知道了結(jié)局，讓你重來一次，那么在那些讓命運由盛轉(zhuǎn)衰的節(jié)點，你將如何抉擇。而說到抉擇，最...
    李想的生活閱讀 600評論 0贊 0

友情鏈接更多精彩內(nèi)容