Hexo-Yilia进阶笔记

这是我在Yilia这个主题下的参考很多前人的经验并且在个人博客上验证的功能的记录。其中实现了:

  • 多层分类页面的构建
  • 点击所有文章提示缺失模块问题解决
  • 头像/图标设置
  • gitalk评论系统添加
  • 侧边栏添加音乐
  • 页面/文章访问量添加
  • 网站运行时间添加
  • 文章字数/阅读时长添加
  • 文章版权信息添加
  • SEO优化(添加sitemap、url持久化)
  • 鼠标点击小红心设置
  • 代码块行号错乱问题解决
  • 相册功能添加
  • RSS功能添加
  • 谷歌统计添加

一、GitHub下载Yilia主题

1
2
$ cd /d/document/GitHub/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

也可以直接去GitHub上下载zip文件,然后解压放在theme文件夹下面。

二、分类的构建

1、添加categories链接

打开yilia/_config.yml文件,menu处做出以下修改:

1
2
3
4
menu:
主页: /
分类: /categories
归档: /archives

2、分类页面的构建

  • 新建categories页面
1
hexo new page categories

该命令在source目录下生成一个categories目录,categories目录下有一个index.md文件。

  • 修改categories/index.md为:
1
2
3
4
5
6
---
title: 文章分类
date: 2018-06-11 10:13:21
type: "categories"
comments: false
---
  • 生成html
1
2
hexo g
hexo s

访问 http://localhost:4000/categories/ ,即可看到categories页面,只不过现在的页面只有标题。

3、修改 yilia 主题

修改yilia\source\main.0cf68a.css,将下面的内容添加进去:

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
category-all-page {
margin: 30px 40px 30px 40px;
position: relative;
min-height: 70vh;
}
.category-all-page h2 {
margin: 20px 0;
}
.category-all-page .category-all-title {
text-align: center;
}
.category-all-page .category-all {
margin-top: 20px;
}
.category-all-page .category-list {
margin: 0;
padding: 0;
list-style: none;
}
.category-all-page .category-list-item-list-item {
margin: 10px 15px;
}
.category-all-page .category-list-item-list-count {
color: $grey;
}
.category-all-page .category-list-item-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-item-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-item {
margin: 10px 10px;
}
.category-all-page .category-list-count {
color: $grey;
}
.category-all-page .category-list-count:before {
display: inline;
content: " (";
}
.category-all-page .category-list-count:after {
display: inline;
content: ") ";
}
.category-all-page .category-list-child {
padding-left: 10px;
}

4、多层分类

新建yilia/layout/categories.ejs,输入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<article class="article article-type-post show">
<header class="article-header" style="border-bottom: 1px solid #ccc">
<h1 class="article-title" itemprop="name">
<%= page.title %>
</h1>
</header>

<% if (site.categories.length){ %>
<div class="category-all-page">
<h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
<%- list_categories(site.categories, {
show_count: true,
class: 'category-list-item',
style: 'list',
depth: 2,
separator: ''
}) %>
</div>
<% } %>
</article>

5、修改自己的文章

1
2
3
4
5
6
7
8
9
10
11
---

title: HTML入门笔记

copyright: true
date: 2018-11-23 21:07:15

toc: true
tags: [HTML,前端]
categories: [前端,HTML]
---

三、yilia下的_config.yml完善

subnav中添加github、知乎、mail等链接。

smart_menu处去掉friends:

1
2
3
4
smart_menu:
innerArchive: '所有文章'
friends: false
aboutme: '关于我'

aboutme处添加自己的介绍:

1
aboutme: 东南大学在读研究生

四、点击所有文章提示缺失模块

1、问题

点击所有文章提示缺失模块

2、解决办法

  • 确保node版本大于6.2
  • 在博客根目录(注意不是yilia根目录)执行以下命令:npm install hexo-generator-json-content --save
  • 在hexo的blog根目录_config.yml里添加配置(保持格式,不要改动任何空格缩进),关掉hexo s之后执行hexo g重新生成:
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

五、头像/图标设置

1、存放位置

头像、图标图片的存放位置是/themes/yilia/source/下任意位置,可以自己新建一个文件夹存放,我存放在assets文件夹下。

2、配置设置

配置文件为/themes/yilia/_config.yml

  • 设置头像为配置文件中avatar一项
  • 设置图标为配置文件中favicon一项

由于设置路径的根目录/themes/yilia/source/,因此,我的头像存放的地址是/themes/yilia/source/assets/me.png,设置则为avatar: /assets/me.png

图标同理。

六、添加评论

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。

主页:https://github.com/gitalk/gitalk/blob/master/readme-cn.md

gitalk 需要添加的部分主页有详细介绍,这里只谈针对yilia需要的改动。

1、创建gitalk.ejs

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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文件中最后一行“<% } %>”之前添加如下内容:

