hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了。所以换了一个主题。
大名鼎鼎的yilia主题,崇尚简约优雅,以及极致的性能,符合我的性格。以后很长一段时间都用这个主题啦。
接下来来说一下一些yili主题个性化自定义的方法和自己走过的坑。

本教程适用于yilia主题

前言

由于yilia已经不维护了,坑还挺多的,所以下面这些方法都是我试过了才敢拿出来的。
如果有错误,请原步骤返回检查错误,或者参考官方教程↓
yilia主题github开源地址

本篇收集了全网目前最全的攻略啦,各位凑活着看。
这是一个系列,第一步先借鉴一下别人的代码,哈哈哈哈嗝。

如何正确使用yilia主题

安装

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

配置

修改hexo根目录下的_config.ymltheme: yilia

自定义配置

主题配置文件在主目录下的_config.yml,请根据自己需要修改使用。 完整配置例子,可以参考作者的博客

主题配置详细介绍

接下来我来说一下主题配置中的基本配置有哪些可以自定义的地方,详细看下面的备注
部分代码我会用我自己的配置来讲解具体用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
# Header
// 这段代码是左侧栏的相关展示内容,后期可以加上分类,关于等。每个页面后面是它的存放路径
menu:
主页: /
随笔: /tags/随笔/

# SubNav // 这段代码是左侧栏的相关联系方式图标,后期可以修改图标等。
subnav:
github: "#" //不需要就改成 "#"这个是github
weibo: "#" //微博
rss: "#" //RSS
zhihu: "#" //知乎
#qq: "#" //QQ
#weixin: "#" //微信
#jianshu: "#" //简书
#douban: "#" //豆瓣
#segmentfault: "#" //思否segmentfault
#bilibili: "#" //哔哩哔哩
#acfun: "#" //acfun
#mail: "mailto:litten225@qq.com" //比如你想展示邮箱,就把这里的地址改成你自己的邮箱即可。前面的 mailto: 不要去掉
#facebook: "#" //facebook
#google: "#" //google
#twitter: "#" //twitter
#linkedin: "#" //linkedin

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root:

# Content

# 文章太长,截断按钮文字
excerpt_link: more //这个文字是可以自己修改的,比如我的就改成了展开全文
# 文章卡片右下角常驻链接,不需要请设置为false,如果上面改成了展开全文,这个建议改为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果' //这个是打赏时候显示的文字,可以修改
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg ,网络图片直接用 https://xxx.png 即可
alipay:
# 微信二维码图片地址
weixin:

# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置,如果你的目录标题习惯有标号,置为true即可隐藏hexo重复的序号;否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: '' # 百度分析
google_analytics: '' # 谷歌分析
favicon: /favicon.png # 站点logo

#你的头像url
avatar:

#是否开启分享
share_jia: true

#评论:1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment
#不需要使用某项,直接设置值为false,或注释掉
#具体请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false #你的 GitHub ID
gitment_repo: '' #存储评论的 repo
gitment_oauth:
client_id: '' #client ID
client_secret: '' #client secret

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
# 左侧栏头像上面的背景颜色
header: '#4d4d4d'
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
# 是否默认展开tags板块
showTags: false

# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '所有文章'
friends: '友链'
aboutme: '关于我'

friends:
友情链接1: http://localhost:4000/
友情链接2: http://localhost:4000/
友情链接3: http://localhost:4000/
友情链接4: http://localhost:4000/
友情链接5: http://localhost:4000/
友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家 //这个是出现在 关于我 页面的一句话 <br> 是换行的意思。

请照着上面的备注,一条一条修改看看效果,就能大概掌握最基础的主题自定义啦。

主题BUG修复

参考

1.运行服务器,发现出现错误提示

1
2
3
4
5
6
<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>

如果出现上述错误提示,说明少装了插件,逐条执行以下命令安装插件:

1
2
3
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

然后hexo clean清除清除缓存文件和已生成的静态文件再次运行即可。

2.左滑块“所有文章”按钮的安装

首先确保使用版本是不是大于6.2.
使用命令node -v检查
然后在hexo的配置文件_config.yml最下面加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true

重启服务器即可

2.头像不显示

进入文章后,头像就不显示。
修改themes\yilia\layout_partial\left-col.ejs的第六行,改为
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同时,还要修改themes\yilia\layout_partial\mobile-nav.ejs
里面的第10行,修改为
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

3.打赏二维码不显示

