我的博客采用的hexo下的yilia主题，这篇文章记录一下自己折腾配置博客的方法和经过。
首先是创建博客的基本的几个命令
更新：折腾了半天，yilia这套主题最后是弃用了，果然还是最新的NexT比较香一些。欢迎大家访问我的博客：满意的战斗机的博客
yilia主题下的截断功能及优化一篇文章太长，不需要将其全部显示出来，在yilia主题下，我们只需要在我们的markdown文件中需要截断的地方插入<!-- more -->就可以实现阶段了。
但是这个时候发现，在截断的地方会有一个more>>的标志出现，与展开全文重复了
为了去除这个more>>，在themes/_config.yml，修改excerpt_link参数:
修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。
index_generator: path: '' per_page: 10 order_by: top: -1 date: -1 在左边栏显示总文章数将themesyilialayout_partialleft-col.ejs文件的
<nav class="header-menu"> <ul> <% for (var i in theme.menu){ %> <li><a rel="external nofollow" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li> <%}%> </ul></nav>后面加上
<nav> 总文章数 <%=site.posts.length%></nav> 添加网站流量计数功能 在_config.yml中添加 busuanzi: enable: true 将themes/yilia/layout/_partial/footer.ejs替换为一下代码 <footer id="footer"> <div class="outer"> <div id="footer-info"> <div class="footer-left"> © <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %> </div> <div class="footer-right"> <a rel="external nofollow" href="http://hexo.io/" target="_blank">Hexo</a> Theme <a rel="external nofollow" 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> 打开themesyilialayout_partialarticle.ejs，在<header class="article-header">里加入以下代码: <!-- 添加代码 访问统计 --><% if ( !index ){ %> <span class="archive-article-date"> 阅读量 <span id="busuanzi_value_page_pv"></span> </span><% } %>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEBxIKG4-1626445451252)(https://i.loli.net/2021/04/06/tPHydr4apl3oUDx.png)]
参考资源: Hexo个人博客之yilia主题阅读量和文章字数统计
添加字数统计和阅读时长功能安装hexo-wordcount
在终端中博客目录下输入命令(安装wordcount插件)
npm i –save hexo-wordcount配置修改
在themeyilialayout_partialpost下创建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"> | <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>在themesyilialayout_partialarticle.ejs中添加
<!-- 需要添加的位置 --><!-- 开始添加字数统计--><% if(theme.word_count && !post.no_word_count){%> <%- partial('post/word') %> <% } %> <!-- 添加完成 -->参考资源: Hexo个人博客之yilia主题阅读量和文章字数统计
Live 2D看板娘在博客的根目录运行以下命令：
npm install --save hexo-helper-live2d安装想要的live2d动画人物模型
npm install live2d-widget-model-harulive2d-widget-model-haru这个是一个动画的样式model，你可以在网上搜到很多。
安装成功后，你可以在你的博客根文件夹/node_modules/底下找到live2d-widget-model-haru这个文件夹。模型可以在live2d-widget-models中找到。
修改根目录下的配置文件
# 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，将
<!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div> -->注释掉，然后在themesyiliasourcemain.0cf68a.css中修改样式，注释掉原有的背景颜色
.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}然后，右侧主题区域替换背景。这里调整的是右侧显示文章的区域。在这里如果将代码作一下变化，那么右侧文章区域就会呈现半透明的状态。我为了简洁，还是选择这块区域呈现出不透明的状态。
.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中的背景
.mid-col { position: absolute; right: 0; min-height: 100%; /* background: #eaeaea; */ left: 300px; width: auto} body { *overflow-y*: hidden; /* background: #eaeaea */}这两处都需要把背景注释掉，否则会遮挡背景图片导致图片无法显示。
然后在body中设置背景图片（和上面的body不是一个body，可以使用vscode中的搜索功能搜索）
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添加背景图片
修改翻页不能正确显示的bug默认的Yilia主题下的翻页会有bug，在主页下的上下翻页会有如下的bug，HTML的特殊符号无法正确显示。
强迫症看着非常难受，索性直接改成中文上一页和下一页，找到yilia/layout/_partial/archive.ejs分别修改第8,9行和第37,38行，如下图：
修改完之后，再找到文件yilia/layout/_partial/script.ejs，搜索« Prev和Next »并且删除，然后本来的Prev和Next就变成了“上一页”和”下一页“。参考软件 | hexo博客主题yilia上一页下一页显示的问题_RyanCYK的计算机世界-CSDN博客