References:
MOxFIVE 自定义的 Yelee 这个主题真的很好用，迁移之后我的几个体会是:
a). 动态效果很酷炫，整个界面给人的感觉就很满意
b). 添加多说评论栏是如此的简单
c). 自带的站点、页面访问量统计，很不错
d). 整个源码的框架似乎更合理了，你可以自己浏览一下源码，感同身受吧？
下面是本人将自己的博客主题迁移到 Yelee 的过程以及其中做的一些自定义适配。
How to install? easy!
Follow MOxFIVE 的 Yelee Github 主页 即可。1
2
3
4
5# Installation
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
# Change theme field in Hexo root's _config.yml file.
theme: yelee
自定义头像
站点左上角的头像取自 yelee/source/img/avatar.png，其配置项在主题对应的 _config.yml 配置文件中的 Basic Setup 部分。两种方式，将原先的 avatar.png 做个备份，然后将自定义的头像存放到 yelee/source/img/ 下，并命名为 avatar.png；修改配置文件中的 avatar: 项，自定义图片路径和名称，个人建议图片最好还是存放到 yelee/source/img/ 下。1
2# Link to your avatar | 填写头像地址 <theme-name>/source/img
avatar: /img/avatar.png
自定义站点小图标
网址前面的图标，跟自定义头像相似。1
2# Small icon of Your site | 站点小图标地址 <theme-name>/source/img
favicon: /img/favicon.ico
自定义菜单栏
自定义menu
自定义站点侧边栏中间的菜单项
2
3
4
5
6
7
8
9
10
11
# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
# Header
menu:
Home: /
All-lists: /archives
Contact: /Shengjie
About: /about
自定义subnav
自定义菜单项下方的图标导航栏，这里是想添加 开源中国 的一个图标快捷方式，相关代码在 …/source/css/_partial/customise/social-icon.styl 中。
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
"知乎" #0078d8 90,
"豆瓣" #06c611 88,
# add "OSChina"
"OSChina" white 88,
V2EX #e4cdb4 78,
TiddlyWiki #6283dd 82,
"简书" #e99888 82,
SegmentFault #018f56 80,
"网易云音乐" #e51e02 80,
"虾米音乐" #ff6a00 82,
CSDN red 82,
"博客园" #217ed4 95,
Plunker black 90,
LOFTER #316061 75,
Coding white 88,
bilibili #f589a0 100,
AcFun #fbc054 90,
niconico white 70,
Quora #b92b27 103
for i in img-logo
.{i[0]}
background url(root-url + '/img/' + i[0] + '.png') center no-repeat i[1]
background-size i[2] + "%"
.GitHub
background url(//cdn.bootcss.com/logos/0.2.0/github-octocat.svg) no-repeat white
background-size 90%
background-position 50% 100%
添加 “OSChina” white 88, 一项，从下面的语句我们也可以看出，”OSChina”、white、88 分别对应于 i[0]、i[1]、i[2]，也就是图片名称、背景色、图片大小。所以需要将 OSChina 对应项的图片，即开源中国的Logo存放到 yelee/source/img/ 下，并命名为 OSChina.png。
可以看出，Github 是独立开来的。此外，通过 . 操作符我们可以看出，这些都是 css 中定义的 类选择器。
完成这些之后，你就可以在主题配置文件中启动该图标导航栏。1
2
3
4
5
6
7
8
9
10
11# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
#
subnav:
新浪微博: "http://weibo.com/u/2911566017?refer_flag=1001030201_"
GitHub: "https://github.com/Durant35"
OSChina: "https://my.oschina.net/love7zx/"
添加多说评论栏
Yelee 添加多说评论栏是我遇到的自适配最简单的一个主题。此处默认你已经有多说账号了，没有的话，请到多说官网注册。添加多说评论栏只需要修改主题配置文件 Conments 评论系统 中的 duoshuo: 选项即可，<your-duoshuo-shortname> 既是多说后台管理的 id 名。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# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统，其他保持禁用。
preload_comment: true
## false: 当点击评论条等区域时再加载评论模块
## false: load comment's section until u click/hover on the bar/icon
show_count: true
## 是否在主页文章标题旁显示评论数（多说、Disqus）
## Add comment count after article title
disqus:
#on: true
shortname:
# https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
# It is unnecessary to enable disqus here if
# you have set "disqus_shortname" in your site's "_config.yml"
duoshuo:
on: true
domain: <your-duoshuo-shortname>
# 是否开启多说评论，http://duoshuo.com/create-site/
# 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分
# http://<要填的部分>.duoshuo.com (domain只填上<>里的内容，不要填整个网址)
从繁体中文到简体中文
默认应该是繁体中文，你可以在站点配置文件(不是主题配置文件！！)中设置，站点配置位于 hexo 根目录下。对应的 language: 选项位于 …/yelee/languages/ 下，都是一些 .yml 文件。1
2
3
# Specifical language for theme Yelee
language: zh-Hans
自带统计特性
站点访问量统计
页面访问量统计
自定义阅读全文按钮显示内容
…/yelee/languages/<your-language>.yml，…/yelee/languages/ 下是一些语言包对应的 .yml 文件1
2
3
4
5
6
7
8
index:
menu: 菜单
tags: 标签
friends: 友情链接
about: 关于我
more: more
copy: 复制
自定义分享栏
默认主题中每篇文章下方都自带分享栏，包括常见的分享到微博、QQ等，相关代码位于 …/layout/_partial/post/share.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="share">
<% if (theme.share.baidu) { %>
<div class="bdsharebuttonbox">
<!--
<a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"></a>
-->
<a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
<a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
<a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
<!--
<a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
-->
<a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i></a>
</div>
...
</div>
自定义版权信息
References
默认主题每篇文章末尾都会有版权信息，相关代码在 …/yelee/layout/_partial/post/nav.ejs。
a. 去除最末尾的许可协议说明
b. 将文章作者信息与 .md 博文源文件关联1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<div class="copyright">
<p><span><%= __('copyright_info.title') %>:</span><a href="<%- url_for(post.path) %>"><%= post.title %></a></p>
<!-- modify author information
<p><span><%= __('copyright_info.author') %>:...
-->
<p><span><%= __('copyright_info.author') %>:</span><%=post.author%></p>
<p><span><%= __('copyright_info.date') %>:</span><%= post.date.format("YYYY-MM-DD, HH:mm:ss") %></p>
<p><span><%= __('copyright_info.updated') %>:</span><%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %></p>
<p>
<span>...
<script> var clipboard = new Clipboard('.copy-path'); </script>
</p>
<!-- not to show license information
<p>
<span>...
</p>
-->
</div>
post.author 指代每篇 .md 文章开头的参数声明。1
2
3
4
5
6
7
8title: hexo博客主题Yelee迁移笔记
date: 2016-09-16 14:54:28
categories:
- 技术留档
- Hexo
tags: Hexo
author: <author-name>
---
分类&标签
References
效果: http://durant35.github.io/tags
1. 使用 Hexo 命令新建一个名为 tags 的页面1
hexo new page tags
2. 修改该页面 1
2
3title: 分类&标签
date: 2016-09-17 15:43:55
---
3. 分类&标签页面相关的代码有 …/yelee/layout/_partial/page.ejs，通过 partial() 函数引入 …/yelee/layout/_partial/tag-cloud-page.ejs1
2
3
4
5
6...
<!-- 匹配页面 -->
<% if (page.path === "tags/index.html"){ %>
<!-- Tag Cloud Page -->
<%- partial('tag-cloud-page') %>
<% } %>
tag-cloud-page.ejs 代码如下，主要改变是根据需求调整分类的层数。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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65<hr>
<br>
<!-- 显示分类 -->
<%- list_categories({depth: 0}) %>
<p class="count"></p>
<!-- 显示标签 -->
<div class="tags">
<%- tagcloud({
min_font: 16,
max_font: 35,
amount: 999,
color: true,
start_color: 'gray',
end_color: 'black',
}) %>
</div>
<style>
.category-list li{
display: inline-block;
margin: 0 1em .5em 0;
padding: 4px;
border: 1px solid lightgray;
font-size: 1.2rem;
}
.category-list a { color: gray; }
.category-list-item:hover a {
color: gray;
text-decoration: none;
}
.category-list-count {
margin-left: 2px;
font-size: .9rem;
}
.article-entry ul li:before{ display: none; }
.article-inner { text-align: center; }
.tags {
max-width: 42em;
margin: 2em auto;
margin-top: 0em;
}
.tags a {
margin-right: 1em;
line-height: 65px;
border-bottom: 1px solid gray;
white-space: nowrap;
transition: border-bottom .5s;
}
.tags a:hover {
border-bottom: 3px dotted gray;
text-decoration: none;
}
#count > span {
margin: auto .2em;
font-weight: bold;
}
</style>
<!-- Count tags and categories -->
<p id="count">
...
</p>
<script>
$('#count').appendTo('.count');
</script>
list_categories() 和 tagcloud() 均为 hexo 的 API，可以参考这里 API|hexo