本文主要介绍基于yilia主题及其它一些插件完善hexo,搭建hexo静态博客请参考。生命不息，折腾不止。
yilia 主题设置
安装主题
cd /Hexo/themes/
git clone https://github.com/litten/hexo-theme-yilia.git yilia
vim /Hexo/_config.yml
theme: yilia
修改默认设置
vim yilia/_config.yml
menu:
主页: /
归档: /archives/index.html
关于: /about
# SubNav
subnav:
jianshu: "http://www.jianshu.com/users/1a96b9218380/timeline"
github: "https://github.com/EvanVivian"
zhihu: "https://www.zhihu.com/people/yan-wei-chao-78/activities"
# 文章太长，截断按钮文字
# excerpt_link: more 注释掉此行
# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '请我吃颗糖果吧' 修改文案
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /img/EvanAlipay.jpg 添加图片并写上地址
# 微信二维码图片地址
weixin: /img/EvanWechat.jpg 添加图片并写上地址
# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2 ## 修改为默认开启目录
favicon: /img/xhren.jpg
#你的头像url
avatar: /img/daerzi.jpg
##修改默认评论系统 4选一 推荐 gitalk 或 valine
#评论：1、Disqus；2、Gitment 3.gitalk 4.valine
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/
#1、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用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应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
placeholder: Just go go #评论框占位符
# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
# 头像上面的背景颜色
header: '#03344b' #修改为这个颜色后就跟为的页面一样了
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#03344b)'
## 版权声明 后续步骤请看下边
declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '搜索'
friends: '友链'
aboutme: false
## 关闭 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;
样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。
添加不蒜子统计
yilia/layout/_partial/after-footer.ejs 中加入
单篇文章点击量
themes/yilia/layout/_partial/article.ejs中 在 <%- partial('post/title', {class_name: 'article-title'}) %> 插入如下代码
<% if (!index && post.comments){ %>
阅读数: 次
<% } %>
参考
备案信息、PV & UV统计、网站运行时间、网站框架及模板
修改 yilia/layout/_partial/footer.ej 内容为
版权声明
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){ %>
本文作者：
<% if(config.author != undefined){ %>
<%= config.author%>
<% }else{%>
请在博客根目录“_config.yml”中填入正确的“author”
<%}%>
本文链接：
<%= sUrl%>
版权声明：
本作品采用
<%= theme.licensee_name%>
进行许可。转载请注明出处！
<% if(theme.licensee_img != undefined){ %>
<% } %>
<% } else {%>
<% } %>
版权添加样式
vim yilia/source/main.0cf68a.css 添加如下代码
.declare {
background-color: #eaeaea;
margin-top: 2em;
border-left: 3px solid #ff1700;
padding: .5em 1em; }
版权声明参考
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
}
});
};
设置文章置顶
在文章 顶部 添加 top 值，数值越大文章越靠前，如：
---
title: Hexo+yilia主题配置备忘
date: 2019-03-05 18:47:55
top: 10
---
参考
评论系统
Valine - 一款快速、简洁且高效的无后端评论系统。
GITALK 一个基于 Github Issue 和 Preact 开发的评论插件。
删除 多说、网易云跟帖、畅言 添加 gitalk、valine
cd /Hexo/themes/EvanM/layout/_partial/post/
\rm -rf changyan.ejs duoshuo.ejs wangyiyun.ejs
vim gitalk.ejs
vim valine.ejs
vim /Hexo/themes/EvanM/layout/_partial/article.ejs
删除内容为
<% 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)
}) %>
<% } %>
添加如下内容
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<%- partial('post/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% if(theme.gitalk.enable){ %>
<%- partial('post/gitalk', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% } %> ##倒数第一行
参考
参考
参考
Hexo 之 yilia 添加在线聊天
最近浏览博客时，发现了在线聊天的插件。爱折腾的我肯定是要在自己的站点试试的。
相关产品有 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 实现私密文件加密
cd /Hexo
npm install hexo-blog-encrypt
vim /Hexo/_config.yml 添加如下内容
# Security
## 文章加密 hexo-blog-encrypt
encrypt:
enable: true
然后在想加密的文章头部添加上对应字段，如
---
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: 这个是博客查看时，密码输入框上面的描述性文字
参考
原文链接