优化yilia主题的过程

2020-05-05

字数统计: 3.5k字 | 阅读时长: 17分

× 文章目录

1. Part1 网页author、标题title
1. 1.1. Site
2. 1.2. Tips
2. Part2 配置查看所有文件
3. Part3 设置网页的头像、链接处微信等二维码图片
1. 3.1. 微信二维码图片
2. 3.2. 头像图片
3. 3.3. 网页图标
4. Part4 文章只显示摘要
5. Part5 增加归档菜单
6. Part6 添加统计(不蒜子&字数统计)
1. 6.1. 总体统计
2. 6.2. 文章统计
3. 6.3. 字数、阅读时长统计
4. 6.4. Tips
7. Part7 制作滑动白色目录
1. 7.1. 修改css文件：
2. 7.2. 修改ejs文件：
8. Part8 制作多级目录
1. 8.1. Tips
9. Part9 点击爱心效果
10. Part10 刷新自动生成个性签名
11. Part11 文章加密
1. 11.1. 引入加密插件encrypt
2. 11.2. 修改配置
3. 11.3. 加密文章的配置
4. 11.4. message: 输入密码提示语句（例如：请输入密码）
12. Part11 添加RSS
13. rss
14. Part12 上传README.md文件
15. Part12 添加网易云音乐
16. Part13 添加评论
17. Part14 生成fork me on github链接：
18. Part15 设置左边框背景
19. Part16 智能菜单-背景渐变
20. Part17 更改左侧昵称字体
21. Part18 在HEXO主题中添加数学公式支持
22. Part19 加粗指定文字

欢迎阅览我优化yilia的过程，附加功能太多了，一步步填坑！

Part1 网页author、标题title

Site

title: DurriyaDo
subtitle: Welcome to DD's GitWeb!
description: Personal technology blog
keywords: AI; Develpment Language; python; java; Lerning Notes... 
author: DurriyaDo
language: zh-CN
timezone: 
word_count: true

Tips

1,冒号和后面一定要有空格，Site中有些选项不能随便改：
1) title可改 Hexo -> DurriyaDo
2) subtitle可改，但是不能加’ ‘或者” “,否则报错：YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 8, column 12: description:
开始一直以为是description处没空格的原因，后来把原来的_config.yml文件重新运行，一项项对比发现是引号的错。
3) timezone: 建议不写或者Asia/Shanghai，我改成Asia/Wuhan 报错：TypeError: Cannot read property ‘utcOffset’ of null

Part2 配置查看所有文件

在cmd上执行如下命令，cd到blog所在的地址

1	$ npm i hexo-generator-json-content --save

//在全局配置文件_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

Part3 设置网页的头像、链接处微信等二维码图片

添加图片资源文件夹。路径为 themes/yilia/source/下，添加一个 assets/img 文件夹，里面存放图片
配置文件中直接引用即可。路径为 themes/yilia/_config.yml，找到如下：

微信二维码图片

weixin: /assets/img/wechat.png

头像图片

avatar: /assets/img/head.jpg

网页图标

favicon: /assets/img/head.jpg

Part4 文章只显示摘要

在MD 格式文章正文插入即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，并在themes/yilia/_config.yml，进行以下注释：

1	# excerpt_link: more

Part5 增加归档菜单

修改 themes/yilia/_config.yml

menu:
主页: /
归档: /archives/index.html

Part6 添加统计(不蒜子&字数统计)

总体统计

1) 找到themes\yilia\layout_partial\after-footer.ejs,添加：

1	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2) 找到themes\yilia\layout_partial\footer.ejs，在 ‘ div class=”footer-right” ‘ 标签内添加：

<!-- # PV方式，单个用户连续点击 n 篇，记录 n 次记录值 -->
<span id="busuanzi_container_site_pv"> 总访问量: <span id="busuanzi_value_site_pv"></span> /</span>
<!-- # UV方式，单个用户连续点击 n 篇，记录 1 次记录值 -->
<span id="busuanzi_container_site_uv">  访客数:<span id="busuanzi_value_site_uv"></span></span>

文章统计

找到themes\yilia\layout_partial\post\nav.ejs，大概在27行左右，加上：

1
2
3

<span id="busuanzi_container_page_pv">
        本文阅读量: <span id="busuanzi_value_page_pv"></span>次
 </span>

字数、阅读时长统计

打开博客根目录、安装插件

1	npm i -save hexo-wordcount

博客根目录_config.yml添加配置:

1	word_count: true

找到themes\yilia\layout_partial\article.ejs,在第七行左右，添加：

1
2
3

<% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>

最后在themes\yilia\layout_partial\post目录下新建word.ejs,内容如下：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text" style="font-size: 16px;color: grey">  字数统计: </span>
        <!--这里样式可以自己定制-->
        <span class="post-count" style="font-size: 16px;color: grey"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text" style="font-size: 16px;color: grey">  阅读时长: </span>
        <span class="post-count" style="font-size: 16px;color: grey"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

Tips

上述操作之后，我的网页在中文部分出现了乱码，找了很多原因，最后发现notepad++中应该设置成UTF-8编码的方式！所以我们应该先确保（设置）文件是UTF-8的形式，然后再进行上述三小步的操作，看此时文件中中文字不是乱码（就是中文），然后再执行hexo g等操作！

Part7 制作滑动白色目录

修改css文件：

