This post will continue to take you deeper into the optimization of articles and teach you how to create a cool personal blog site.

Before reading this article, I recommend reading my other two basic blog posts: 1. Building a personal blog about Hexo6.0 (basic) 2. Creating a personal blog about Hexo6.0

# directory

  • Optimize the style of blog posts
    • Modify the link text style within the article
    • Modify the tag style at the bottom of the post
    • Add a uniform “End of Article” tag at the end of each article
    • Achieve article word count and reading time estimation
    • Add copyright information at the bottom of the article
    • Article encrypted access
    • Put the blog at the top
    • Turn on the tip function at the bottom of the post
    • Enable the comment function

1. Modify the link text style within the article

Open the “themes\next\source\ CSS \_common\components\post\post.styl” file and add the following CSS styles at the end:

// Post body p a{color:#0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;}}Copy the code

The color can be customized. In this case, the status is orange and the link style is blue. The effect is as follows:

2. Change the label style at the bottom of the post

/themes/next/layout/_macro/post.swig < I class=”fa fa-tag”>
< I class=”fa fa-tag”>

<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>

3. Add the “End of this Article” tag at the end of each article

The effect is as follows:

  1. in\themes\next\layout\_macroCreate a new passage-end-tag.swig file and add the following code:
<div>
    {% if not is_index %}
        <div style="text-align:center; color: #ccc; font-size:14px;">------------- End of this article < I class="fa fa-heart"Word-wrap: break-word! Important; ">< div> {% endif %} </div>Copy the code
  1. Open the\themes\next\layout\_macro\post.swigAdd the following code after the post-body and before the post-footer (with two divs before the post-footer) :
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
Copy the code

_config.yml 

Add "End of article" tag at the end of article
passage_end_tag:
  enabled: true
Copy the code

At this point, we’re done.

4. Achieve word count and reading time estimation

The effect is as follows:

1. Run the GitBash command in the site root directory to install the hexo-wordCount plug-in:

$ npm install hexo-wordcount –save

2. Activate the plugin in the global configuration file _config.yml:

ymbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
Copy the code

3. In the topic configuration file _config.yml, perform the following configurations:

  time_minutes: true
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

Copy the code

At this point, we have achieved the article word count and estimated time display function

5. Add copyright information at the bottom of the article

The effect is as follows:

1. Create a new file my-copyright.swig under next/layout/_macro/ :

  {% if page.copyright %}
