Hexo+yilia theme website advanced tutorial

Time:2022-11-25

Not much to say, the following configuration will improve your website by n grades!

【All Articles】Button Installation

You initialized the article, there is a problem with clicking all the article buttons, mainly because the following content is missing in your configuration file

Find the _config.yml file in the root directory of the blog, then open the file, and add the following code segment at the bottom of it:

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

Then hexo d uploads the project, and after updating, click on all the article directories again, and you will find out miraculously, wow, all the articles are listed.

Hexo+yilia theme website advanced tutorial

Add a profile picture, appreciate the QR code

Open Blogthemeshexo-theme-yiliasource in the root directory of your project, add an assets folder in it, and store image resources in it. For example, mine created an assets folder, and then created an img folder in it, which means putting Put the pictures in the Blogthemeshexo-theme-yiliasourceassetsimg directory.

Then open the _config.yml file under Blogthemeshexo-theme-yilia and configure in it:

#your avatar url
avatar: "/assets/img/mnn.jpg"

# reward
# rewardtype设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# rewardwording
reward_wording: 'Thank you for inviting me to eat candy'
# Alipay QR code image address, the same way you set your avatar. For example: /assets/img/alipay.jpg
alipay:
# Wechat QR code picture address
weixin: "/assets/img/wx.png"

Word count and reading time

Install hexo-wordcount

Open Git Bash Here in the blog root directory and enter the following command:

npm i --save hexo-wordcount

configuration file

existthemeshexo-theme-yilialayout_partialpostCreate under the directoryword.ejsFile (specifically why it is an ejs file instead of a js file is to be studied by everyone):

<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">Count:</span>
        <span class="post-count"><%= wordcount(post.content) %> words</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">Reading time:</span>
        <span class="post-count"><%= min2read(post.content) %> minutes</span>
      </span>
    </span>
</div>

then inthemeshexo-theme-yilialayout_partial/article.ejsadd in

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
         <! -- Location to add -->
         <! -- Start adding word count -->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
          <! -- Add finished -->
        <% } %>
      </header>

open function

in the project root_config.ymlAdd the following code in:

#Whether to enable word count
#No need to use, directly set the value to false, or comment out
word_count: true

After all the configuration is completed, you can see the word count of articles appearing in the project and the recommended reading time.

Hexo+yilia theme website advanced tutorial

Number of website visits

Introduce garlic

Add properties in themeshexo-theme-yilia/_config.yml

itselfyiliasubject is not in_config.ymlreservebusuanziattributes, so add at the end of the file:

#Open does not count child access statistics
busuanzi:
  enable: true

Add the following code at the end of themeshexo-theme-yilialayout_partial/footer.ejs

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

Add a script that does not count subsite traffic statistics

At the end of themeshexo-theme-yilialayout_partial/footer.ejs</footer>with the above</div>Put code in between:

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <! -- no garlic seed statistics -->
        <span id="busuanzi_container_site_pv">
                Total visits to this site<span id="busuanzi_value_site_pv"></span> Second-rate
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                Number of visitors to this site<span id="busuanzi_value_site_uv"></span> people
        </span>
        <script async src="/busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

According to different needs, you need to display your article readings in different positions. Here is an example of adding article readings in the date area in the upper right corner:
At the beginning of the original code of themeshexo-theme-yilialayout_partial/post/date.ejs (the new code does not need to be put into the original code block, but two separate blocks from the original code) add:

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <! -- no garlic seed statistics -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i>Number of readings:<span id="busuanzi_value_page_pv"></span> Second-rate
        </span>
<% } %>

Then generate a new file through hex g, submit it to the github platform after hexo d, and refresh the page to see the effect you added.

Add copyright notice

Add the following content at the annotation of themeshexo-theme-yilia/_partial/article.ejs file:

<%
        var sUrl = url.replace(/index\.html$/, '');
        sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
      %>
      <! -- Add code to start -->
      <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
        <div class="declare">
          <strong>Author of this article:</strong>
          <% if(config.author != undefined){ %>
            <%= config.author%>
          <% }else{%>
            <font color="#5b10b0"></font>
          <%}%>
          <br>
          <strong>Links to this article:</strong>
          <%= sUrl%>
          <br>
          <strong>Copyright Notice:</strong>
          This work uses
          <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
          for permission. Please indicate the source!
          <% if(theme.licensee_img != undefined){ %>
            <br>
            <a rel="license" href="<%= theme.licensee_url%>"><img style="border-width:0" src="<%= theme.licensee_img%>"/></a>
          <% } %>
        </div>
      <% } else {%>
        <div class="declare" hidden="hidden"></div>
      <% } %>

Then modify the themeshexo-theme-yilia/_config.yml configuration file and add in the configuration file:

## Copyright Notice
declare_type: 1 #Copyright basic setting: 0-close the statement; 1-the md file corresponding to the article has the attribute declare: true, and then there is a copyright statement; 2-all articles have a copyright statement
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ # The copyright agreement address of the current application.
licensee_name: 'Creative Commons Attribution-Noncommercial Use-Share Alike 4.0 International License Agreement' # The name of the copyright agreement
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png # Logo of copyright agreement