1
2
3
4
5
6
7
<% 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配置下面添加如下配置文件

1
2
3
4
5
6
7
8
9
#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

七、侧边栏添加音乐

1、网易云音乐外链播放器生成

登录网页版网易云音乐,打开一首歌,点击 “生成外链播放器”。

2、侧栏添加背景音乐

打开/hexo/themes/yilia/layout/_partial/left-col.ejs文件,把音乐HTML代码粘贴进去,可以添加样式,改变大小,这是我的代码:

1
2
3
4
5
6
7
8
9
10
11
12
<nav class="header-nav">
<div class="social">
<% for (var i in theme.subnav){ %>
<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
<%}%>
</div>

<!--音乐播放插件-->
<div style="margin-top:30px;">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=240 height=52 src="//music.163.com/outchain/player?type=2&id=33035954&auto=1&height=32"></iframe>
</div>
</nav>

八、添加页面访问量

1、添加站点访问量

下面是个人改变完成后的\themes\yilia\layout\_partial\footer.ejs文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
</div>
<div class="footer-right">


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">
本站总访问量:<span id="busuanzi_value_site_pv"></span>
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>


</div>
</div>
</div>
</footer>

其中空格间那部分是额外添加的,这部分处于页脚的右边(原来是主题的说明,这里已删去)。

2、添加文章访问量

下面是个人改变完成后的\themes\yilia\layout\_partial\article.ejs文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
<% if (!post.noDate){ %>
<%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
<% } %>


<% if ( !index ){ %>
<span class="archive-article-date">
阅读量 <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>


</header>

正如参考文章所说,空格间那部分是额外添加的,保证了每篇文章都有阅读量统计,同时这里加一个if判断,如果是首页不显示该文章的访问量。

九、Hexo-Yilia网站运行时间

hexo/themes/yelee/layout/_partial/footer.ejs文件中<div class="footer-left">内(具体位置可自选)加入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("11/23/2018 20:00:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>

注意:日期格式11/23/2018 20:00:00

十、字数、阅读时长添加

1、安装hexo-wordcount

在博客目录下打开Git Bash,输入命令

1
npm i –save hexo-wordcount

2、文件配置

theme\yilia\layout\_partial\post下创建word.ejs文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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"> 字数统计: </span>
<span class="post-count"><%= 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"> 阅读时长: </span>
<span class="post-count"><%= min2read(post.content) %></span>
</span>
</span>
</div>

然后在 themes/yilia/layout/_partial/article.ejs中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="article-inner">
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
<% if (!post.noDate){ %>
<%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
<!-- 需要添加的位置 -->
<!-- 开始添加字数统计-->
<% if(theme.word_count && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
<!-- 添加完成 -->

<% } %>
</header>

3、开启功能

在站点的(不是主题的)_config.yml中添加下面代码

1
2
3
# 是否开启字数统计
#不需要使用,直接设置值为false,或注释掉
word_count: True

十一、添加版权信息

1、添加代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link) { %>
<a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
<-- 在此处添加代码-->
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
<div class="page-reward">
<a href="javascript:;" class="page-reward-btn tooltip-top">
<div class="tooltip tooltip-east">

添加的代码如下:

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
<%
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 class="declare">
<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>
<% } %>
</div>
<% } else {%>
<div class="declare" hidden="hidden"></div>
<% } %>

2、版权添加样式

yilia/source/main.0cf68a.css添加如下代码:

1
2
3
4
5
.declare {
background-color: #eaeaea;
margin-top: 2em;
border-left: 3px solid #ff1700;
padding: .5em 1em; }

3、添加配置文件

修改themes/yilia/_config.yml

1
2
3
4
5
## 版权声明
declare_type: 1
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

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

版权基础设定:

  • 0-关闭声明;
  • 1-文章对应的md文件里有declare: true属性,才有版权声明;
  • 2-所有文章均有版权声明

4、修改博客的url

修改主目录下的_config.yml中的url,改成自己的地址。

1
2
3
4
url: https://dta0502.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

十二、添加sitemap

1
npm install hexo-generator-sitemap --save
1
2
hexo clean
hexo g

查看public文件夹,可以看到sitemap.xml文件。

sitemap的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到Google和百度等搜索引擎提交sitemap.xml

Google提交sitemap.xml的详细过程见:让Google搜索到搭建在Github Pages上的博客

十三、Url持久化

我们可以发现hexo默认生成的文章地址路径是 【网站名称/年/月/日/文章名称】

这种链接对搜索爬虫是很不友好的,它的url结构超过了三层,太深了。

下面我推荐安装hexo-abbrlink插件:

1
npm install hexo-abbrlink --save

然后配置_config.yml

1
2
3
4
5
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

十四、nofollow标签的使用

减少出站链接能够有效防止权重分散,hexo有很方便的自动为出站链接添加nofollow的插件。

首先安装hexo-autonofollow插件:

1
npm install hexo-autonofollow --save

再在外层_config.yml中添加配置,将nofollow设置为true:

1
2
3
4
5
# 外部链接优化
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 'yousite'

这样,例外的链接将不会被加上nofollow属性。

十五、鼠标点击小红心的设置

  • hexo/themes/yilia/source文件目录下添加love.js文件。
1
!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(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 c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".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;}"),n(),r()}(window,document);
  • hexo/themes/yilia/layout/_partial/footer.ejs文件的最后, 添加以下代码:
