这个博客跌跌撞撞也弄了好多天了，由于Next主题不知道什么情况，被我玩坏了。所以换了一个主题。
大名鼎鼎的yilia主题，崇尚简约优雅，以及极致的性能，符合我的性格。以后很长一段时间都用这个主题啦。
接下来来说一下一些yili主题个性化自定义的方法和自己走过的坑。
本教程适用于yilia主题
前言
由于yilia已经不维护了，坑还挺多的，所以下面这些方法都是我试过了才敢拿出来的。
如果有错误，请原步骤返回检查错误，或者参考官方教程↓
yilia主题github开源地址
本篇收集了全网目前最全的攻略啦，各位凑活着看。
这是一个系列，第一步先借鉴一下别人的代码，哈哈哈哈嗝。
如何正确使用yilia主题
安装
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
配置
修改hexo根目录下的 _config.yml ： theme: yilia
自定义配置
主题配置文件在主目录下的 _config.yml，请根据自己需要修改使用。 完整配置例子，可以参考作者的博客
主题配置详细介绍
接下来我来说一下主题配置中的基本配置有哪些可以自定义的地方，详细看下面的备注
部分代码我会用我自己的配置来讲解具体用法
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.运行服务器，发现出现错误提示
<%- 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') %>
</%-></%-></%-></%></%-></%></%-></%-></%->
如果出现上述错误提示，说明少装了插件，逐条执行以下命令安装插件：
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最下面加上
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的值” 支付宝的改成这个 < code><%=theme.root%><%= theme.alipay%>微信的改成这个<%=theme.root%><%= theme.weixin%><!--%=--><!--%=theme.root%--><!--%=--><!--%=theme.root%--></p>
<h3>4.微信分享不成功</h3>
<p>因为百度网盘取消了生成二维码的功能，导致之前的链接不可用了。
修改 <strong>themes\yilia\layout_partial\post\share.ejs</strong>
把第49行中的 <code>//pan.baidu.com/share/qrcode?url=</code>修改为<br> <code>//api.qrserver.com/v1/create-qr-code/?size=150x150&data=</code>
即可</p>
<h3>5.在左侧显示总文章数</h3>
<p>修改 <code>themes\yilia\layout\_partial\left-col.ejs</code>
在</p>
<pre><code><nav class="header-menu">
</nav>
</code></pre>
<p>后面加入</p>
<pre><code><nav>
<a>总文章数 <%=site.posts.length%></%=site.posts.length%></a>
</nav>
</code></pre>
<p>效果如下
<img alt="" src="https://upload-images.jianshu.io/upload_images/18899245-82f087f56c7d9d9f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" /></p>
<h3>6.添加来必力评论系统</h3>
<p>yilia默认带了几个系统，但我是从next这个主题转过来的，之前用的是来必力(livere)，不想换了，就得手动在yilia里面加。
按网上的方法我试了好久才成功.....原因就是他们的教程不够详细。
首先是去注册<a href="https://www.livere.com/">livere</a>，然后获取到自己的id
查看ID方法，右上角头像-管理页面-代码管理获取
<img alt="" src="https://upload-images.jianshu.io/upload_images/18899245-d6f79bc8de03d9c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
新建 <code>\themes\yilia\layout\_partial\post\livere.ejs</code>
内容直接复制代码管理里面的内容
<img alt="" src="https://upload-images.jianshu.io/upload_images/18899245-aa9a0e2f444e439a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
然后编辑 <code>themes\yilia\layout\_partial\article.ejs</code>
找到 <code><% if (!index && post.comments){ %><!--%--></code> 在它的下方加入以下代码</p>
<pre><code> <% if (theme.livere){ %>
<%- partial('post livere', { key: post.slug, title: post.title, url: config.url+url_for(post.path) }) %>
<% } %>
</%></%-></%>
</code></pre>
<p>接下来需要在主题配置文件 <strong>_config.yml</strong>中添加以下内容：</p>
<pre><code>#7.来必力
livere: 这里填你的ID
</code></pre>
<p>并把其他的评论系统代码屏蔽
<img alt="" src="https://upload-images.jianshu.io/upload_images/18899245-f2a96008992d9fc4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
然后 <strong>hexo clean</strong>和 <strong>hexo d</strong>重新部署即可。
效果如图
<img alt="" src="https://upload-images.jianshu.io/upload_images/18899245-ae6339b25bf1a392.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" /></p>
<h3>7.添加字数统计</h3>
<p>安装hexo-wordcount<br> <code>npm i --save hexo-wordcount</code></p>
<p><strong>!!Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)!!</strong><br> <code>npm install hexo-wordcount@2 --save</code></p>
<p>然后打开 <code>themes\yilia\layout\_partial\left-col.ejs</code>
如果需要 <strong>在左侧添加</strong>的话，在之前显示总文章数的代码位置下添加代码<br> <code><a>总字数 </a></code>
即</p>
<pre><code><nav>
<a>总文章数 <%=site.posts.length%></%=site.posts.length%></a>
<a>总字数 </a>
</nav>
</code></pre>
<p><strong>显示单篇字数和预计阅读时长</strong>的话
编辑 <code>themes\yilia\layout\_partial\article.ejs</code> 在第一个下，添加代码
<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里面的内容清空即可
主题简单美化与完善
1.添加百度统计
先打开百度统计 ，添加站点，复制获得的代码，粘贴到
\themes\yilia\layout\_partial\footer.ejs中如下代码块
和
即可（如果没有可以自己写上去。）
<div>
这里粘贴代码
</div>
即可
注意：代码块 和 一定要在 <footer></footer>和 之间
2.修改文章标题样式
打开 \themes\yilia\source-src\css\article.scss添加如下样式（喜欢什么样式可以自己修改）：
.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'}) %><!--%--->
修改为
<%# 注释掉-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，打开编辑，添加如下代码：
.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修改如下：
当然也可以改成其他内容。其他内容怎么修改以后再慢慢说(比如建站时间什么的。)
当然各位也可以先自己尝试一下。
4.文章添加版权声明
在 \themes\yilia\layout\_partial\article.ejs中如下的位置添加代码
<% } %>
<-- 在此处添加代码-->
<% 1 2 if ((theme.reward_type="==" || (theme.reward_type="==" && post.reward)) !index){ %>
</%></--></%>
添加的代码如下
<%# 添加文章版权 %>
<% var surl="url.replace(/index\.html$/," ''); ? : 'https:' + surl; %>
<% 1 2 if ((theme.declare_type="==" || (theme.declare_type="==" && post.declare)) !index){ %>
<div>
<blockquote>
<strong>本文作者：</strong>
<% if(config.author !="undefined){" %>
<%= config.author%>
<% }else{%>
<font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
<%}%>
<strong>本文链接：</strong>
<%= surl%>
<strong>版权声明：</strong>
本作品采用
进行许可。转载请注明出处！
<% if(theme.licensee_img !="undefined){" %>
<% } %>
</%></%></%=></%}%></%></%=></%></blockquote>
<%# 添加文章底部标语 %>
<hr>
<center></center>
<hr>
</%#></div>
<% } else {%>
<% } %>
</%></%></%></%></%#>
具体如图
继续修改yilia主题配置文件
_config.yml，添加如下代码
#版权
版权基础设定：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即可。
后语
更多消息请关注我们: 奥怪的小栈
未完待续……
Original: https://www.cnblogs.com/aoguai/p/11781505.html
Author: 奥怪
Title: hexo博客yili主题个性化自定义教程（1） ——借鉴中学习，初认yili主题
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/642954/
转载文章受原作者版权保护。转载请注明原作者出处！