hexo下yilia主题博客个性化自定义

发表于 更新于 分类于 阅读次数： 本文字数： 6.9k 阅读时长 ≈ 6 分钟

我的博客采用的hexo下的yilia主题，这篇文章记录一下自己折腾配置博客的方法和经过。 首先是创建博客的基本的几个命令 

1
2
3
4
5
hexo g # 生成博客网页文件
hexo s # 本地预览博客，打开本地网址http://localhost:4000/进行预览
hexo d # 上传网页文件到github
hexo new post "Article Title" # 新建一篇博客
hexo cl && hexo g &&　hexo s # 一步实现清除重构本地预览

yilia主题下的截断功能及优化

一篇文章太长，不需要将其全部显示出来，在yilia主题下，我们只需要在我们的markdown文件中需要截断的地方插入<!-- more -->就可以实现阶段了。

但是这个时候发现，在截断的地方会有一个more>>的标志出现，与展开全文重复了

image-20210406213135567

为了去除这个more>>，在themes/_config.yml，修改excerpt_link参数:

1
2
excerpt_link：之后的more单词换成空格
注：‘excerpt_link： ’。其中：后有一个空格键

优先级配置

修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

1
2
3
4
5
6
index_generator:
  path: ''
  per_page: 10
  order_by:
    top: -1
    date: -1

在左边栏显示总文章数

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

添加网站流量计数功能

  • 在_config.yml中添加 

    1
    2
    busuanzi:
        enable: true

  • 将themes/yilia/layout/_partial/footer.ejs替换为一下代码 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <footer id="footer">
     <div class="outer">
       <div id="footer-info">
         <div class="footer-left">
           &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
         </div>
         <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>
       </div>
       <div calss="count-span">
         <span id="busuanzi_container_site_pv">
             总访问量: <span id="busuanzi_value_site_pv"></span>
       </div>
     </div>
    </footer>


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

  • 打开\themes\yilia\layout\_partial\article.ejs，在<header class="article-header">里加入以下代码: 

    1
    2
    3
    4
    5
    6
    <!-- 添加代码 访问统计 -->
    <% if ( !index ){ %>
        <span class="archive-article-date">
            阅读量 <span id="busuanzi_value_page_pv"></span>
        </span>
    <% } %>

image-20210406210243081

参考资源: Hexo个人博客之yilia主题阅读量和文章字数统计

添加字数统计和阅读时长功能

  • 安装hexo-wordcount

    在终端中博客目录下输入命令(安装wordcount插件) 

    1
    npm i –save hexo-wordcount

  • 配置修改

    在theme_partial.ejs文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div style="margin-top:10px;">
        <span class="post-time">
          <span class="post-meta-item-icon">
            <i class="fa fa-keyboard-o"></i>
            <span class="post-meta-item-text">  字数统计: </span>
            <span class="post-count"><%= wordcount(post.content) %>字</span>
          </span>
        </span>

        <span class="post-time">
          &nbsp; | &nbsp;
          <span class="post-meta-item-icon">
            <i class="fa fa-hourglass-half"></i>
            <span class="post-meta-item-text">  阅读时长: </span>
            <span class="post-count"><%= min2read(post.content) %>分</span>
          </span>
        </span>
    </div>

    在\themes\yilia\layout\_partial\article.ejs中添加

    1
    2
    3
    4
    5
    6
    <!-- 需要添加的位置 -->
    <!-- 开始添加字数统计-->
    <% if(theme.word_count && !post.no_word_count){%>
        <%- partial('post/word') %>
            <% } %>
                <!-- 添加完成 -->

    image-20210406210706379

参考资源: Hexo个人博客之yilia主题阅读量和文章字数统计

Live 2D看板娘

在博客的根目录运行以下命令：

1
npm install --save hexo-helper-live2d

安装想要的live2d动画人物模型

1
npm install live2d-widget-model-haru

live2d-widget-model-haru这个是一个动画的样式model，你可以在网上搜到很多。

安装成功后，你可以在你的博客根文件夹/node_modules/底下找到live2d-widget-model-haru这个文件夹。模型可以在live2d-widget-models中找到。

