The experience of building blog

To study English,and make my blog become large and luxurious,i have changed the main language of my blog from Chinese to English.Hope my English and programming's ablity can upgrade together.

some changes

I will correct the tags and categories tomorrow,though it will be too troublesome.

I have already changed tags and categories.

2019.4.22 6:34

What next?
“About” page!

Carry out! in 2019.4.22. 7:29

The comment system Valine is Chinese now,i can't solve this,but i will finish this in the future.

Carry out in 2019.4.22 10:20

How to put a post to the top?

At first,i installed the plugin to achieve this,and something wrong happened.The top flag is there, but there is no function to achieve the top.So isearched this online.Finally,i still don't known why,but i solve this problem through other method.

Implemented by modifying the file

file path:

Ur blog name/node_modules/hexo-generator-index/lib/generator.js

Add the following codes in the file

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // Both articles have definitions on top
        if(a.top == b.top) return b.date - a.date; // If the top value is the same, it will be sorted according to the article date.
        else return b.top - a.top; // Otherwise,it willed be sorted according the value of top.
    }
    else if(a.top && !b.top) { // The following is only one article top definition, then there will be top in front（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // Did not define the descending order according to the article date
});

At first,I didn't know much about js and didn't know where to insert it, so I failed several times.So if you are experiencing the same situation as me,you can directly copy these following codes and paste in your file.
Note: just cover it all.

'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.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.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
    }
  });
};

How to display the flag of the top

This is easy.You still need to modify some files to achieve this features.
file path:

Ur blog name/themes/next/layout/_macro/post.swig

First,find the place of<div class="post-meta">.
Second,insert these following codes

{% if post.top %}
    //You can choose and replace the icon you want in https://www.fontawesome.com.cn/.
    Topping//You can change the color and specific content of the top logo in this.
    |
{% endif %}

Of course,if you are not sure where to insert it,just compare with the code below.

        <div class="post-meta">
          <span class="post-time">
            {% if post.top %}
              
              Topping
              |
            {% endif %}
            {% set date_diff = date(post.date) != date(post.updated) %}
            {% set time_diff = time(post.date) != time(post.updated) %}
            {% set datetime_diff = date_diff or time_diff %}

Rendering

Reference article: https://blog.csdn.net/weixin_42556146/article/details/80836875

The introduction about the top is here.

A really big change

Great change, like changing the blog's blood
Reference article: https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

Add article image summary

The reason of why use this

First of all, the abstract of the article refers to the part of the content that each article displays on the page, which is the content of the previous article. Since it will be displayed on the page, adding an image to the article summary for each article will make the page look beautiful.

Rendering

First,Edit this file

Urblog name/themes/next/_config.yml

Change into

excerpt_description: false

auto_excerpt:
  enable: false

Second,add these fowlling codes into this file

Urblog Urblog name/themes/next/layout/_macro/post.swig

codes

        {% if post.image %}
        

          
        
        {% endif %}

If you change it correctly, this file will look like this.

      {% if is_index %}
        {% if post.description and theme.excerpt_description %}
          {{ post.description }}
          
          

            
              {{ __('post.read_more') }} »
            
          
          
        {% elif post.excerpt  %}
          {{ post.excerpt }}
+          
+        {% if post.image %}
+        

+          
+        
+        {% endif %}
+          
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->

Third,add these following codes into this file

Urblog name/themes/next/source/css/_custom/custom.styl

codes

//图片外部的容器方框
.out-img-topic {
  display: block;
  max-height:300px;
  margin-bottom: 24px;
  overflow: hidden;
}
//图片
img.img-topic {
  display: block ;
  margin-left: .7em;
  margin-right: .7em;
  padding: 0;
  float: right;
  clear: right;
}

Now,you have already finish this.
Note

add this image: url/the picture's path.

The introduction about the image summary is here.

A Little Summary

　　Today is my birthday.And I successfully set my blog very beautiful.Everything is fine!

2019.4.23

Local search

Some unknown bug was happened on the local search,so I have to remove this.

2019.4.24 22:35

Local search is fine now.

2019.6.13 10:50

Replaced the new domain name

Today, I changed the domain name for my blog. Although it cost a lot of money, it seems that it is really high.
But what's a little bad is that my visitor volume and pageviews are zero, and it's very uncomfortable.

2019.4.25 23:55

About the optimization of domestic access speed

I put a copy of my blog on gitee again. Domestic visitors should see that this access speed should satisfy you.
New home's name.

~~~2019.4.25 20:32~~~

Add Chinese Intentional analysis

Because the visitors to my blog are still domestic, some of the meanings written in English may not be clear, so I added a Chinese meaning analysis to some blogs. The specific operation is as follows.
In fact, it is a syntax of markdown.

<details>
<summary>Description</summary>
//Hidden
</details>

Rendering:

Summer is comming,come here and enjoy the cool snow.

Reference article: https://blog.csdn.net/stormdony/article/details/86001618

Add a file name is snow.js into \themes\next\source\js\src

Edit the contents of snow.js as

Choose one:

/*样式一*/
(function($){
  $.fn.snow = function(options){
  var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  documentHeight  = $(document).height(),
  documentWidth = $(document).width(),
  defaults = {
    minSize   : 10,
    maxSize   : 20,
    newOn   : 1000,
    flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
  },
  options = $.extend({}, defaults, options);
  var interval= setInterval( function(){
  var startPositionLeft = Math.random() * documentWidth - 100,
  startOpacity = 0.5 + Math.random(),
  sizeFlake = options.minSize + Math.random() * options.maxSize,
  endPositionTop = documentHeight - 200,
  endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  durationFall = documentHeight * 10 + Math.random() * 5000;
  $flake.clone().appendTo('body').css({
    left: startPositionLeft,
    opacity: startOpacity,
    'font-size': sizeFlake,
    color: options.flakeColor
  }).animate({
    top: endPositionTop,
    left: endPositionLeft,
    opacity: 0.2
  },durationFall,'linear',function(){
    $(this).remove()
  });
  }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({
      minSize: 5, /* 定义雪花最小尺寸 */
      maxSize: 50,/* 定义雪花最大尺寸 */
      newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});

Choose two:

/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
  window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

Then add these follwing contents in \themes\next\layout\_layout.swig

<!-- 雪花特效 -->
<script type="text/javascript" src="/js/src/snow.js"></script>

To avoid the effects of mobile access, you can add the following instead of the one above.

<!-- 雪花特效 -->
<script type="text/javascript">
  var windowWidth = $(window).width();
  if (windowWidth > 480) {
    document.write('<script type="text/javascript" src="/js/src/snow.js"><\/script>');
  }
</script>

Rendering:

Choose one:

Choose two:

Snowflakes only appear on the computer side is not the effect I want.But I still do not want to affect the reading of the mobile terminal.So I try to add a else on the basic of the contents above.Just like:

<!-- 雪花特效 -->
<script type="text/javascript">
  var windowWidth = $(window).width();
  if (windowWidth > 480) {
    document.write('<script type="text/javascript" src="/js/src/snow.js"><\/script>');
  }
  else
    document.write('<script type="text/javascript" src="/js/src/snow_point.js"><\/script>');
</script>

And make the Choose two become the file snow_point.js,and then reduce the number of snowflakes.The effect achieved now is enough to satisfy me.

CalendarCloud

I had add a calendarcloud into my blog successfully.But there is a bug:if some posts are in a same day,you can just come in one of them.
How can I solve this problem,absolutly I can't.
But you can click the month number so you can view a html which is full of post title which deploy in this month.

The Album Page

I have to admit that the access speed of this page is too slow, it has affected the experience of my blog, so I decided to temporarily remove this page, and then re-open this page after I find a perfect method.

The Email alert service

Valine-Admin
Follow this step by step, I have successfully configured it, are you sure not to comment here?

How to solve the problem that the symbol——' is too wide

Add these follwing codes int the config.yml in your hexo root directory.

marked:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: false

Add random quotes

Preview:

Main code:

<script language="JavaScript">  
<!-- Hide  
var a = Math.random() + ""          //Generate a random number
var rand1 = a.charAt(5)             //Get the fifth character of this number (actually from 0 to 9)  
quotes = new Array              //Create an array of messages
quotes[1] = '<center><--你不知道我有多想因为你而有底气说出舔狗舔到最后应有尽有--></center>'               //Assign ten randomly appearing texts here
quotes[2] = '<center><--人生就像一杯茶，不会苦一辈子，但总会苦一阵子--></center>'  
quotes[3] = '<center><--浮天水送无穷树，带雨云埋一半山--></center>'  
quotes[4] = '<center><--有一个夜晚我烧毁了所有的记忆，从此我的梦就透明了；有一个早晨我扔掉了所有的昨天，从此我的脚步就轻盈了--></center>'  
quotes[5] = '<center><--哭过喊过便会停止哭泣--></center>'  
quotes[6] = '<center><--人非圣贤，孰能无过？过而能改，善莫大焉--></center>'  
quotes[7] = '<center><--今日，吾爱，我们融为一体--></center>'  
quotes[8] = '<center><--人类的智慧就如同孔雀的羽毛。极尽炫耀，只是为了吸引异性--></center>'  
quotes[9] = '<center><--不管什么时候，能够改变世界的人都是一心追逐梦想的人。--></center>'  
quotes[0] = '<center><--人类文明从仰望星空那一刻起，就已经距离揭示宇宙奥秘仅有一步之遥了。--></center>'  
var quote = quotes[rand1]   //Choose a sentence from a random number
//-->  
</script>  
<script language="JavaScript">  
<!-- Hide  
document.write( quote )     //Write the words selected above into the page
// -->  
</script>

And there has some other way to achieve this effect.You can search it if you are interested in.

一言
Code:

<p id="hitokoto">:D 获取中...</p>

<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

Add countdown

Code:

<DIV id="CountMsg" class="HotDate">
<span id="td">00天</span>
</DIV>
<script type="text/javascript">
function getRTime(){
var EndTime= new Date('2020/10/23 10:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();

var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);


document.getElementById("td").innerHTML = "距离一切结束还有"+d+ "天";
document.getElementById("th").innerHTML = h+"时";
document.getElementById("tm").innerHTML = m+"分";
document.getElementById("ts").innerHTML = s+"秒";
}
setInterval(getRTime,1000);
</script>

Add a guide page and a new about page.

These days I spend all my free time on this,and now it's OK.
Welcome to give me your advices.

说来惭愧，只记得一个女生的生日，却连家人的都记不住。
爸 八月初四
妈 十一月初九
姐 二月初一