<div class="my_post_copyright">
  <script src="/ / cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <! -- JS library sweetalert can modify path --> <script SRC ="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js">< p><span> <a href="{{ url_for(page.path) }}"> {{page. The title}} < / a > < / p > < p > < span > author: < / span > < a href ="/" title="Access {{theme. Author}} personal blog"> {{theme. The author}} < / a > < / p > < p > < span > release date: < / span > {{page. The date. The format ("YYYY MM MM DD DD - HH:MM")}} < / p > < p > < span > last updated: < / span > {{page. Updated. The format ("YYYY MM MM DD DD - HH:MM"<span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="Click the copy article link"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></span> </p> <p><span> License agreement :</span>< I class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-Nd 4.0)" "Attribution-NonCommercial-NoDerivatives 4.0 International (CC by-NC-ND 4.0)"</a> Please keep the link to the original text and the author. </p> </div> <script> var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success'.function(){
        swal({   
          title: "",   
          text: 'Copy successful',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>
{% endif %}
Copy the code

Next /source/ CSS /_common/components/post/ create file my-post-copyright.styl: add the following code:

.my_post_copyright { width: 85%; max-width: 45em; Margin: 2.8 em auto 0; Padding: 0.5 1.0 em em; border: 1px solid#d3d3d3;The font - size: 0.93 rem; The line - height: 1.6 em. word-break:break-all; Background: rgba (255255255,0.4); } .my_post_copyright p{margin:0; } .my_post_copyright span { display: inline-block; Width: 5.2 em. color:#b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: # 808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: # 000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none; } } .my_post_copyright .copy-path:hover { color:# 808080;
  cursor: pointer;
}
Copy the code
  1. Open thenext/layout/_macro/post.swigFile, add the following code:
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>
Copy the code

Add so far as follows: Find the Wechat Subscriber field and add the above code before its field

4. Open the next/source/CSS / _common/components/post/post styl file, at the end of the add code:

@import “my-post-copyright”

To this copyright information description is successful. Note: To display copyright information at the bottom of the article, you need to display copyright: true at the head of the article

6. Encrypted access to articles

Open next\layout\_partials\head\head.swig and insert the following code:

<script>
    (function() {if('{{ page.password }}') {if (prompt('Please enter the article password')! = ='{{ page.password }}'){
                alert('Password error! '); history.back(); }}}) (); </script>Copy the code

Insert the position as follows:

password:******* 

title: Hello World
tag: hexo 
copyright: true
password: 123456
---
Copy the code

The effect is as follows:

At this point, the article decryption function is complete.

7. Put blogposts at the top

Open the file: node_modules/hexo-generator-index/lib/generator.js and replace it with the following code;

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.tip &&B.tip) {// both articles top have definitionsif(a.top == b.top) returnb.date - a.date; // If the top values are the same, order by article date in descending orderelse returnb.top - a.top; // If not, use the descending order of the top value}else if(a.top && ! B. op) {// select * from 'top' where 'top' = 'top';return- 1; }else if(! a.top && b.top) {return 1;
        }
        else returnb.date - a.date; // Neither defines the descending order of the article date}); var paginationDir = config.pagination_dir ||'page';
  return pagination(' ', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index'.'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true}}); };Copy the code

Add the top value to the post, the larger the value, the higher the post,

tag: hexo 
copyright: true
password: 123456
top: 150
---
Copy the code

8. Turn on the tip function at the bottom of the post

The effect is as follows:

2. Configure pictures and information in the theme configuration file _config.yml

# RewardReward_comment: Adhere to the original technology sharing, your support will encourage me to continue to create! wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg#bitcoin: /images/bitcoin.png
Copy the code

3. Set the tip font without flashing to open the next\source\ CSS \_common\components\post\post-reward. Styl file, annotated the following code:

/* Note text flash#wechat:hover p{Animation: roll 0.1s infinite Linear; -Webkit-animation: Roll 0.1s infinite Linear; -Moz-animation: roll 0.1s infinite Linear; }#alipay:hover p{Animation: roll 0.1s infinite Linear; -Webkit-animation: Roll 0.1s infinite Linear; -Moz-animation: roll 0.1s infinite Linear; } * /Copy the code

Ok, that’s the perfect way to start our tipping function.

9. Enable the comment function

The effect is as follows:

Here to explain, I am using sohu’s open comment, and can not leave a message when running on the local server, so just to teach you to integrate the comment function, will teach you how to use it to receive message reminder and reply comments.

1. Get the APP ID and APP KEY of Carefree Comment. First, register an account.

Open the topic configuration file _config.yml and find the Changyan field. Fill in the id and key

# changyan
changyan:
  enable: true
  appid: *********
  appkey: *************************

Copy the code

Next itself is already integrated with comment, so at this point we’ve managed to turn on the comment feature. Let’s rerun it and see what it looks like;

To this, our article optimization is basically done, so far I have always been taught everyone in local make personal blog, is the only can access on your computer, it must have been a lot of friends can’t wait want to blog online operation, so I will teach you the next one ultimate managed to making the site launch, SEO optimization, and hair Welcome to darryrzhong, more articles are waiting for you!

A little red heart, please! Because your encouragement is the biggest motivation for my writing!

More exciting articles please pay attention

  • Personal blog: Darryrzhong
  • The Denver nuggets
  • Jane’s book
  • SegmentFault