Reproduced in: hexo blog yili topic personalized custom tutorial (1) -- learning from reference, initial recognition of yili topic

This blog has been stumbling for many days, because I don't know what's going on with the Next topic, I'm playing it badly. So I changed the subject.
The famous yilia theme, advocating simplicity and elegance, and ultimate performance, conforms to my character. I'll use this theme for a long time.
Next, let's talk about some ways to personalize and customize yili themes and the pits we have gone through.

This tutorial is for yilia topics

<!--more-->

Preface

As yilia is no longer maintained, there are many pits, so I have tried the following methods before I dare to take them out.
If there is an error, please return to the original step to check the error, or refer to the official tutorial
yilia theme github open source address

This article has collected the most comprehensive strategies of the whole network at present. Let's have a look.
This is a series, the first step is to learn from other people's code, hahahahiccup.

How to use yilia theme correctly

install

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

To configure

Modify ﹖ config.yml: theme: yilia under the hexo root directory

Custom configuration

The theme configuration file is ﹖ config.yml in the home directory. Please modify and use it according to your own needs For a complete configuration example, please refer to Author's blog

Topic configuration details

Next, I'll talk about the basic configuration in the topic configuration, and see the following notes in detail
Part of the code I will use my own configuration to explain the specific usage

# Header
// This code is the relevant display content in the left column. Later, you can add classification, about, etc. Each page is followed by its storage path
menu:
  //Home page: /
  //Essay / tags / essay/

# SubNav / / this code is the related contact information icon in the left column. You can modify the icon later.
subnav:
  github: "#" //It doesn't need to be changed to "Chen". This is github
  weibo: "#"/ / micro-blog
  rss: "#" //RSS
  zhihu: "#"/ / know
  #qq: "#" //QQ
  #weixin: "#"/ / WeChat
  #jianshu: "#"/ / simplified book"
  #douban: "#"/ / bean paste"
  #segmentfault: "#"/ / no segmentfault
  #bilibili: "#"/ / Bili bili
  #acfun: "#" //acfun
  #mail: "mailto:litten225@qq.com" / / for example, if you want to display your email, just change the address here to your own email. Mailto: don't remove
  #facebook: "#" //facebook
  #google: "#" //google
  #twitter: "#" //twitter
  #linkedin: "#" //linkedin

rss: /atom.xml

# Do you need to modify the root path
# If your site is in a subdirectory, such as http://yoursite.com/blog,
# Please set your url to http://yoursite.com/blog and root to / blog /.
root: 

# Content

# Article too long, truncate button text
excerpt_link: more //This text can be modified by yourself. For example, my text can be changed into the full text
# The bottom right corner of the article card is the resident link. Please set it to false if it is unnecessary. If the above is changed to expand the full text, this suggestion is changed to false
show_all_link: 'Unfolding the full text'
# mathematical formula
mathjax: false
# Open link in new window
open_in_new: false

# Reward
# Reward type setting: 0-turn off reward; 1-reward is only available when there is a reward:true attribute in the md file corresponding to the article; 2-reward is available for all articles
reward_type: 2
# Rewarding
reward_wording: 'Thank you for inviting me to have candy' //This is the text displayed during the reward. It can be modified
# Alipay 2D code address is the same as the way you set your head. For example, / assets/img/alipay.jpg, and https://xxx.png can be used directly for network pictures
alipay: 
# Wechat QR code image address
weixin: 

# Catalog
# Directory setting: 0 - do not display directory; 1 - there is toc:true attribute in the md file corresponding to the article, then there is directory; 2 - all articles display directory
toc: 1
# Set it according to your own habits. If your directory title is used to having a label, set it to true to hide the repeated hexo serial number; otherwise, set it to false
toc_hide_index: true
# Prompt when directory is empty
toc_empty_wording: 'Directory, does not exist'

# Is there a quick back to top button
top: true

# Miscellaneous
baidu_analytics: '' # Baidu analysis
google_analytics: '' # Google Analytics
favicon: /favicon.png # Site logo