修改根目录下的配置文件

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
# 7.live2d配置宠物
live2d:
  # 当enable 为true的时候，会启用yaliya主题自带宠物shizuku,橘头发小姐姐，而且不可以配置位置，所以需要讲enable注释掉
  # enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
  	# 我用的是初音的模型(老二次元了)
  	use: live2d-widget-model-miku
    # live2d-widget-model-wanko 是一只趴在碗里的狗狗
    # use: live2d-widget-model-wanko # 通过修改use来确定使用哪种model
    # hibiki 是一个御姐
    # use: live2d-widget-model-hibiki
    # haruto 海军服女孩，有点难看
    # use: live2d-widget-model-haruto
  display:
    position: left
    width: 150
    height: 300
    # 一个比较可爱的位置
    # hOffset: 200 
    # vOffset: -100
    # 第二个位置配置，这个在左侧边栏位置很居中
    hOffset: 80  # 调节水平位置
    vOffset: -50  # 调节垂直位置
  mobile:
    show: false

参考资料:

hexo-添加Live2d看板动画 （添加宠物）- yaliya 主题 一个小坑

Hexo 博客添加看板娘

yilia替换背景

首先，左侧栏替换背景

找到themes/yilia/layout/_partial/left-col.ejs，将

1
<!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div> -->

注释掉，然后在themes\yilia\source\main.0cf68a.css中修改样式，注释掉原有的背景颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
.left-col {
    /* background:#fff; */
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('image-url') no-repeat 0% 20%/ cover;
    width: 300px;
    position: fixed;
    opacity: 1;
    transition: all .2s ease-in;
    height: 100%;
    z-index: 999;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 15px
}

然后，右侧主题区域替换背景。这里调整的是右侧显示文章的区域。在这里如果将代码作一下变化，那么右侧文章区域就会呈现半透明的状态。我为了简洁，还是选择这块区域呈现出不透明的状态。

1
2
3
4
5
6
7
8
9
10
.article {
    margin: 30px;
    position: relative;
    border: 1px solid #ddd;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    /* background: #fff; */
    background: rgba(255,255,255,.5);
    transition: all .2s ease-in
}

接下来有两个地方需要注意，一个是.mid-col中的背景和body中的背景

1
2
3
4
5
6
7
8
.mid-col {
    position: absolute;
    right: 0;
    min-height: 100%;
    /* background: #eaeaea; */
    left: 300px;
    width: auto
}
1
2
3
4
5
6
7
body {

  *overflow-y*: hidden;

  /* background: #eaeaea */

}

这两处都需要把背景注释掉，否则会遮挡背景图片导致图片无法显示。

然后在body中设置背景图片（和上面的body不是一个body，可以使用vscode中的搜索功能搜索）

1
2
3
4
5
6
7
8
9
10
11
body {
    margin: 0;
    font-size: 14px;
    font-family: Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    /* background-color: #fff; */
    min-height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
    url('image-url') no-repeat 0% 0%/ cover;
}

目前左侧栏的背景成功更改了，但是右侧区域的背景还是没有成功更改。

参考资料:

hexo+yilia添加背景图片

hexo之yilia主题添加背景图片

修改翻页不能正确显示的bug

默认的Yilia主题下的翻页会有bug，在主页下的上下翻页会有如下的bug，HTML的特殊符号无法正确显示。

image-20210716214619724

强迫症看着非常难受，索性直接改成中文上一页和下一页，找到yilia/layout/_partial/archive.ejs分别修改第8,9行和第37,38行，如下图：

image-20210716215012720

修改完之后，再找到文件yilia/layout/_partial/script.ejs，搜索&laquo; Prev和Next &raquo;并且删除，然后本来的Prev和Next就变成了“上一页”和”下一页“。参考软件 | hexo博客主题yilia上一页下一页显示的问题_RyanCYK的计算机世界-CSDN博客

Gitalk 评论

在New OAuth Application (github.com)中进行注册，如下图：

image-20210717000639493

注册好之后，就可以得到Client ID和Client Secret，然后我们需要创建一件仓库用来承接gitalk的评论。

在主题下的_config.yml中找到gitalk配置

1
2
3
4
5
6
7
8
9
gitalk:
    githubID: # 填你的 github 用户名
    repo: xxx.github.io # 承载评论的仓库，一般使用 Github Page 仓库
    ClientID: # 第1步获得 Client ID
    ClientSecret: # 第1步获得 Client Secret
    adminUser: # Github 用户名
    distractionFreeMode: true
    language: zh-CN
    perPage: 10

然后重新部署博客页面就可以看到评论区出现了

参考资料：3-hexo评论设置 | 叶落阁 (yelog.org) 这个博主的yilia还蛮全面的

在使用的时候发现了以下异常，Gitalk出现Error:Validation Failed问题，经过查询发现这是由于Gitalk的id有长度限制，而在yilia中默认是将通过url设置为id，所以很容易长度超过50，解决办法：我们可以把id设置为文章标题，这样子就不容易超过50了。修改yilia/layout/_partial/post/gitment.ejs，第6行修改为id: "<%=post.title%>"，问题解决。