Hexo+yilia Topic Website Advanced Tutorial

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

Button Installation

You initialized the article, all articles button click open is a problem, mainly your configuration file is missing the following content

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

    meta: false
    pages: false
      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 clicks on all the articles directories again after updating. Wow, oh, all the articles are listed.

Added avatar, appreciate two-dimensional code

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

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

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

# Reward
# Reward type settings: 0 - close reward; 1 - reward:true attribute in the md file corresponding to the article; 2 - reward for all articles
reward_type: 2
# Reward wording
reward_wording: 'Thank you for inviting me to have candy.'
# Alipay 2D code address is the same as the way you set your head. For example: / assets/img/alipay.jpg
# Wechat 2-D Code Picture Address
weixin: "/assets/img/wx.png"

Word count and reading time

Install hexo-wordcount

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

npm i --save hexo-wordcount

configuration file

Create a word.ejs file in the themeshexo-theme-yilialayout_partialpost directory (why is the ejs file rather than the js file to be studied together):

<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">  word count: </span>
        <span class="post-count"><%= wordcount(post.content) %>word</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">  Length of Reading: </span>
        <span class="post-count"><%= min2read(post.content) %>branch</span>

Then add in themeshexo-theme-yilialayout_partial/article.ejs

<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}) %>
         <!-- Locations to be added -->
         <!-- Start adding word count-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
          <!-- Add Completion -->
        <% } %>

Open function

Add the following code to _config.yml in the project root directory:

#Whether to Open Word Number Statistics
#No need to use, set the value to false directly, or comment it out
word_count: true

When all the configurations are completed, you can see the number of articles and the length of recommended reading.

Number of site visits

Introduce no garlic

Add attributes to themeshexo-theme-yilia/_config.yml

The yilia theme itself does not retain the properties of busuanzi in _config.yml, so add:

#Open non-operator access statistics
  enable: true

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

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

Adding Statistical Scripts for Site Visits without Operators

Put the code between </footer> at the end of themeshexo-theme-yilialayout_partial/footer.ejs and </div> above it:

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

According to different requirements, you see that you need to display your article reading in different places. Here, add the article reading in the date area in the upper right corner as an example:
At the beginning of the original code of themeshexo-theme-yilialayout_partial/post/date.ejs (instead of putting the new code into the original code block, two separate blocks of the original code) add:

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

Then generate new files through hexo g, submit hexo d to github platform, refresh the page to see the effect you add.

Add Copyright Declaration

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

        var sUrl = url.replace(/index\.html$/, '');
        sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
      <!--Start by adding code-->
      <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
        <div class="declare">
          <strong>The author of this paper:</strong>
          <% if(config.author != undefined){ %>
            <%= config.author%>
          <% }else{%>
            <font color="#5b10b0"></font>
          <strong>Links to this article:</strong>
          <%= sUrl%>
          <strong>Copyright Statement:</strong>
          This work adopts
          <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
          License. Reprinted please indicate the source!
          <% if(theme.licensee_img != undefined){ %>
            <a rel="license" href="<%= theme.licensee_url%>"><img alt="Knowledge Sharing Licensing Agreement" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
          <% } %>
      <% } else {%>
        <div class="declare" hidden="hidden"></div>
      <% } %>

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

## Copyright Statement
declare_type: 1  #Copyright Foundation Settings: 0-Close Statement; 1-The md file corresponding to the article has declare: true attribute, only copyright declaration; 2-All articles have copyright declaration.
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ Copyright Protocol Address for Current Applications.
licensee_name: 'Knowledge sharing signature-Non-commercial use-Sharing 4 in the same way.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 Protocol

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

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

ok for submission. The results are as follows:

Add gitalk Comment Plug-in

Five comment functions are provided in the yilia theme:

1. Say more (closed). 2. Cloud follow-up posts on Netease (stopped and changed). 3. Speak freely (need information on the website) 4. Disqus 5. Gitment.

The first three basic can not be used, the latter two are not familiar with, so we chose a suitable gitalk for the public, convenient, fast, comfortable to use.

OAuth application registration

Register an account, log in to your github account, click on your avatar - > Settings - > Developer settings - > OAuth App - > New OAuth App, or Click Register

Application name: You can fill it in at will
 Homepage URL: Personal blog address (domain name)
Application description: Fill in or not, not the key. If you fill in, you can fill in the relevant description of your personal blog.
Authorization callback URL: Personal blog address (domain name)
After all the settings are completed, click Register application, and after registration, two key messages will appear (the key to configuring the comment function of personal blog is not to map)

Click Register application and two key messages will appear after registration, Client ID and Client Secret, are crucial.

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

#6. Configure gitalk
  enable: true
  client_id: OAuth application #Successful registration
  client_secret: OAuth application #Successful registration
  repo: mengnn.github.io #The warehouse address for storing blog comments 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 in the layout - > partial - > post directory under the yilia theme:

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></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%>


Then modify the comment.scss file in 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;

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

Finally, add gitalk-related configuration code to article.ejs` file in layout - > partial directory:

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

At this point, gitalk has been fully configured, and then hexo G - > hexo D submits the code, opens your website, as shown in the figure below, which shows that you have been successfully configured. The first comment needs to log on to the github account, and the first one is OK.

Increase RSS

RSS(Simple Information Aggregation (Aggregated Content) is an RSS-based XML Standards, content packaging and delivery protocols are widely used on the Internet. RSS(Really Simple Syndication) is a description and synchronization website Content format is the most widely used XML application. RSS is built information Rapid dissemination of a technology platform makes everyone a potential information provider. After publishing an RSS file, the information contained in the RSS Feed can be directly invoked by other sites, and because the data is in standard XML format, it can also be used in other sites. terminal Used in services, it is a format for describing and synchronizing website content.

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

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

After the command is run, 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:

  rss: /atom.xml

By rebuilding and building the page, you can see the information of RSS.

Search Engines

Add sitemap

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

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

Looking at the public folder in the root directory, you can see the sitmap.xml file.
The original intention of sitemap is to show the search engine. In order to improve the search engine's inclusion effect on its own site, we'd better submit sitemap.xml manually to search engines such as google and Baidu.

Baidu search engine submission

Register Baidu Station Master, Enter after Registration Site Management Add your own website, and then complete the website authentication step by step.

After the website certification is completed, enter the website management interface, click on the link submission - > automatic submission - > sitemap, and then fill in the file address in the filling box, such as mine is https://www.mengniannian.cn/s... As follows:

According to the prompt information, fill in the submission will be ok ay!!!

Tags: Programming xml github npm Attribute

Posted on Mon, 02 Sep 2019 00:09:35 -0700 by lajocar