themes\yilia\source\路径下找到main.xxxxx.css，在最后添加代码：

#container .show-toc-btn,#container .toc-article{display:block}
.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(https://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
.toc-article li ol, .toc-article li ul {
    margin-left: 30px;
}
.toc-article ol, .toc-article ul {
    margin: 10px 0;
}

修改ejs文件：

找到themes\yilia\layout_partial\article.ejs,

在 </header> <% } %>下面加入:

<!-- 目录内容 -->
<% if (!index && post.toc){ %>
    <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
          <span class="btn-bg"></span>
          <span class="btn-text">文章导航</span>
          </p>
	<div id="toc-article" class="toc-article">
	    <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
		<strong class="toc-title">文章目录</strong>
           <%- toc(post.content) %>
         </div>
   <script type="text/javascript">
	function showToc(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:block");
		show_toc_btn.setAttribute("style","display:none");
		};
	function showBtn(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:none");
		show_toc_btn.setAttribute("style","display:block");
		};
   </script>
      <% } %>
<!-- 目录内容结束 -->

对应每篇文章的md文件，开头加上toc: true属性就行。

Part8 制作多级目录

开始一直不知道哪里出了问题，后来通过对比发现markdown文件的语法是：

“#” 表示一级目录
“##” 表示二级目录
“###” 表示三级目录
且上述示范#、##或者###后面必须有空格，再接标题题目！

Tips

我将themes/yilia/_config.yml文件中的toc: 1 改成了 toc: 0(不显示目录)，这样的话，在part7的基础上，我们就可以只看到白色蓝字的目录了，不会和之前的目录重复，画面更简洁！

Part9 点击爱心效果

1) 新建js文件：
yilia\source\asset路径下新建clicklove.js,内容如下：

! function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }
    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }
    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }
    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

2) 修改ejs文件：
找到themes\yilia\layout_partial\after-footer.ejs,添加：

1 2	<script type="text/javascript" src="/assets/clicklove.js"></script> //注意：这里的路径要对应之前创建clicklove.ejs的地方

Part10 刷新自动生成个性签名

1) 找到themes\yilia\layout_partial\left-col.ejs文件
(大概12行，theme.subtitle属性内):把

1	<p class="header-subtitle"><%=theme.subtitle%></p>

修改为

1 2	<p id="hitokoto">:D 获取中...</p> <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

Part11 文章加密

引入加密插件encrypt

1) 找到博客根目录下的package.json,最下面添加：

1	"hexo-blog-encrypt": "2.0.*"

2) cmd进入博客根目录，执行：

1	npm install

修改配置

找到根目录下的_config.yml文件，添加：

# Security
#
encrypt:
    enable: true

加密文章的配置

在需要加密的文章.md文件开头写入：

title: 加密文章
date: 2019-05-30 22:02:07
password: 这里填密码
abstract: 这里是博客简述（能被访客看见）

message: 输入密码提示语句（例如：请输入密码）

Part11 添加RSS

1、安装插件：
npm install —save hexo-generator-feed

2、在根目录的_config.yml添加:

rss

plugins: hexo-generater-feed

3、修改主题目录下的_config.yml
在subnav:里面添加：

rss: ‘/atom.xml’

Part12 上传README.md文件

1、在博客根目录的source文件夹内，新建README.md文件
2、在博客根目录的_config.yml里修改配置：

//hexo部署页面的时候会默认把source目录下的.md文件渲染成html,所以需要跳过README.md的渲染。

Part12 添加网易云音乐

1、打开网易云音乐首页，然后搜索你要添加的背景音乐
http://music.163.com/

2、搜索到歌曲点击生成外链播放器，进去下一个界面
3、复制外链播放器的代码
打开yilia主题下的_partial文件夹下的left-col.ejs文件
复制文件内容到最下端

把代码放在div框

1
2
3

<div style="position:absolute; bottom:120px left:auto; width:85%">
	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=422428548&auto=1&height=66"></iframe>
	</div>

Part13 添加评论

1、创建gitalk.ejs
在你的hexo目录/theme/yilia/layout/_partial/post/目录下创建gitalk.ejs并写入如下内容：

<div id="gitalk-container"></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 src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
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: md5(window.location.pathname),
  distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>
})

gitalk.render('gitalk-container')
</script>

2、修改article.ejs
在你的hexo目录/theme/yilia/layout/_partial/article.ejs文件中最后一行“<% } %>”之前添加如下内容：

<% if(theme.gitalk.enable && theme.gitalk.distractionFreeMode){ %>
      <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

3、添加配置文件
在yilia的配置文件_config.yml中gitment配置下面添加如下配置文件

#6. Gitalk
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'your clientID'    #Github上生成的
  clientSecret: 'your clientSecret'   #同上
  repo: git_comment    #评论所在的github project
  owner: findtheonlyway    #github用户名
  admin: erbiduo    #可以初始化评论issue的github账户名称
  distractionFreeMode: true

Part14 生成fork me on github链接：

打开yilia\layout\layout.ejs文件，在下面图片的位置添加相应的代码，如果要修改颜色，可以到这里去拷贝对应颜色的图片。

<a class="fork" href="https://github.com/you"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
<style>
	.fork{display:none;}
	.fork{
		position:fixed;
		z-index:999;
		top:0;
		right:.5em
	}
	@media(min-width:768px){.fork{display:inline;}}
</style>