转hexo博客yili主题个性化自定义教程1-借鉴中学习初认yili主题

共计 8290 个字符，预计需要花费 21 分钟才能阅读完成。

文章转载于：hexo 博客 yili 主题个性化自定义教程（1）——借鉴中学习，初认 yili 主题

这个博客跌跌撞撞也弄了好多天了，由于 Next 主题不知道什么情况，被我玩坏了。所以换了一个主题。
大名鼎鼎的 yilia 主题，崇尚简约优雅，以及极致的性能，符合我的性格。以后很长一段时间都用这个主题啦。
接下来来说一下一些 yili 主题个性化自定义的方法和自己走过的坑。

本教程适用于 yilia 主题

<!–more–>

由于 yilia 已经不维护了，坑还挺多的，所以下面这些方法都是我试过了才敢拿出来的。
如果有错误，请原步骤返回检查错误，或者参考官方教程↓
yilia 主题 github 开源地址

本篇收集了全网目前最全的攻略啦，各位凑活着看。
这是一个系列，第一步先借鉴一下别人的代码，哈哈哈哈嗝。

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

修改 hexo 根目录下的_config.yml：theme: yilia

主题配置文件在主目录下的_config.yml，请根据自己需要修改使用。完整配置例子，可以参考作者的博客

接下来我来说一下主题配置中的基本配置有哪些可以自定义的地方，详细看下面的备注
部分代码我会用我自己的配置来讲解具体用法

# Header
// 这段代码是左侧栏的相关展示内容，后期可以加上分类，关于等。每个页面后面是它的存放路径
menu:
  主页: /
  随笔: /tags/ 随笔 /

# SubNav // 这段代码是左侧栏的相关联系方式图标，后期可以修改图标等。subnav:
  github: "#" // 不需要就改成 "#" 这个是 github
  weibo: "#" // 微博
  rss: "#" //RSS
  zhihu: "#" // 知乎
  #qq: "#" //QQ
  #weixin: "#" // 微信
  #jianshu: "#" // 简书
  #douban: "#" // 豆瓣
  #segmentfault: "#" // 思否 segmentfault
  #bilibili: "#" // 哔哩哔哩
  #acfun: "#" //acfun
  #mail: "mailto:litten225@qq.com" // 比如你想展示邮箱，就把这里的地址改成你自己的邮箱即可。前面的 mailto: 不要去掉
  #facebook: "#" //facebook
  #google: "#" //google
  #twitter: "#" //twitter
  #linkedin: "#" //linkedin

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。root: 

# Content

# 文章太长，截断按钮文字
excerpt_link: more // 这个文字是可以自己修改的，比如我的就改成了展开全文
# 文章卡片右下角常驻链接，不需要请设置为 false，如果上面改成了展开全文，这个建议改为 false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏 type 设定：0- 关闭打赏；1- 文章对应的 md 文件里有 reward:true 属性，才有打赏；2- 所有文章均有打赏
reward_type: 2
# 打赏 wording
reward_wording: '谢谢你请我吃糖果' // 这个是打赏时候显示的文字，可以修改
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg，网络图片直接用 https://xxx.png 即可
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定：0- 不显示目录；1- 文章对应的 md 文件里有 toc:true 属性，才有目录；2- 所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为 true 即可隐藏 hexo 重复的序号；否则置为 false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: '' # 百度分析
google_analytics: '' # 谷歌分析
favicon: /favicon.png # 站点 logo

#你的头像 url
avatar:

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为 false，或注释掉
#具体请参考 wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在 hexo 根目录的 config 里也有 disqus_shortname 字段，优先使用 yilia 的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 左侧栏头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider 的设置
slider:
  # 是否默认展开 tags 板块
  showTags: false

# 智能菜单
# 如不需要，将该对应项置为 false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接 1: http://localhost:4000/
  友情链接 2: http://localhost:4000/
  友情链接 3: http://localhost:4000/
  友情链接 4: http://localhost:4000/
  友情链接 5: http://localhost:4000/
  友情链接 6: http://localhost:4000/

aboutme: 很惭愧 <br><br> 只做了一点微小的工作 <br> 谢谢大家 // 这个是出现在 关于我 页面的一句话 <br> 是换行的意思。