#Your avatar url
avatar:

#Open sharing or not
share_jia: true

#Comments: 1. Talk more; 2. Netease cloud post; 3. Speak up; 4. Disqus; 5. Gitment
#No need to use an item, set the value to false directly, or comment out
#For details, please refer to Wiki: https://github.com/litten/hexo-theme-yilia/wiki/

#1, say more
duoshuo: false

#2. Netease cloud post
wangyiyun: false

#3, speak freely
changyan_appid: false
changyan_conf: false

#4. Disqus also has the field "Disqus" shortname in the config of the hexo root directory. yilia's
disqus: false

#5,Gitment
gitment_owner: false      #Your GitHub ID
gitment_repo: ''          #repo for storing comments
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# Style customization - generally do not need to modify, unless there is a strong desire to customize
style:
  # Background color above the left sidebar
  header: '#4d4d4d'
  # Right slip plate background
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider settings
slider:
  # Expand tags by default
  showTags: false

# Smart menu
# If not, set the corresponding item to false
# such as
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: 'All articles'
  friends: 'Friend chain'
  aboutme: 'About me'

friends:
  //Link 1: http://localhost:4000/
  //Link 2: http://localhost:4000/
  //Link 3: http://localhost:4000/
  //Link 4: http://localhost:4000/
  //Link 5: http://localhost:4000/
  //Link 6: http://localhost:4000/

aboutme: Very ashamed<br><br>Just a little bit of work<br>Thank you. //This is a sentence that appears on my page.

Please follow the above notes and modify one by one to see the effect, and you will probably master the most basic theme customization.

Topic BUG repair

Reference resources

1. Run the server and 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 prompt appears, it means that the plug-in is not installed. Execute the following commands one by one to install the plug-in:

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

Then hexo clean clears the cache file and the generated static file to run again.

2. Installation of "all articles" button on the left slider

First, make sure that the version used is greater than 6.2
Check with the command node -v
Then add ﹖ config.yml at the bottom of the configuration file of hexo

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

Restart the server

2. No head image

After entering the article, the picture will not be displayed.
Change the sixth line of themesyilialayout ﹣ partialleft-col.ejs to
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
At the same time, modify themesyilialayout ﹣ partialmobile-nav.ejs
In line 10, change to
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

3. Reward QR code is not displayed

Modify themesyilialayout & partialarticle.ejs
Find the label < img class = "reward img", and change the src value.
Alipay changed to this.
<%=theme.root%><%= theme.alipay%>
Wechat to this
<%=theme.root%><%= theme.weixin%>

4. Wechat sharing failed

Because Baidu network disk canceled the function of generating two-dimensional code, leading to the previous link is not available.
Modify themesyilialayout ﹣ partialpostshare.ejs
Change / / pan.baidu.com/share/qrcode?url = in line 49 to
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
that will do

5. Display the total number of articles on the left

Modify themes \ yilia \ layout \? Partial \ left col.ejs
stay

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

Add later

<nav>
    <a>Total number of articles <%=site.posts.length%></a>
</nav>

The effect is as follows

6. Add the review system of laibili

Yilia has several systems by default, but I've turned from the next theme. Previously, I used to use the "live" theme. If you don't want to change it, you have to manually add it to yilia.
I tried online for a long time to succeed... The reason is that their courses are not detailed enough.
The first is to register livere , and get your own id
View ID method, top right image - management page - code management access

New \ themes \ yilia \ layout \ \
Directly copy the content in code management

