yilia主题
初步搭建完成Hexo博客，为了让个人博客更具有特色，在Hexo官网和Github平台提供许多特色主题，本文选择Github比较流行的yilia主题。
- yilia: 一个简洁优雅的hexo主题
- GitHub网址 ：https://github.com/litten/hexo-theme-yilia
更换主题
yilia主题参考
- yilia主题仓库及使用说明地址：https://github.com/litten/hexo-theme-yilia
- yilia主题备份仓库地址：https://github.com/litten/BlogBackup
安装yilia主题
- 更改主题前需要下载（克隆）yilia主题，在博客目录下（blog文件夹下）使用git bash here命令，克隆litten作者的GitHub仓库中的yilia主题，并保存在blog/themes/
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
- 更改主题
修改blog目录下
_config.yml文件下theme，将默认的landscape更改为yilia。
- 重新生成（本地）：在blog文件下，使用git bash here 输入以下命令：
hexo clean
hexo g
hexo s
- 推送GitHub（远端）：在blog文件下，使用git bash here 输入以下命令：
hexo d
关于yilia主题所有文章无法查看问题
- 安装jsoncontent包
cnpm i hexo-generator-json-content --save
- 设置参数（标签显示、姓名、语言等）
打开
D:\blog\themes\yilia下的_config.yml在最后增加以下参数。
- 设置avatar（头像）、friends（社交）、favicon（网站图标）等
注意：头像、微信、QQ等图片，需要在
D:\blog\themes\yilia\source下新建assets文件夹，将图片保存在此文件夹中。
- 配置相关文件
打开
D:\blog\themes\yilia下的_config.yml文件修改以下参数。
文章如何显示摘要
问题：点击主页时，发现所有文章都是全文显示，不利于查找。
方法：通过在md格式文章正文中插入<!-- more -->代码，通过主页浏览时，仅会显示<!-- more -->代码以前的文字。
文章显示目录
- 增加文章目录TOC(table of content)方便阅读，在
themes/yilia/_config.yml中进行配置toc:2即可。
增加归档菜单
修改themes/yilia/_config.yml
menu:
主页: /
随笔: /tags/随笔/
归档: /archives/index.html
添加背景音乐
hexo博客文本添加网易云音乐
- 登入网易云音乐网页版，选择一首歌，点击歌曲详情，点击生成外链播放器。
- 复制外链代码，插入你需要编辑的md格式的文章，可选择“播放模型”。
- 将外链代码粘贴到md文本的首尾（你想放的位置）。
hexo博客文本添加网易云音乐
1.打开网易云音乐首页，复制选择的背景音乐分享外链。
2.引入播放器代码
在themes/yilia/layout/_partial/left-col.ejs文件nav标签中添加代码。
<!-- 网易云音乐插件 -->
<% if (theme.music && theme.music.enable){ %>
<div style="position:absolute; bottom:120px left:auto; width:85%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||1334445174%>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>
</div>
<% } %>
添加数字统计和阅读时长功能
1. 安装 hexo-wordcount
在博客目录（我的是blog文件夹），右键选择Git Bash Here命令，并输入下面命令：
npm i --save hexo-wordcount
若安装cnmp(链接淘宝镜像源)，可以输入下面命令。优点：相比安装速度快。
cnpm i --save hexo-wordcount
2. 文件配置
a. 在博客目录下定位到theme\yilia\layout_partial\post下创建word.ejs文件，内容如下：(存在的问题：数字统计图表无法显示)
<%# 为文章添加字数和阅读时长统计，先判断在根目录的配置文件_config.yml中是否开启只在文章内可见（用户主页不显示） %>
<% if (!theme.word_count.only_article_visit || (!index && theme.word_count.only_article_visit)){ %>
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<%# <i class="fa fa-keyboard-o"></i> %>
<i class="icon-statistics"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<%# <i class="fa fa-hourglass-half"></i> %>
<i class="icon-book icon"></i>
<span class="post-meta-item-text"> 阅读时长≈</span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
<% } %>
b. 接下来，在themes/yilia/layout/_partial/article.ejs中添加：
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost">
<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 && theme.word_count.enable && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
<!-- 添加字数统计完成》 -->
</header>
<% } %>
3. 开启功能
在博客目录下的_config.yml中添加下面代码：
#是否开启字数统计、阅读时长(关闭请设置enable为false)
#也可以单独在md文件里Front-matter设置`no_word_count: true`属性，来自定义关闭字数统计
word_count:
enable: true
#只在文章详情显示(不在首页显示)
only_article_visit: true