请照着上面的备注，一条一条修改看看效果，就能大概掌握最基础的主题自定义啦。

参考

<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){%> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>

如果出现上述错误提示，说明少装了插件，逐条执行以下命令安装插件：

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

然后 hexo clean 清除清除缓存文件和已生成的静态文件再次运行即可。

首先确保使用版本是不是大于 6.2.
使用命令 node -v 检查
然后在 hexo 的配置文件_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

重启服务器即可

进入文章后，头像就不显示。
修改 themesyilialayout_partialleft-col.ejs 的第六行，改为
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同时，还要修改 themesyilialayout_partialmobile-nav.ejs
里面的第 10 行，修改为
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

修改 themesyilialayout_partialarticle.ejs
找到 <img class=”reward-img”` 这个标签，改后面 src 的值
支付宝的改成这个
<%=theme.root%><%= theme.alipay%>
微信的改成这个
<%=theme.root%><%= theme.weixin%>

因为百度网盘取消了生成二维码的功能，导致之前的链接不可用了。
修改 themesyilialayout_partialpostshare.ejs
把第 49 行中的 //pan.baidu.com/share/qrcode?url= 修改为
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
即可

修改 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>
    <a> 总文章数 <%=site.posts.length%></a>
</nav>

效果如下

yilia 默认带了几个系统，但我是从 next 这个主题转过来的，之前用的是来必力 (livere)，不想换了，就得手动在 yilia 里面加。
按网上的方法我试了好久才成功 ….. 原因就是他们的教程不够详细。
首先是去注册 livere，然后获取到自己的 id
查看 ID 方法，右上角头像 - 管理页面 - 代码管理获取

新建 \themes\yilia\layout\_partial\post\livere.ejs
内容直接复制代码管理里面的内容

然后编辑 themes\yilia\layout\_partial\article.ejs
找到<% if (!index && post.comments){%> 在它的下方加入以下代码

 <% if (theme.livere){ %>
  <%- partial('post/livere', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>

接下来需要在主题配置文件 _config.yml 中添加以下内容：

#7. 来必力
livere: 这里填你的 ID

并把其他的评论系统代码屏蔽

然后 hexo clean 和hexo d重新部署即可。
效果如图

安装 hexo-wordcount
npm i --save hexo-wordcount

!!Node 版本 7.6.0 之前, 请安装 2.x 版本 (Node.js v7.6.0 and previous)!!
npm install hexo-wordcount@2 --save

然后打开 themes\yilia\layout\_partial\left-col.ejs
如果需要 在左侧添加 的话，在之前显示总文章数的代码位置下添加代码
<a> 总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
即

<nav>
    <a> 总文章数 <%=site.posts.length%></a>
    <a> 总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>

显示单篇字数和预计阅读时长 的话
编辑 themes\yilia\layout\_partial\article.ejs`
在第一个 </header> 下，添加代码

<div align="center" class="post-count">
    字数：<%= wordcount(post.content) %> 字 | 预计阅读时长：<%= min2read(post.content) %> 分钟
</div>

即可
效果如下

关于访问 litten.me:9005 的问题，这个主题的作者之前为了更好地完善这个主题，有时候会收集用户的客户端信息，详情请见这里，如果不想被统计，就将 themes\yilia\source-src\js\report.js 里面的内容清空即可

参考：
Yilia 个性设置 - CSDN 博客

先打开百度统计，添加站点，复制获得的代码，粘贴到
\themes\yilia\layout\_partial\footer.ejs 中如下代码块 <div> 和 </div> 即可（如果没有可以自己写上去。）

  <div>
      这里粘贴代码
  </div>

即可
注意：代码块 <div> 和</div>一定要在 <footer> 和</fotter>之间

打开 \themes\yilia\source-src\css\article.scss 添加如下样式（喜欢什么样式可以自己修改）：

.article-title_code_ant {
  color: black;
  margin-left: 0px;
  font-weight: 50;
  line-height: 1em;
  margin-bottom: 1em;
  font-size: 27px;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
  &:hover{color: #B0A0AA;}
}

再打开 \themes\yilia\layout\_partial\article.ejs，
搜索 <%- partial('post/title', {class_name: 'article-title'}) %>
修改为

<%# 注释掉 -partial('post/title', {class_name: 'article-title'}) %>
<%# 修改模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

如图所示

即可，但是现在发现标题的颜色为 a 标签设置颜色，让我们继续来解决。
继续修改文件，找到\themes\yilia\source\main.0cf68a.css，打开编辑，添加如下代码：

.article-inner h1.article-title_code_ant, .article-title_code_ant {
    color: #000000;
    margin-left: 0;
    font-weight: 50;
    line-height: 1em;
    margin-bottom: 1em;
    font-size: 27px;
    transition: color .3s
}

解决√
效果如下

打开 \themes\yilia\layout\_partial\footer.ejs 修改如下：

<div class="footer-right">
</div>

当然也可以改成其他内容。其他内容怎么修改以后再慢慢说 (比如建站时间什么的。)
当然各位也可以先自己尝试一下。

在 \themes\yilia\layout\_partial\article.ejs 中如下的位置添加代码

    <% } %>
    
    <-- 在此处添加代码 -->
    
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){%>

添加的代码如下

<%# 添加文章版权 %>
        <%
          var sUrl = url.replace(/index\.html$/, '');
          sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
        %>
        <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
          <div>
            <blockquote>
                <strong> 本文作者：</strong>
                <% if(config.author != undefined){ %>
                  <%= config.author%>
                <% }else{%>
                  <font color="red"> 请在博客根目录“_config.yml”中填入正确的“author”</font>
                <%}%>
                <br>
                <strong> 本文链接：</strong>
                <%= sUrl%>
                <br>
                <strong> 版权声明：</strong>
                本作品采用
                <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
                进行许可。转载请注明出处！<% if(theme.licensee_img != undefined){ %>
                  <br>
                  <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
                <% } %>
            </blockquote>
            
            <%# 添加文章底部标语 %>
            <hr>
                <center><strong><%= theme.licensee_slogan%></strong></center>
            <hr>
          </div>
        <% } else {%>
          <div hidden="hidden"></div>
        <% } %>

