Hexo-yilia主题个性化美化及功能添加

最新推荐文章于 2024-05-11 10:07:43 发布

bosoun_ho

最新推荐文章于 2024-05-11 10:07:43 发布

阅读量5.6k

点赞数 12

分类专栏：笔记文章标签： github git 经验分享

本文链接：https://blog.csdn.net/King_Ho/article/details/104485154

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

yilia主题安装需要的命令

从你的博客根目录转到thmes文件夹内，在此处bash here并在小黑窗中输入命令：

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

后在博客根目录的_config.yml文件中修改theme:后面的内容为yilia(这里是更改该调用的主题，默认的是landscape)

有些同学改为yilia之后并没有调用并出现一大堆报错，下载到thmes中的yilia主题的名称可能是hexo-theme-yilia，将两个地方名字更改一致就好了。
中间可能会有人安装配置过程中出错，
初始化出错，补充以下参数：

hexo sever出错，补充以下参数：

npm install hexo-renderer-ejs--save

npm install hexo-renderer-stylus--save

npm install hexo-renderer-marked--save

执行hexo g命令后，报错：incomplete explicit mapping pair; a key node is missed
主题目录下所有yml文件中所有有空格的字段都用双引号括起来，尤其注意languages下面的yml文件。

hexo根目录文件解释

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息

Site

title: 大何生のBLOG //站点标题
subtitle: 积跬步，至千里。 //站点副标题
description: ‘’ //站点描述
keywords: //博客关键字
author: 大何生 //作者
language: en //语言
timezone: ‘’ //时间

查看所有配置文件：

npm i hexo-generator-json-content --save

###拿我的博客举例，配置好后hexo s预览的样子:
在这里插入图片描述 yilia主题本身的色调就很让像我这种不爱花里胡哨的人喜欢，但还是要学会修改一些东西才能更熟练的应用本主题，下面开始：

№1 显示摘要（而不是全文显示）

在编辑你的博文的时候在你需要在摘要出显示出来的内容后面插入一行
css

№2 优先级配置

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

index_generator:
  path: ''
  per_page: 10
  order_by:
    top: -1
    date: -1

№3 在左侧显示总文章数

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

插入网易云音乐播放器

打开网易云音乐首页，复制你喜欢的的背景音乐分享外链复制源码

在这里插入图片描述

<% if (theme.music && theme.music.enable){ %>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=445886994&auto=1&height=66"></iframe>
<% } %>

这里的宽度和高度是可以为量调整的,在其中的width=?? height=??。
在themes/yilia/layout/_partial/left-col.ejs文件nav标签中添加代码:
注：放在<nav class="header-nav">和</nav>之内
这里添加了一些判断和表达式。
在yilia主题配置文件_config.yml中添加属性:

# 网易云音乐插件
music:
  enable: true
  #id: 1332647902  # 网易云分享的ID
  autoplay: true  # 是否开启自动播放

№4 个人外部宣传

打开themes/yilia/_config.yml
在这里插入图片描述

# SubNav
subnav:
  #github: "#"
  weibo: "https://weibo.com/p/1005055125083612"
  #rss: "#"
  zhihu: "https://www.zhihu.com/people/he-sheng-51-24"
  #qq: "202299834"
  weixin: "/assets/wei.jpg"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  bilibili: "https://space.bilibili.com/39971838"
  #acfun: "#"
  mail: "mailto:he.shao@foxmail.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

不想显示的在前面加#如果需要显示，前面不要加#

№5配置显示

修改该文件：themes/yilia/_config.yml
在里面加入：

#版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
#当前应用的版权协议地址。
#版权协议的名称
#版权协议的Logo

declare_type: 1
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png

bash declare:true

№6 字数、阅读时长添加

安装hexo-wordcount 安装完就报错了 pass
在博客目录下打开terminal，输入命令

npm i --save hexo-wordcount

№7 鼠标点击小红心的设置

在 hexo/themes/yilia/source
文件目录下添加love.js文件。
love.js文件内这样编辑：

!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y-
-,s[e].scale+=.004,s[e].alpha-
=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") 
rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var 
a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-
5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var 
a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}
catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var 
s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: 
fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: 
rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-
border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}
(window,document);

在文件hexo/themes/yilia/layout/_partial/footer.ejs
文件的最后，添加以下代码：

<!--页面点击小红心-->
<script type="text/javascript" src="/love.js"></script>

小爱心

№8 文本结束并且与more无冲突

打开yourblog\themes\yilia\layout_partial文件夹，

样图：
并编辑article.ejs文件
并在这段代码：

<% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <% } %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link) { %>
          <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
        <% } %>
      <% } else { %>
        <%- post.content %>
      <% } %>

的下面添加：

<% if ((theme.essayending_type === 2 || (theme.essayending_type === 1 && post.essayending)) && !index){ %>
       <% if  (!index){ %>
         <div class="essayending">
           <div>
            <div style="text-align:center;color: #ccc;font-size:22px;">
            <br/>
            <br/>
 -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
            <br/>
            <br/>
             <br/>
             <br/>
            </div>
           </div>
         </div>
         <% } else {%>
         <div class="essayending" hidden="hidden"></div>
       <% } %>
       
  <% } %>

然后在**\theme\yilia_config.yml**
文件中找到合适位置添加：

#文章结束
essayending_type: 1 #0关闭文章结束提示 2全开 1需要在文章开头加上 
essayending: true

№9 修复手机浏览出现以下问题

所有文章无法查看
主题故障
将此中出现的内从全部复制，打开根目录的全局配置文件_config.yml在文件的最下面把这些内容然贴进去就好了：

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

№10 404 界面

直接在hexo/source文件夹里面加一个个性的404.html，内容自定可以到网上下载推荐个链接个性404界面模板在这里插入图片描述

№ 11单篇文章点击量

在这里插入图片描述
在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>
<% } %>
<!--显示阅读次数完毕-->

先做人，再做事，近期对hexo-yilia的探索就是这些，步子小，但不能停下来。

`积跬步，至千里，加油！`

bosoun_ho

关注

12
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
3
评论
Hexo-yilia主题个性化美化及功能添加

yilia主题安装需要的命令从你的博客根目录转到thmes文件夹内，在此处bash here并在小黑窗中输入命令：$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia后在博客根目录的_config.yml文件中修改theme:后面的内容为yilia(这里是更改该调用的主题，默认的是landscape)...
复制链接

扫一扫