Find the _config.yml configuration file in the root directory of your project and fill in the url address:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mengniannian.cn

Submit is ok, the rendering is as follows:

Hexo+yilia theme website advanced tutorial

Add gitalk comment plugin

There are five comment functions available in the yilia theme:

1. Talk more (closed) 2. NetEase Cloud thread (stop updating) 3. Changyan (requires website filing information) 4. Disqus 5. Gitment.

The first three are basically unusable, and the latter two are not very familiar, so I chose gitalk, which is suitable for the public, which is convenient, fast, and comfortable to use.

OAuth application registration

First of all, you must register an account before using it, log in to your github account, click on the avatar –>Settings–>Developer settings–>OAuth App–>New OAuth App, orClick to register

Hexo+yilia theme website advanced tutorial

Application name: can be filled in at will
Homepage URL: personal blog address (domain name)
Application description: It can be filled or not, it is not critical, if filled, you can fill in the relevant description of your personal blog
Authorization callback URL: personal blog address (domain name)
After all the settings are complete, click Register application. After the registration is completed, two key messages will appear (the key to configuring the comment function of the personal blog, so I will not show the picture)

Click Register application After the registration is completed, two key information will appear, Client ID and Client Secret, which are very important.

Then configure the code in the _config.yml file under the yilia theme:

#6. Configure gitalk
gitalk:
  enable: true
  client_id: OAuth application #Successfully obtained registration
  client_secret: OAuth application #Registration successfully obtained
  repo: mengnn.github.io #The warehouse address for storing blog comments, which can be the warehouse for storing blogs
  owner: mengnn #github account name
  admin: mengnn #github account name
  distractionFreeMode: true

configuration file

First, add the gitalk.ejs file under the layout–>_partial–>post directory under the yilia theme:

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
var gitalk = new Gitalk({
  clientID: '<%=theme.gitalk.clientID%>',
  clientSecret: '<%=theme.gitalk.clientSecret%>',
  repo: '<%=theme.gitalk.repo%>',
  owner: '<%=theme.gitalk.owner%>',
  admin: ['<%=theme.gitalk.admin%>'],
  id: md5(window.location.pathname),
  distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>
})

gitalk.render('gitalk-container')
</script>

Then modify the comment.scss file under the source-src–>css directory under the yilia theme:

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
    padding: 0 30px !important;
    min-height: 20px;
}

#SOHUCS {
    #SOHU_MAIN .module-cmt-list .block-cont-gw {
        border-bottom: 1px dashed #c8c8c8 !important;
    }
}

Finally in layout–>_partialunder the directoryAdd gtalk-related configuration code in the article.ejs` file:

<% if (theme.gitalk.enable){ %>
       <div id="gitalk-container"></div>
       <%- include post/gitalk.ejs %>
  <% } %>

At this point, gitalk has been fully configured, then hexo g –>hexo d submit the code, open your website, and see the following picture below, which means that you have successfully configured, and you need to log in to your github account for the first comment , log in once and it’s OK.

Hexo+yilia theme website advanced tutorial

Add RSS

RSSSimple Information Aggregation(also known as syndicated content) is an RSS-basedXMLStandard, widely adopted content packaging and delivery protocol on the Internet. RSS (Really Simple Syndication) is a description and synchronizationwebsiteThe content format is the most widely used XML application. RSS builtinformationA technological platform that spreads rapidly, making everyone a potential information provider. After publishing an RSS file, the information contained in this RSS Feed can be directly called by other sites, and since these data are in standard XML format, they can also be used in other sites.terminaland services, is a format for describing and synchronizing website content.

Open the command line tool in the Hexo root directory and execute the following command:

npm install hexo-generator-feed --sava
hexo clean
hexo g

After the command runs, you will see an atom.xml file in the public folder under your root directory.

Open themeshexo-theme-yiliaconfig.yml in the project root directory in turn, and add RSS configuration information under the subnav project:

#SubNav
subnav:
  rss: /atom.xml

Regenerate and build the page, you can see the RSS information.

search engine

add sitemap

Open the command line tool in the Hexo root directory and execute the following command:

npm install hexo-generator-sitemap --save
hexo clean
hexo g

Check the public folder in the root directory, you can see the sitmap.xml file.
The original intention of sitemap is for search engines to see. In order to improve the effect of search engines on their own sites, we’d better manually submit sitemap.xml to search engines such as Google and Baidu.

Baidu search engine submission

Register Baidu webmaster account, enter after registrationsite management, add your own website, and follow the steps to complete website authentication.

Hexo+yilia theme website advanced tutorial

After the website certification is completed, enter the website management interface, click the link to submit –> automatic submission –> sitemap, and then fill in your own file address in the fill box, for example, mine ishttps://www.mengniannian.cn/s…,As shown below:

Hexo+yilia theme website advanced tutorial

Follow the prompts, fill in and submit and it’s ok! ! !