具体如图

继续修改 yilia 主题配置文件_config.yml，添加如下代码

# 版权
# 版权基础设定：0- 关闭声明；1- 文章对应的 md 文件里有 declare: true 属性，才有版权声明；2- 所有文章均有版权声明
declare_type: 2 #所有文章均有版权声明
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 # 版权协议的 Logo
licensee_slogan: 乐于分享, 专注互联网生活.  # 标语

未完待续 ……

文章转载于：hexo 博客 yili 主题个性化自定义教程（1）——借鉴中学习，初认 yili 主题

前言

如何正确使用 yilia 主题

安装

配置

自定义配置

主题配置详细介绍

主题 BUG 修复

1. 运行服务器，发现出现错误提示

2. 左滑块“所有文章”按钮的安装

2. 头像不显示

3. 打赏二维码不显示

4. 微信分享不成功

5. 在左侧显示总文章数

6. 添加来必力评论系统

7. 添加字数统计

8. 取消访问 litten.me:9005

主题简单美化与完善

1. 添加百度统计

2. 修改文章标题样式

3. 删除或修改博客底部 Hexo Theme Yilia by Litten

4. 文章添加版权声明

Just My Socks（注册教程内含优惠码）

转hexo博客yili主题个性化自定义教程1-借鉴中学习初认yili主题

文章转载于：hexo 博客 yili 主题个性化自定义教程（1）——借鉴中学习，初认 yili 主题

前言

如何正确使用 yilia 主题

安装

配置

自定义配置

主题配置详细介绍

主题 BUG 修复

1. 运行服务器，发现出现错误提示

2. 左滑块“所有文章”按钮的安装

2. 头像不显示

3. 打赏二维码不显示

4. 微信分享不成功

5. 在左侧显示总文章数

6. 添加来必力评论系统

7. 添加字数统计

8. 取消访问 litten.me:9005

主题简单美化与完善

1. 添加百度统计

2. 修改文章标题样式

3. 删除或修改博客底部 Hexo Theme Yilia by Litten

4. 文章添加版权声明

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）