yilia主题常用配置

2020-02-16

字数统计: 1k字 | 阅读时长≈ 5分

摘要：介绍hexo中yilia主题的一些常用配置，包括头像设置、所有文章、微信分享功能等等。

一、“所有文章”按钮的安装

1.首先使用命令 node -v 检查版本是不是大于 6.2

2.在博客根目录执行以下命令：

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

3.在博客配置文件 _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

二、添加图片资源文件夹

1.路径为 themes/yilia/source/ 下，可添加一个 assets 文件夹，里面存放图片资源即可。

2.在 themes/yilia/_config.yml 里添加头像或者微信/支付宝二维码图片：

# 微信二维码图片
weixin:  /assets/img/wechat.png

# 头像图片
avatar:  /assets/img/head.jpg

# 网页图标
favicon:  /assets/img/head.jpg

三、文章显示摘要

1.注释掉文件 themes/yilia/_config.yml 里的：
1
# excerpt_link: more
2.在你 MD 格式文章正文插入  即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到。

四、文章显示目录

1.在 themes/yilia/_config.yml 中进行配置 toc: 2 即可。
2.会在博客页面右下角显示目录：

五、增加归档菜单

1.修改 themes/yilia/_config.yml 内容：

1
2
3

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

六、修复失效的微信分享二维码

1.因为百度网盘取消了生成二维码的功能。

解决办法是将themes\yilia\layout_partial\post\share.ejs 文件中的
1
//pan.baidu.com/share/qrcode?url=
修改为，
1
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

2.微信二维码显示正常，但是分享时找不到该网址。

解决方法是在themes\yilia\layout_partial\post\share.ejs 文件中的

1 2	var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:\|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;

下面加一行（这里的20是根据自己网址长度计算得到的）

1	test=sUrl.substring(20);

然后变成，

<%
  var sUrl = url.replace(/index\.html$/, '');
  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;
  test=sUrl.substring(20);
%>

然后将之前的

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl

改为

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=你的主页网址' + test

举例，我的网址是（wkzqn.github.io）那么就改为：

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://wkzqn.github.io/' + test  %>" alt="微信分享二维码">
    </div>
</div>

七、左侧显示总文章数

1.打开 themes\yilia\layout\_partial\left-col.ejs 文件，在

<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>

八、删除博客底部HexoThemeYiliaByLitten

打开…themes\yilia\layout_partial\footer.ejs 注释掉这行代码即可

1
2
3

<div class="footer-right">
	<!--<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten-->
</div>

九、参考文献

本文作者： 随风而行
本文链接： http://yoursite.com/2020/02/16/yilia主题常用配置/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！