Yilia个性设置

 

       这段时间一直在构建自己的个人博客，如想参观，请移步[我的博客](https://lijinhongpassion.github.io)，以下内容是我在yilia主题的基础上修改的样式，这里分享出来供大家参考。

---

---

####1、yilia更改头部图片

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1 2 3 4

# Miscellaneous baidu_analytics: '' google_analytics: '' favicon: /img/header.jpg

将喜欢的图片放入E:\my_personnel_blog_hexo\themes\yilia\source\img路径下，然后修改_config.yml的favicon: /img/图片名字.jpg

---

####2、QQ加好友链接

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

# SubNav subnav: github: "#" weibo: "#" rss: "#" zhihu: "#" #将QQ后的链接里面的uin值改为自己的QQ号即可。 qq: http://wpa.qq.com/msgrd?v=3&uin=2604068029&site=qq&menu=yes #weixin: "#" #jianshu: "#" #douban: "#" #segmentfault: "#" #bilibili: "#" #acfun: "#" #mail: "mailto:[email protected]" #facebook: "#" #google: "#" #twitter: "#" #linkedin: "#"

---

####3、样式定制

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1 2 3 4 5 6

# 样式定制 - 一般不需要修改，除非有很强的定制欲望… style: # 头像上面的背景颜色'url(https://i.loli.net/2019/03/15/5c8b3688b845e.jpg) 38px 23px' header: '#4d4d4d' # 右滑板块背景'linear-gradient(200deg,#a0cfe4,#e8c37e)' slider: 'linear-gradient(200deg,#ccc,#000)'

​ 这里更改了slider: ‘linear-gradient(200deg,#ccc,#000)’，效果图如下：

---

4、设置文章标题

​ 原标题样式我自己不是特别喜欢，颜色不喜欢，还有位置不喜欢，有共同需要的可以随我一起改源代码。

原样式：

目的样式：

1：经过调试，涉及两个文件，article.ejs和article.scss,路径分别为：

1 2	E:\my_personnel_blog_hexo\themes\yilia\layout\_partial\article.ejs E:\my_personnel_blog_hexo\themes\yilia\source-src\css\article.scss

2：打开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: 300; line-height: 35px; margin-bottom: 20px; font-size: 32px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; &:hover{ color: #B0A0AA; } }

保存关闭

3：打开article.ejs,修改如下：

1 2 3

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

保存退出

4：异常修改

​ 修改过后，文章详情达到了目标要求，但是主页的文章标题有误，为a标签设置颜色，如图：

继续修改文件，找到E:\my_personnel_blog_hexo\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: 300; line-height: 35px; margin-bottom: 20px; font-size: 32px; transition: color .3s }

保存修改，大功告成。

---

5、引入GITMENT评论

1：注册OAuth Application

• Application name:博客名字
• Homepage URL; 网站主页地址(这里我填写的是域名/index.html大部分的默认网页都是index.html)
• Application description:描述，选填
• Authorization callback URL: 填写域名就行了

2：修改yilia的_config.yml

1 2 3 4 5 6 7 8 9

gitment_owner: github名 gitment_repo: 'github名.github.io' gitment_oauth: client_id: '5ad7ec70a25067e86139' client_secret: '21a8b9052808acddd0734e828103e88beabd97c5'

这里就配置好了，开始入坑，会发现有一系列的错误。

(1) [object ProgressEvent]

因为服务器证书过期的原因，无法登录。这里有两个解决方案：

• 用别人的服务器，打开themes\yilia\layout_partial\post\gitment.ejs将

1 2 3 4 5 6 7 8 9

• 自己搭建服务器

(2) Error: Validation Failed

原因：issue的标签label有长度限制！labels的最大长度限制是50个字符。

解决：打开themes\yilia\layout_partial\post\gitment.ejs，将id那一行替换成

1 2 3

id: '<%= page.title %>' 或者 id: '<%= page.date %>'

---

####6、删除博客底部Hexo Theme Yilia by Litten

​ 打开themes\yilia\layout_partial\footer.ejs,修改如下：

1 2

---

7、在关于我页面添加每日一言功能

​ 这里我用的是每日一言的链接

1 2 3 4

//每日一言的链接 https://api.lwl12.com/hitokoto/v1?encode=js&charset=utf-8 //返回的数据格式 function lwlhitokoto(){document.write("判断一个诉有不是看他的等在你内在，而是看他的行为。");}

在这里我调了很久，因为对前端知识不是特别了解，但是最后还是把我想要的样式调出来了，看一下效果图：

话不多说，上代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//找到themes\yilia\layout\_partial\tools.ejs，打开编辑找到如下代码块 <%if(theme.aboutme){%> <%=theme.aboutme%> <%}%> //用下面的代码替换掉 <%if(theme.aboutme){%> <%=theme.aboutme%> <%}%>

保存就ok！

1. ---

   8、文章过长，设置部分显示

   • 问题。点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数

   • 解决办法。 在你 MD 格式文章正文插入 即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml

     1 2	# 文章太长，截断按钮文字，去除more>>链接 #excerpt_link: more

     ---

   9、文章添加版权声明

   在themes/yilia/layout/_partial/article.ejs中标注的位置添加代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <% if (post.excerpt && index){ %> <%- post.excerpt %> <% if (theme.excerpt_link) { %> <%= theme.excerpt_link %> >> <% } %> <% } else { %> <%- post.content %> <% } %> <-- 在此处添加代码--> <% 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){ %> 本文作者： <% if(config.author != undefined){ %> <%= config.author%> <% }else{%> 请在博客根目录“_config.yml”中填入正确的“author” <%}%> 本文链接： <%= sUrl%> 版权声明： 本作品采用 <%= theme.licensee_name%> 进行许可。转载请注明出处！ <% if(theme.licensee_img != undefined){ %> <% } %> <%# 添加文章底部标语 %> <%= theme.licensee_slogan%> <% } else {%> <% } %>

   修改themes/yilia/_config.yml

   在需要进行版权声明的文章的md文件头部，设置属性declare: true。

   • 版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
   • 当前应用的版权协议地址。
   • 版权协议的名称
   • 版权协议的Logo
   • 标语

   1 2 3 4 5

   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 licensee_slogan: 感谢有你，伴我成长。