Hexo博客个性化设置（yilia主题）

2021-07-11

字数统计: 1.5k字 | 阅读时长: 6分

前言

最近依然在学习考研，祝自己能上岸吧，上岸后还有很多想做的事，学学Spring全家桶啥的，提升一下自己的技能库。最近发现李沐大神的动手学深度学习v2不错，茶余饭后看一看提升一下科研素质，以后发论文没准还是得靠这个，想用Java搞科研还没看出有什么门路。还准备每周在b站发俩做力扣的实战视频，水着玩儿也提高一下算法能力。说回正题，这个博文记录一下我在我的博客所做的一些个性化设置，持续更新～

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

安装 hexo-wordcount
在博客目录下打开Git Bash Here，输入命令:
npm i —save hexo-wordcount

文件配置
在theme\yilia\layout_partial\post下创建word.ejs文件：

<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中添加:

<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 && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

        <% } %>
      </header>

开启功能
在站点的_config.yml中添加下面代码:

1
2
3

# 是否开启字数统计
#不需要使用，直接设置值为false，或注释掉
word_count: True

添加不蒜子统计插件

配置是否开启不蒜子访问量统计功能
在themes/yilia/_config.yml添加属性
1
2
3
# 是否开启访问量统计功能(不蒜子)
busuanzi:
enable: true

引入不蒜子并添加站点访问量
在themes/yilia/layout/_partial/footer.ejs末尾footer标签前添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

添加文章访问量
这种形式是：外面不显示，只在文章里面才显示，位置为右上角时间的右边。
在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

在hexo博客养一只猫

安装模块

npm install --save hexo-helper-live2d

这里解释一下npm install的命令含义：
npm install moduleName # 安装模块到项目目录

npm install -g moduleName # -g 意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

npm install --save moduleName # --save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install --save-dev moduleName # --save -dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

安装模型

1
2
3

用 npm install 模型名字安装。
模型列表如下：

在hexo或者主题的_config.yml文件中添加如下配置

# Live2D:
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  tagMode: false
  debug: false
model:
  use: live2d-widget-model-wanko
  scale: 1
  hHeadPos: 0.5
  vHeadPos: 0.618
display:
  position: left
  width: 150 # 显示位置及大小
  height: 300
  hOffset: 0
  vOffset: -20
mobile:
  show: false # 手机显示开关，建议关闭
react:
  opacity: 0.7

遇到的问题…
在我配置好一切后，出现了不能更换模型的bug，怎么更改配置也没有用，我就尝试使用npm audit fix修复，看了一下报告大概是hexo等等插件的版本问题，然后强制fix了一波以后还是没好。。。一气之下我就把下载的东西都卸了，现在audit一下果然没问题了，然后重新用npm装一遍。。果然发现了些问题。

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated hexo-bunyan@1.0.0: Please see https://github.com/hexojs/hexo-bunyan/issues/17
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

从上面的警告可以看出我目前使用的nodejs15版本对有些插件的支持是比较差的，按照提示我运行audit fix来修复一下，结果修复完出来了更多issue。。从8个变成13了😅，试了一遍还是改不了模型和位置，索性不安了。