Hexo中yilia主题使用问题总结

最新推荐文章于 2021-09-09 12:03:50 发布

damonxiang

最新推荐文章于 2021-09-09 12:03:50 发布

阅读量2.1k

点赞数 3

分类专栏：博客搭建文章标签： html javascript

本文链接：https://blog.csdn.net/qq_37939980/article/details/104390332

版权

博客搭建专栏收录该内容

0 篇文章 0 订阅

订阅专栏

利用hexo搭建好博客后，就可以自己设置主题了。常用的主题里yilia算是比较美观简洁的。于是开始倒腾yilia。在网上也找到了许多相关的教程但是都不够集中，甚至有一些小问题（某个博主的教程甚至导致我的主题配置文件损坏~~~只好重新配置）。于是自己进行一下小总结。
博客最终效果
 附hexo配置文件说明文档

关于yilia主题下载问题，一般不会出错。速度慢是因为github上不去。
下载yilia过程

下载完成后，将博客文件夹下的配置文件_config.yml里的theme值修改为yilia即可：

修改theme值

然后执行一系列hexo clean，hexo g，hexo s发布到本地就行，后文中省略此步骤。

1、修改图片资源

在路径themes\yilia\source下新建图片资源文件夹assets用来存放图片资源文件。
配置文件_config.yml中直接引用即可。（此配置文件为yilia主题的配置文件路径为themes\yilia_config.yml）
需要显示的就不用注释掉，不需要显示的就用“#”注释掉。(详细的图片位置在配置文件中有相应的注释)

2、显示文章摘要

在Markdown格式的文章中插入:即可，只会显示它之前的文章，后面的内容不显示。同时注释掉yilia主题配置文件中的：

# excerpt_link: more

避免同时出现“more”和“展开全文”，如图：

3、显示文章目录

修改yilia主题配置文件中toc:2即可

4、添加归档菜单

修改yilia主题配置文件：

menu:
  主页: /
  随笔: /tags/随笔/
  归档: /archives/index.html

同时想在文章下添加小标签直接在tag栏填入相应的标签即可，如图：

5、修改代码快背景颜色和字体颜色

网上的常用方法有两种，此处推荐直接修改编译好的文件，路径为：themes\yilia\source\main.ocf68a.css

修改代码块背景色，搜索.article-entry .highlight修改此处十六进制颜色码即可。

修改代码块字体颜色，搜索.article-entry .highlight .line同样修改此处十六进制颜色码即可。

6、添加不蒜子统计

6.1安装不蒜子脚本

不蒜子可用来统计博客的访问量在themes\yilia\layout\_partial\after-footer.ejs文件最后添加：

<script  async  src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

6.2添加统计网站访问量

在themes\yilia\layout\_partial\footer.ejs中添加：

# PV方式，单个用户连续点击 n 篇，记录 n 次记录值
<span id="busuanzi_container_site_pv">    本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

# UV方式，单个用户连续点击 n 篇，记录 1 次记录值
<span id="busuanzi_container_site_uv">  本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

6.3单篇文章点击量

在themes/yilia/layout/_partial/article.ejs中

<%- partial('post/title', {class_name: 'article-title'}) %>

后面添加如下代码：

<!--显示阅读次数-->
<% if (!index && post.comments){ %>
  <br/>
  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
  <span class="icon-sort"></span>
  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
            阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
  </span>
  </a>
<% } %>
<!--显示阅读次数完毕-->

效果图：

7、添加评论系统

此处使用的是来必力（也有推荐使用Valine）
去官网注册后登录，点击管理页面，安装city版本。然后填入相关信息，最后获取一般网站代码，记下data-uid：

在yilia配置文件中添加如下代码：

# livere 来必力。将 false 改为自己的uid则启用该评论系统。
livere_uid: false

在themes\yilia\layout\_partial\post中新建文件livere.ejs文件，代码如下：

<!-- 来必力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版安装代码已完成 -->

然后在layout/_partial/article.ejs文件的任意一个评论代码后加入来必力的代码即可：

最后修改主题配置文件中livere_uid的值为自己来比力账号的uid即可！

效果图：

有时会出现加载不出来的情况，可能因为来必力是韩国的🙃。

8、添加字数统计及阅读时长

安装失败：

9、添加版权申明

在themes/yilia/layout/_partial/article.ejs文件如下位置：

<%- post.content %>
	<% } %>
	<-- 在此处添加代码-->
	<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

添加以下代码：

<!-- 添加版权声明 -->
<% if(theme.declare){%>
    <%- partial('post/declare') %>
<% } %>

然后在yilia/source/main.0cf68a.css中添加样式：

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

新建themes\yilia\layout\_partial\post\declare.ejs:

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

<!-- #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明 -->
<% if ((theme.declare.declare_type === 2 || (theme.declare.declare_type === 1 && post.declare)) && !index){ %>
  <div class="declare">
    <strong class="author">本文作者：</strong>
    <% if(config.author != undefined){ %>
      <%= config.author%>
    <% }else{%>
      <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
    <%}%>
    <br>
    <strong class="create-time">发布时间：</strong>
    <%- date(post.date, 'YYYY-MM-DD') %>
    <br>
    <strong class="update-time">最后更新：</strong>
    <%- date(post.updated, 'YYYY-MM-DD') %>
    <br>
    <strong class="article-titles">本文标题：</strong>
    <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= post.title %></a>
    <br>
    <strong class="article-url">本文链接：</strong>
    <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
    <br>
    <strong class="copyright">版权声明：</strong>
    本作品采用
    <a rel="license" href="<%= theme.declare.licensee_url%>" title="<%= theme.declare.licensee_alias %>"><%= theme.declare.licensee_name%></a>
    许可协议进行许可。转载请注明出处！
    <% if(theme.declare.licensee_img != undefined){ %>
      <br>
      <a rel="license" href="<%= theme.declare.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.declare.licensee_img%>"/></a>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

最后在文件themes/yilia/_config.yml中添加：

# 版权声明
#在需要进行版权声明的文章的md文件头部，设置属性declare: true。
#版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
declare:
  declare_type: 1
  licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/        #当前应用的版权协议地址。
  licensee_name: 'CC BY-NC-SA 4.0'                                        #版权协议的名称
  licensee_alias: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'       # alias别名

10、解决微信分享问题

初始配置下微信分享有异常：

解决办法：
将themes\yilia\layout\_partial\post\share.ejs文件中的

//pan.baidu.com/share/qrcode?url=

修改为：

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

接着在share.ejs文件中

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

后面加上一行代码（“20”由自己博客网址的长度计算得到）

test=sUrl.substring(20);

将上一步中的：

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

改成：

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

最后效果：

<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=https://damonxiang.github.io' + test  %>" alt="微信分享二维码">
    </div>
</div>

11、主页左侧显示文章总数

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

后面加上

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

效果：

damonxiang

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
Hexo中yilia主题使用问题总结

利用hexo搭建好博客后，就可以自己设置主题了。常用的主题里yilia算是比较美观简洁的。于是开始倒腾yilia。在网上也找到了许多相关的教程但是都不够集中，甚至有一些小问题（某个博主的教程甚至导致我的主题配置文件损坏~~~只好重新配置）。于是自己进行一下小总结。附hexo配置文件说明文档关于yilia主题下载问题，一般不会出错。速度慢是因为github上不去。下载完成后，将博客文件夹下...
复制链接

扫一扫