发现了一个特别好看的主题，yilia，但是已经不维护了，坑还挺多的，记录一下。

主题地址：https://github.com/litten/hexo-theme-yilia

首先git clone到themes目录中，记得要改名，目录名九教yilia，把前面的hexo-theme去掉

修改完hexo根目录下_config.yml里面的theme为yilia后，运行服务器，发现出现

1
2
3
4
5
6
<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>

说明少装了插件，执行以下命令安装插件：

1
2
3
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

进入文章后，头像就显示不出来了，这是源码中的bug。修改themes\yilia\layout_partial\left-col.ejs的第六行，改为
1
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
头像就设置为"img/avatar.jpg"即可。同时，还要修改themes\yilia\layout_partial\mobile-nav.ejs 里面的第10行，修改为
1
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
打赏的二维码也有这个问题修改themes\yilia\layout_partial\article.ejs 找到<img class=“reward-img"这个标签，改后面src的值支付宝的改成这个
1
<%=theme.root%><%= theme.alipay%>
微信的改成这个
1
<%=theme.root%><%= theme.weixin%>

“所有文章”按钮的安装首先使用命令

1
node -v

检查版本是不是大于6.2 然后在hexo的配置文件_config.yml最下面加上

 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

重启服务器即可

分享功能有问题，我发现share_jia的微信分享不好使，就使用了Mob分享先去官网注册账号http://mob.com/，然后申请shareSDK，会得到一个App Key 在yilia主题里面的_config.yml中的最后，加上

1
2
sharesdk: true #是否开启分享
shareSDKappkey: 你的App Key

然后在layout中的_partial中新建目录share，创建文件：yilia/layout/_partial/share/share.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
        <li class="-mob-share-weibo"><p>新浪微博</p></li>
        <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
        <li class="-mob-share-qzone"><p>QQ空间</p></li>
        <li class="-mob-share-qq"><p>QQ好友</p></li>
        <li class="-mob-share-weixin"><p>微信</p></li>                        <li class="-mob-share-twitter"><p>Twitter</p></li>     
        <li class="-mob-share-youdao"><p>有道云笔记</p></li>
        <li class="-mob-share-mingdao"><p>明道</p></li>            
        <li class="-mob-share-linkedin"><p>LinkedIn</p></li>
    </ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script>
<!--MOB SHARE END-->

然后编辑layout/_partial/article.ejs 找个合适的位置加入以下内容

1
2
3
<% if (!index && theme.sharesdk){ %>
    <%- partial('_partial/share/share.ejs') %>
<% } %>

左边昵称的字体有点丑，在themes\yilia\source\main.0cf68a.css里面修改，找到header-author，修改里面的font-family，我改成了
1
font-family:"Times New Roman",Georgia,Serif
之前的那个share_jia我修复了，之前微信分享之所以不成功，好像是因为百度网盘取消了生成二维码的功能，导致之前的链接不可用了。解决方法是修改themes\yilia\layout_partial\post\share.ejs 把第49行中的//pan.baidu.com/share/qrcode?url=修改为
1
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

如何在左侧显示总文章数？修改themes\yilia\layout_partial\left-col.ejs 在

1
2
3
4
5
6
7
<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>

后面加入

1
2
3
<nav>
    总文章数 <%=site.posts.length%>
</nav>

添加评论系统 yilia默认带了几个系统，但我是从next这个主题转过来的，之前用的是来必力(livere)，不想换了，就得手动在yilia里面加。首先是去注册livere，然后获取到自己的id 新建themes\yilia\layout_partial\comment\livere.ejs 内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];

        if (typeof LivereTower === 'function') { return; }

        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;

        e.parentNode.insertBefore(j, e);
    })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

然后编辑themes\yilia\layout_partial\article.ejs 找到这句话：<% if (!index && post.comments){ %> 在下面直接加入：

1
2
3
4
5
6
7
<% if (theme.livere){ %>
<%- partial('comment/livere', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

意思就是如果主题配置文件中有livere这个变量，且不为false，那就在下面加入comment/livere.ejs里面的内容所以接下来需要在主题配置文件(themes\yilia_config.yml)中添加以下内容：

1
2
livere: true
livere_uid: 你的id

添加字数统计首先需要安装hexo-wordcount 使用如下命令安装

1
npm i --save hexo-wordcount

Node 版本7.6.0之前,请安装 2.x 版本 (Node.js v7.6.0 and previous)

1
npm install hexo-wordcount@2 --save

然后在themes\yilia\layout_partial\left-col.ejs中添加

1
总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>

编辑themes\yilia\layout_partial\article.ejs 在header下面加入

1
2
3
<div align="center" class="post-count">
    字数：<%= wordcount(post.content) %>字 | 预计阅读时长：<%= min2read(post.content) %>分钟
</div>

即可显示单篇字数和预计阅读时长。

关于访问litten.me:9005的问题，这个主题的作者之前为了更好地完善这个主题，有时候会收集用户的客户端信息，详情请见https://github.com/litten/hexo-theme-yilia/issues/528，如果不想被统计，就将themes\yilia\source-src\js\report.js里面的内容清空，不过这个请求是异步的，不会影响博客加载速度，而且作者已经不维护了，所以关不关都行。