庄小帅的博客
前言
上一篇博客中，我们以 yilia 主题为例介绍了如何进行博客主题的配置，然而对一些对博客外观有苛刻要求的强迫症患者们，只进行一些基本的配置是远远不够的。因此我们这篇博客来说一说如何对 yilia 主题进行个性化配置，介绍如何设置头像旋转、自定义主题左侧背景、自动切换左侧背景、添加分类标签子页面添加 fork me on Github 图标、添加gitalk评论插件、更改社交软件图标等。
设置头像旋转
主题默认头像是静止的，我们说一下如何将其更改为动态旋转，当鼠标移动到头像上时候会旋转。
首先，打开 /themes/yilia/layout/_partial/left-col.ejs，找到以下代码：
<a href="<%=theme.root%>" class="profilepic">
<img src="<%=theme.avatar%>" class="js-avatar"></a>
将其替换为：
<% if(theme.Rotate == true){ %>
<div id="ds-reset" class="ds-post-self">
<div class="ds-avatar" >
<img src="<%=theme.avatar%>">
<% } else if(theme.Rotate == false){%>
<a href="<%=theme.root%>" class="profilepic"><img src="<%=theme.avatar%>" class="js-avatar"></a>
<%}%>
接着，修改 yilia 主题配置文件，打开 /themes/yilia/_config.yml，添加旋转属性：
Rotate: true
最后，修改 CSS 文件，打开 /themes/yilia/source/main.xxxx.css（这里的xxxx是不确定的意思，有些人重新build后会和原版的不一样），在末尾添加代码：
/*头像旋转*/
#ds-reset .ds-avatar img{
width:124px;height:124px; /*设置图像的长和宽*/
border:5px solid #fff;
border-radius: 62px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 62px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:62px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.8s;
-webkit-transition: -webkit-transform 0.8s ease-out;
transition: transform 0.8s ease-out;/*变化时间设置为0.8秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.8s ease-out;
}
#ds-reset .ds-avatar img:hover,#ds-reset div:hover{/*设置鼠标悬浮在头像时的CSS样式*/
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
/*实现鼠标指向某条评论的div框架的时候，整个框架背景变色源码：（可用）*/
.ds-post-self:hover {
/* background-color:rgba(0, 0, 0, 0.4); */
opacity: 1;
}
/*实现头像圆角*/
#ds-reset .ds-avatar img{
width:124px;height:124px; /*设置图像的长和宽*/
border-radius: 62px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 62px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:62px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}
自定义主题左侧背景 & 自动切换背景
左侧默认的背景是纯色的，这里提供一种可以更改背景为图片的方法。
首先，打开 yilia 主题配置文件 /themes/yilia/_config.yml，找到style属性，其下的header属性及slider属性分别代表头像上的背景颜色和右滑块的背景，将header属性设置为#00000。
接着，打开 CSS 文件/themes/yilia/source/main.xxxx.css，Crtl + F 分别搜索.left-col{、.left-col .overlay{以及#mobile-nav .overlay（这三个搜索结果分别有2、1、1共4个），分别在对应搜索结果的括号里加上属性：
/*图片存储在本地文件夹内*/
background-image:url("图片文件名");
/*图片存储在网络上*/
background-image:url("图片地址");
最后，去掉搜索到的第一个.left-col{中的 background:#fff;，如下所示：
.left-col{background-image:url("timo.jpg");width:300px;position:fixed;opacity:1;transition:all .2s ease-in;height:100%;z-index:999}
同理，如果想实现自动切换左侧背景，只需要多放一些图片，同时再加上按顺序或者随机切换的控制代码即可。可以参考 Yilia 主题自动切换左侧背景。
添加分类标签子页面
为了实现点击页面左侧菜单栏可以出现相应的分类标签页面，需要新建 tags 页面，效果预览图如下：
首先，在博客站点的配置文件_config.yml 中，要有对应 tags 页面的属性：
tag_dir: tags
其次，在 yilia 主题配置文件 _config.yml 中，设置各个菜单对应的子目录：
menu:
主页: /
技术: tags/tech
随笔: tags/something
接着，新建 tags 页面，在博客根目录 Git Bash Here，hexo new page tags，此时会在 source/tags/ 文件夹下生成 index.md 文件。修改该文件：
---
title: tags
date: 2019-11-07 13:40:35 <!-- 自动生成 -->
type: "tags" <!-- 必须 -->
comments: false <!-- 必须 -->
---
最后，在写博客时，在对应博客文章的 md 文件中添加：
tags:
- tech
- yilia
- hexo
这样，点击菜单栏的“技术”就会跳转到标签为 tech 的所有文章列表页面。同理，category 目录页面也是相应的设置，只是相应关键词由 tags 改为 categories。
添加 “fork me on Github” 图标
可以在博客页面的左上角或右上角添加 “fork me on Github” 的丝带，打开/themes/yilia/layout/layout.ejs，找到<div id="container" q-class="show:isCtnShow">，在其下面添加代码：
<a class="fork" href="https://github.com/yourUsername"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
<style>
.fork{
position:fixed;
z-index:999;
top:0;
right:.5em
}
</style>
<!-- 就是在原代码的基础上，a标签加上style，并且href的"https://github.com/yourUsername"改成你的项目地址就行 -->
如果想要修改丝所在位置和丝带的颜色，点击 GitHub Ribbons 在网页上找到对应的代码，替换上面相应的代码就行了。
添加评论插件
静态博客需要使用第三方评论系统，这里推荐 GitHub上 的 gitalk 来实现评论功能。
首先，需要在 Github 上 注册 OAuth application ：
注册之后得到“Client ID”和“Client Secret”，记录下来后面会用到。
接着，在 Github 新建一个 repository 用于存储博客的评论。
准备工作完成后，打开/themes/yilia/layout/_partial/article.ejs，在文件最末尾的<% } %>前添加代码：
<% if(theme.gitalk.enable){ %>
<%- partial('post/gitalk', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
然后，在/themes/yilia/layout/_partial/post下新建gitalk.ejs：
<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<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.owner%>',
admin: ['<%=theme.gitalk.admin%>'],
id: '<%= page.date %>',
distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>
修改themes/yilia/source-src/css/comments.scss，文件第一行定义了一些其他评论插件（多说、gitment等等），我们加上 gitalk 的定义，修改第一行为：
#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container{
最后，配置 yilia 主题的配置文件 _config.yml：
如果这些都设置完后，gitalk评论模块还是显示Error: Not Found.，则需要设置下博客评论的 repository 的Settings 中的 Feature 属性。
更改主题左侧社交软件图标
主题自带的左侧社交图标中的 Github 图标灰灰的，让我看着很不爽，因此我将其替换成了红色的 Github 图标。
首先，打开 阿里巴巴图标库，输入关键词 “Github” 搜索得到需要的图标用以替代 yilia 主题自带的灰色 Github 图标，找到需要的图标后下载对应的图标 svg 文件。
接着，打开/themes/yilia/source/fonts/文件夹，找到其中的 iconfont 前缀的4个文件，主角是iconfont.xxxxx.svg文件。
然后，打开 百度字体编辑器，导入刚刚的主角文件，可以看到 yilia 主题定义好的一些图标。导入之前下载的新图标的svg文件，选中该社交图标，点击菜单栏的“字形信息”，设置新图标的“unicode”和“命名”，这里我设置 unicode 为 $E721，命名为 myGithub。
点击上方菜单栏的“ZIP”来导出压缩包，将压缩包解压缩得到4个文件，重命名这4个文件让它们文件名和之前提到的 iconfont 前缀的4个文件相同，然后粘贴替换原本的4个文件。
最后，打开 CSS 文件/themes/yilia/source/main.xxxx.css，在文件末尾添加代码：
.icon-github:before{content:"\E721"}
/* 之前的图标unicode，开头的$改成\,如 $E721 --> \E721 */
#header .header-nav .social a.github{background:red;border:3px solid red}
#header .header-nav .social a.github:hover{border:3px solid red}
有关 yilia 主题的一些简单个性化就介绍到这里了，如果还需要一些其他彰显个性的方式，如刷新自动生成个性签名、修改主题配色等，可以参考 本该如此的博客。下一篇博客我们继续学习如果将我们的博客站推送到百度搜索、Google 搜索，使得可以通过搜索引擎检索到我们的博客文章。
