hexo blog yili theme personalized custom tutorial (1) - learn to learn, early recognition yili theme

---

Reproduced in the article: HEXO blog yili theme personalized custom tutorial (1) - learn to learn, early recognition yili theme

The blog also get stumbled several days, due Next topic does not know what, I was playing bad. So a change of topic.
Famous yilia theme, advocating simple and elegant, and extreme performance, consistent with my character. After a long period of time with the subject matter.
Next, look for some custom methods and I walked down the pit yili theme personalized.

This tutorial is for yilia theme

Foreword

Since yilia no longer maintained, pretty much the pit, so I tried the following methods are out of the dare.
If there is an error, please return the original steps to check for errors, or refer to the official tutorial ↓
yilia theme github Open Source Address

Benpian collect the whole network the most complete Raiders friends, Minato live to see you.
This is a series, the first step to learn about other people's code, ha ha ha ha belch.

How to use the correct theme yilia

installation

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

Configuration

Modify hexo root directory _config.yml:theme: yilia

Custom Configuration

Theme configuration file in your home directory _config.yml, please modify according to their use. Complete configuration examples, refer to the author's blog

Theme configuration details

Next topic I am concerned about the configuration of the basic configuration there are areas that can be customized, detailed look at the following notes
part of the code I will use my own configuration to explain the specific usage

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

# SubNav // 这段代码是左侧栏的相关联系方式图标，后期可以修改图标等。
subnav:
  github: "#" //不需要就改成 "#"这个是github
  weibo: "#" //微博
  rss: "#" //RSS
  zhihu: "#" //知乎
  #qq: "#" //QQ
  #weixin: "#" //微信
  #jianshu: "#" //简书
  #douban: "#" //豆瓣
  #segmentfault: "#" //思否segmentfault
  #bilibili: "#" //哔哩哔哩
  #acfun: "#" //acfun
  #mail: "mailto:[email protected]" //比如你想展示邮箱，就把这里的地址改成你自己的邮箱即可。前面的 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> 是换行的意思。

Please shining above remark, a look at the effect a modification, probably will be able to master the most basic theme customization friends.

Theme BUG repair

reference

1. Run the server found an error message appears

<%- 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') %>

If the above error message appears, indicating less installed plug-in, one by one the following command to install plug-ins:

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

Then hexo cleanClear Clear cache files and generated static file to run again.

2. Left slide "all articles" button to install

First, be sure to use version is not greater than 6.2.
Using command node -vto check
then the configuration file hexo bottom of _config.yml plus

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

You can restart the server

2. The picture does not show

After entering the article, picture is not displayed.
Modify themes \ yilia \ layout_partial \ left- col.ejs the sixth row, instead
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
, we must also modify themes \ yilia \ layout_partial \ mobile-
nav.ejs line 10 inside, as modified
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

3. a reward of two-dimensional code does not show

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

4. The micro-channel sharing unsuccessful

Because Baidu network disk canceled the function to generate two-dimensional code, leading to links before unusable.
Modify themes \ yilia \ layout_partial \ post \
share.ejs the line 49 is //pan.baidu.com/share/qrcode?url=amended as
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
can be

The display the total number of articles on the left

Modification themes\yilia\layout\_partial\left-col.ejs
in

<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>

Later added

<nav>
    <a>总文章数 <%=site.posts.length%></a>
</nav>

Results are as follows

6. Add the necessary force to review the system

yilia default with a few systems, but I turn this theme from next over, before the use of force is necessary to (livere), do not want to change, you have to manually add the yilia inside.
According to the online method I tried for a long time before they succeed ..... reason is that their course is not detailed enough.
The first is to register livere , then get to your id
to see ID method, the upper right corner avatar - management page - the code governing access to

the new \themes\yilia\layout\_partial\post\livere.ejs
content code management directly copy the contents inside

and then edit themes\yilia\layout\_partial\article.ejs
locate <% if (!index && post.comments){ %>adding the following code at the bottom of it

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

Next you need profile theme ** _ config.yml ** add the following:

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

And the other comments shielding system code

then hexo clean and hexo d redeploying.
Results shown in Figure

7. Add the word count

Installation hexo-wordcount
npm i --save hexo-wordcount

!! Node versions prior to 7.6.0, please install version 2.x (Node.js v7.6.0 and previous) !!
npm install hexo-wordcount@2 --save

Then open themes\yilia\layout\_partial\left-col.ejs
if you need to add in the left side of the case, under the code shown in the position before the total number of articles to add code
<a>总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
that is

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

And it is expected to show a single article of words long reading then
edit themes\yilia\layout\_partial\article.ejs`` 在第一个down ', add code

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

To
effect the following

8. Cancellation access litten.me:9005

Litten.me:9005 on access issues, before the author of this theme in order to better improve this theme, sometimes collect the user's client information, as detailed here , if you do not want to be counted, it will be themes\yilia\source-src\js\report.jsinside that is empty of content can

Theme simple beautification and improvement

Reference:
Yilia Preferences - CSDN blog

1. Add Baidu statistics

First open Baidu statistics , add sites, copy the code obtained paste into
\themes\yilia\layout\_partial\footer.ejsthe following code block

with

You can (if you can not write yourself up.)

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

To
Note: Block <div>and </div>must be on <footer>and </fotter>between

2. Modify the title of the article style

Open \themes\yilia\source-src\css\article.scssadd the following style (like what styles can modify their own):

.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;
  }
}

Then open \themes\yilia\layout\_partial\article.ejs,
searching <%- partial('post/title', {class_name: 'article-title'}) %>
revised to

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

as the picture shows

Can, but now found the title of color set the color to a label, let us continue to solve.
Continue to modify the file, find \themes\yilia\source\main.0cf68a.css, open the editor, add the following code:

.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
}

√ solve the
effect is as follows

3. To delete or modify the bottom of the blog Hexo Theme Yilia by Litten

Open \themes\yilia\layout\_partial\footer.ejsamended as follows:

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

Of course, other things can be changed. Else how to modify later said slowly (such as what time the station.)
Of course, you can also try it yourself first.

4. Add article copyright notice

In \themes\yilia\layout\_partial\article.ejsadding the following code positions

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

Add the code below

<%# 添加文章版权 %>
        <%
          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>
        <% } %>

DETAILED FIG

continue to modify yilia relating configuration file _config.yml, add the following code

#版权
# 版权基础设定：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: 乐于分享,专注互联网生活.  # 标语

If you need to file chapter corresponding md there declare: true attribute, only the copyright notice, then the need for the article in the copyright notice of md file header, set the properties declare: trueyou can.

Afterword

For more information, please visit us:  Austrian strange Xiaozhan

To be continued ......