修改themes\yilia\layout_partial\article.ejs
找到<img class=”reward-img”``这个标签,改后面src的值 支付宝的改成这个<%=theme.root%><%= theme.alipay%>微信的改成这个<%=theme.root%><%= theme.weixin%>`

4.微信分享不成功

因为百度网盘取消了生成二维码的功能,导致之前的链接不可用了。
修改themes\yilia\layout_partial\post\share.ejs
把第49行中的//pan.baidu.com/share/qrcode?url=修改为
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
即可

5.在左侧显示总文章数

修改themes\yilia\layout\_partial\left-col.ejs

1
2
3
4
5
6
7
<nav class="header-menu">
<ul>
<% for (var i in theme.menu){ %>
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<%}%>
</ul>
</nav>

后面加入

1
2
3
<nav>
<a>总文章数 <%=site.posts.length%></a>
</nav>

效果如下
总文章数

6.添加来必力评论系统

yilia默认带了几个系统,但我是从next这个主题转过来的,之前用的是来必力(livere),不想换了,就得手动在yilia里面加。
按网上的方法我试了好久才成功…..原因就是他们的教程不够详细。
首先是去注册livere,然后获取到自己的id
查看ID方法,右上角头像-管理页面-代码管理获取
来必力获得ID
新建\themes\yilia\layout\_partial\post\livere.ejs
内容直接复制代码管理里面的内容
来必力_内容
然后编辑themes\yilia\layout\_partial\article.ejs
找到<% if (!index && post.comments){ %> 在它的下方加入以下代码

1
2
3
4
5
6
7
<% if (theme.livere){ %>
<%- partial('post/livere', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

接下来需要在主题配置文件_config.yml中添加以下内容:

1
2
#7.来必力
livere: 这里填你的ID

并把其他的评论系统代码屏蔽
屏蔽其他评论系统代码
然后hexo cleanhexo d重新部署即可。
效果如图
来必力评论效果

7.添加字数统计

安装hexo-wordcount
npm i --save hexo-wordcount

!!Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)!!
npm install hexo-wordcount@2 --save

然后打开themes\yilia\layout\_partial\left-col.ejs
如果需要在左侧添加的话,在之前显示总文章数的代码位置下添加代码
<a>总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>

1
2
3
4
<nav>
<a>总文章数 <%=site.posts.length%></a>
<a>总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>

显示单篇字数和预计阅读时长的话
编辑themes\yilia\layout\_partial\article.ejs`` 在第一个`下,添加代码

1
2
3
<div align="center" class="post-count">
字数:<%= wordcount(post.content) %>字 | 预计阅读时长:<%= min2read(post.content) %>分钟
</div>

即可
效果如下
显示单篇字数和预计阅读时长

8.取消访问litten.me:9005

关于访问litten.me:9005的问题,这个主题的作者之前为了更好地完善这个主题,有时候会收集用户的客户端信息,详情请见这里,如果不想被统计,就将themes\yilia\source-src\js\report.js里面的内容清空即可

主题简单美化与完善

参考:
Yilia个性设置- CSDN博客

1.添加百度统计

先打开百度统计 ,添加站点,复制获得的代码,粘贴到
\themes\yilia\layout\_partial\footer.ejs中如下代码块

即可(如果没有可以自己写上去。)
添加百度统计代码

1
2
3
<div>
这里粘贴代码
</div>

即可
注意:代码块<div></div>一定要在<footer></fotter>之间

2.修改文章标题样式

打开\themes\yilia\source-src\css\article.scss添加如下样式(喜欢什么样式可以自己修改):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.article-title_code_ant {
color: black;
margin-left: 0px;
font-weight: 50;
line-height: 1em;
margin-bottom: 1em;
font-size: 27px;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
&:hover{
color: #B0A0AA;
}
}

再打开\themes\yilia\layout\_partial\article.ejs
搜索<%- partial('post/title', {class_name: 'article-title'}) %>
修改为

1
2
3
<%# 注释掉-partial('post/title', {class_name: 'article-title'}) %>
<%# 修改模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

如图所示
修改文章标题样式代码

即可,但是现在发现标题的颜色为a标签设置颜色,让我们继续来解决。
继续修改文件,找到\themes\yilia\source\main.0cf68a.css,打开编辑,添加如下代码:

1
2
3
4
5
6
7
8
9
.article-inner h1.article-title_code_ant, .article-title_code_ant {
color: #000000;
margin-left: 0;
font-weight: 50;
line-height: 1em;
margin-bottom: 1em;
font-size: 27px;
transition: color .3s
}

解决√
效果如下
修改文章标题样式效果

3.删除或修改博客底部Hexo Theme Yilia by Litten

打开\themes\yilia\layout\_partial\footer.ejs修改如下:

1
2
<div class="footer-right">
</div>

当然也可以改成其他内容。其他内容怎么修改以后再慢慢说(比如建站时间什么的。)
当然各位也可以先自己尝试一下。

4.文章添加版权声明

\themes\yilia\layout\_partial\article.ejs中如下的位置添加代码

1
2
3
4
5
<% } %>

<-- 在此处添加代码-->

<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

添加的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<%# 添加文章版权 %>
<%
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>
<blockquote>
<strong>本文作者:</strong>
<% if(config.author != undefined){ %>
<%= config.author%>
<% }else{%>
<font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
<%}%>
<br>
<strong>本文链接:</strong>
<%= sUrl%>
<br>
<strong>版权声明:</strong>
本作品采用
<a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
进行许可。转载请注明出处!
<% if(theme.licensee_img != undefined){ %>
<br>
<a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
<% } %>
</blockquote>

<%# 添加文章底部标语 %>
<hr>
<center><strong><%= theme.licensee_slogan%></strong></center>
<hr>
</div>
<% } else {%>
<div hidden="hidden"></div>
<% } %>

具体如图
文章添加版权声明代码
继续修改yilia主题配置文件_config.yml,添加如下代码

1
2
3
4
5
6
7
#版权
# 版权基础设定:0-关闭声明; 1-文章对应的md文件里有declare: true属性,才有版权声明; 2-所有文章均有版权声明
declare_type: 2 #所有文章均有版权声明
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ # 当前应用的版权协议地址。
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议' # 版权协议的名称
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png # 版权协议的Logo
licensee_slogan: 乐于分享,专注互联网生活. # 标语

如果需要章对应的md文件里有declare: true属性,才有版权声明的话,在需要进行版权声明的文章的md文件头部,设置属性declare: true即可。

后语

更多消息请关注我们: 奥怪的小栈

未完待续……

评论