Then edit themes \ yilia \ layout \ \
Find <% if (! Index & & post. Comments) {% > and add the following code below it

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

Next, you need to add the following to the topic configuration file ﹖ config.yml:

#7. come to power
 livere: fill in your ID here

And block other comment system codes

Then the hexo clean and hexo d can be redeployed.
The effect is as follows

7. Add word count

Installing hexo wordcount
npm i --save hexo-wordcount

!! Before Node version 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 \ \
If you need to add it on the left, add the code under the code position that shows the total number of articles previously
<a>Total number of words < span class = "post count" ></a>
Namely

<nav>
    <a>Total number of articles <%=site.posts.length%></a>
    <a>Total word number <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>

Show the number of words in a single article and the expected reading time
Edit themes \ yilia \ layout \ \ partial \ article.ejs`
Under the first < / header >, add the code

<div align="center" class="post-count">
    Words: <% = wordcount (post. Content)% > words | expected reading time: <% = min2read (post. Content)% > minutes
</div>

that will do
The effect is as follows

8. Cancel access to liten.me: 9005

For access to litten.me:9005, the author of this topic used to collect the client information of users in order to better improve this topic. Please refer to Here , if you don't want to be counted, just empty the contents in themes \ yilia \ source SRC \ JS \ report.js

Simple beautification and perfection of theme

Reference resources:
Yilia preferences - CSDN blog

1. Add Baidu statistics

Open first Baidu statistics , add site, copy code, paste to
\The following code blocks in themes \ yilia \ layout \ \

  <div>
      Paste the code here
  </div>

that will do
Note: code blocks < div > and < / div > must be between < footer > and < / letter >

2. Modify article title style

Open \ themes \ yilia \ source SRC \ CSS \ article.scss to add the following styles (you can modify your favorite styles yourself):

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

Open \ themes \ yilia \ layout \ \,
Search for <% - partial ('post / Title ', {class_name:' article title '})% >
Modified to

<%# Comment out - partial ('post / Title ', {class_name:' article title '})% >
<%# Modify template% >
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

As shown in the figure

OK, but now we find that the color of the title sets the color for the a label. Let's continue to solve this problem.
Continue to modify the file, find \ themes\yilia\source\main.0cf68a.css, open editing, and 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 problem
The effect is as follows

3. Delete or modify Hexo Theme Yilia by Litten at the bottom of the blog

Open \ themes \ yilia \ layout \ \

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

Of course, it can be changed to other contents. How to modify other contents later (such as the time when the station was built). )
Of course, you can try it yourself first.

4. Add copyright notice to the article

Add code at the following location in \ themes \ yilia \ layout \ \

    <% } %>
    
    <-- Add code here-->
    
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

The added code is as follows

<%# Add article copyright% >
        <%
          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>Author:</strong>
                <% if(config.author != undefined){ %>
                  <%= config.author%>
                <% }else{%>
                  <font color="red">Please go to the blog root“_config.yml"Fill in the correct“ author"</font>
                <%}%>
                <br>
                <strong>Link to this article:</strong>
                <%= sUrl%>
                <br>
                <strong>Copyright notice:</strong>
                This work adopts
                <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
                Licensing. Reprint please indicate the source!
                <% if(theme.licensee_img != undefined){ %>
                  <br>
                  <a rel="license" href="<%= theme.licensee_url%>"><img alt="Knowledge sharing license agreement" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
                <% } %>
            </blockquote>
            
            <%# Add a slogan at the bottom of the post% >
            <hr>
                <center><strong><%= theme.licensee_slogan%></strong></center>
            <hr>
          </div>
        <% } else {%>
          <div hidden="hidden"></div>
        <% } %>

As illustrated in detail

Continue to modify the yilia theme configuration file ﹖ config.yml, and add the following code

#copyright
# Basic settings of Copyright: 0-close notice; 1-the md file corresponding to the article has the declare: true attribute, so there is a copyright notice; 2-all articles have a copyright notice
declare_type: 2 #All articles have copyright notice
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ 񖓿 the copyright agreement address of the current application.
licensee_name: 'Knowledge sharing credits-Non commercial use-Share in the same way 4.0 international licensing agreement' # Name of copyright agreement
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png ා Logo of copyright agreement
licensee_slogan: Willing to share,Focus on Internet life.  # Slogan

If you need to have the declare: true attribute in the md file corresponding to the chapter to have the copyright declaration, set the attribute declare: true in the md file header of the article that needs to have the copyright declaration.

To be continued