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

最新推荐文章于 2024-05-01 12:28:31 发布

Lucas-hao

最新推荐文章于 2024-05-01 12:28:31 发布

阅读量863

点赞数 3

文章标签： github hexo 博客主题

本文链接：https://blog.csdn.net/weixin_45951701/article/details/118828153

版权

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

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

更新：折腾了半天，yilia这套主题最后是弃用了，果然还是最新的NexT比较香一些。欢迎大家访问我的博客：Lucas的博客

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

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

但是这个时候发现，在截断的地方会有一个more>>的标志出现，与展开全文重复了
在这里插入图片描述
为了去除这个more>>，在themes/_config.yml，修改excerpt_link参数:

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

优先级配置

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

index_generator:
  path: ''
  per_page: 10
  order_by:
    top: -1
    date: -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>

后面加上

<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">
       &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">里加入以下代码:

<!-- 添加代码 访问统计 -->
<% 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
```

配置修改

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

<!-- 需要添加的位置 -->
<!-- 开始添加字数统计-->
<% 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-haru

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

注释掉，然后在themes\yilia\source\main.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博客

Lucas-hao

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
hexo下yilia主题博客个性化自定义

我的博客采用的hexo下的yilia主题，这篇文章记录一下自己折腾配置博客的方法和经过。首先是创建博客的基本的几个命令hexo g # 生成博客网页文件hexo s # 本地预览博客，打开本地网址http://localhost:4000/进行预览hexo d # 上传网页文件到githubhexo new post "Article Title" # 新建一篇博客hexo cl && hexo g &&　hexo s # 一步实现清除重构本地预览yilia
复制链接

扫一扫