1
2
<!--页面点击小红心-->
<script type="text/javascript" src="/love.js"></script>

十六、Hexo-Yilia代码块行号显示错乱问题

这是因为yilia/source/main.0cf68a.css文件中的pre标签的样式造成的,将white-space: pre-wrap;注释掉即可,这个问题是自动换行造成的,使用不自动换行的white-space: pre;即可,这样样式代码块部分会自动出现底部滚动条,行号错乱问题就没有了。

然后改一下滚动块样式:

1
::-webkit-scrollbar-track:hover{background-color:rgba(255, 255, 255, 0.75)}

下面是修改后的代码块:

十七、添加相册

1、创建可以点击链接

如果想单独创建一个可以单击的链接,方法是相同的,首先进入您的博客目录执行

1
hexo new page photos

立即在source下生成photos/index.md文件,这里index.md需要删除。

然后在主题站点的配置文件theme/yilia/_config.yml中添加点击的文案和跳转到位置:

1
2
3
4
5
6
7
8
9
menu:

主页: /

分类: /categories

归档: /archives

相册: /photos/index.html

2、拷贝他人的 photos 内容

可以参考别人做好的博客,下载source/photos下的所有文件,拷贝到你对应的位置。

一般只需要修改ins.js文件的render()函数。这个函数式用来渲染数据的,里面配置了展示图片的链接地址,图片具体操作见下面。这里主要就修改minSrc、Src两个变量,改成自己的照片缩略图、照片的链接。

1
2
3
4
5
6
7
8
9
10
11
var render = function render(res) {
var ulTmpl = "";
for (var j = 0, len2 = res.list.length; j < len2; j++) {
var data = res.list[j].arr;
var liTmpl = "";
for (var i = 0, len = data.link.length; i < len; i++) {
var minSrc = 'https://raw.githubusercontent.com/dta0502/BlogPhotos/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/dta0502/BlogPhotos/master/photos/' + data.link[i];
var type = data.type[i];
var target = src + (type === 'video' ? '.mp4' : '.jpg');
src += '';

3、图片放置

1)图片命名格式

最前面是日期,然后用_进行分隔,后面是图片的描述信息,注意不要包含_.符号。

举例来说:

1
2018-10-05_西湖文化广场.jpg

2)图片放置目录

然后在Hexo根目录下创建photosmin_photos文件夹,然后把图片原图放置到photos文件夹下,后面会用Python脚本对这个原图进行压缩处理,自动生成一个缩略图在min_photos文件夹下。

4、处理图片并引入图片

1)Python脚本处理图片

接下来就是最后一步,也是最重要的一步了,使用Python写的脚本,生成一套大图和一套小图,随即生成json文件,这个文件保存在source/photos/data.json中。

脚本下载地址:BlogPhotos

这里需要下载两个.py脚本(ImageProcess.pytool.py),其中ImageProcess.pytool.py这个脚本用到的。

然后执行tool.py脚本即可生成一套大图和一套小图,并且在source/photos/下生成这个json文件。

2)上传图片到Github

然后我把photosmin_photos文件夹全部上传到Github上,然后得到了原图和缩略图的链接,这个链接就是ins.js文件的render()函数中需要修改的链接。

每次更新图片,都需要重新执行以下Python脚本,并且将图片上传到GitHub上。

5、测试是否成功

1
hexo clean && hexo g && hexo s

十八、Hexo增加RSS功能

安装RSS插件

注意一定要安装到blog的根目录

1
npm install --save hexo-generator-feed

更改配置文件

在你的项目的_config.yml配置文件下找到Extensions添加如下内容:

1
2
3
4
5
# Extensions  #插件和主题
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#RSS订阅
plugins: hexo-generater-feed

在主题配置文件里,在rss位置,添加/atom.xml

1
2
3
4
subnav:
#github: "#"
#weibo: "#"
rss: "/atom.xml"

十九、Hexo增加谷歌统计

  1. 注册一个google analytics账号

  2. 在主题配置文件里,在google_analytics: ''处添加统计ID,例如UA-3534xxxx

  3. 使用google tag assistant来验证设置,google tag assistant是一款chrome扩展插件

赞赏一杯咖啡
0%