Also published in Levi.Blog and OSChina

Add [Reading Quantity] etc. under the heading

In the presence of Hexo's Personalized Settings for Blogging This article talks about adding data statistics functions such as no garlic, and then personalizing the display of data. In the previous article, there was a JS code:

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

The reading statistics to be added now also depend on this code, which has been added to the page above and can be called directly here.
_Open / themes/next/layout/_macro/post.swig and find the label < div class= "post-meta"> </div> and add in the appropriate location within the label (such as between time and categroies or after categroies):

{% if not is_index %}
  <span id="busuanzi_container_page_pv">&nbsp;&nbsp;|&nbsp;&nbsp;Reading volume <span id="busuanzi_value_page_pv"></span> second</span>
{% endif %}

Of course, if you don't use garlic statistics, it doesn't matter. You can flexibly adapt the above code. If you don't understand, you can send me an email.

Change reading to heat (more personality)

_can also continue to modify, see many people's blog is not the number of reads (reading), but xxx degree, so you can continue to modify, first in the Next theme of the / themes/next/languages/zh-Hans file to find the number of reads, "these words, you can see that visitors in the post is defined as the number of reads," the "number of reads" here to "hot". Degree ".

So how to display it on the page? Open the layout/_macro/post.swig in the Next theme folder, add the Celsius sign to the file, and add a line under < span > C </span > under < span class= "lean cloud-visitors-count"</span>.

Modify the style of classification, etc. under the title of the article

_In Next theme, I use LeanCloud data statistics. The default style is to have a small eye in front of the statistics. I don't feel good. If I want to remove it, open / themes/next/layout/_macro/post.swig and find the label <i class="fa-eye"</i> and remove the following code:

<span class="post-meta-item-icon">
  <i class="fa fa-eye"></i>
</span>

Talk more about personalized settings

More about UA setting up embedded. JS localization

Note: I use the Next theme (other self-adaptations) you can take a little laziness and download me directly. embed.js Remember to modify your multiple id. Then put it in the theme next source js src folder. Open the file themes next layout scripts third-party comments duoshuo. swig, search for //static.duoshuo.com/embedded.js, and change it to / js/src/embedded.js. Add the corresponding CSS, open themes next source css main. styl, and insert the code at the beginning of the file. The code is below this article. Add More Talking CSS.
But I hope you can follow the following steps to set up your own, because impressive, not easy to appear'difficult and complicated disease'.

Localization of embedded.js

_Chrome package can be used to get the remote file address of the comment core script embedded.js: http://static.duoshuo.com/embedded.js. Open it in the browser and save it as the right-click. For Next topics (other self-adaptations), you can put them in the folder of theme next source js. Open themes next layout scripts third-party comments duoshuo. swig and search //static.duoshuo.com/embedded.js. Change it to / js/src/embedded.js.

_Fabricating swiftype. swig localization (this is not a multi-word setup, but the method is similar, written here for you to understand) can localize all slow-loading. js. Github currently responds very quickly. Other JS processed are: //s.swiftypecdn.com/install/v2/st.js in themes next layout partials search swiftype.swig.

Talk more about UA settings

Set up relevant js:

Open the embedded.js localized in the previous step and add the following code at the top:

//Administrator Judges Beginning
function sskadmin(e) {
    var ssk = '';
    if (e.user_id == xxxxxxxxxxxxxxxxx) {
        if (checkMobile()) {
            ssk = '<span class="ua"><span class="sskadmin">Blogger</span></span><br><br>';
        } else {
            ssk = '<span class="ua"><span class="sskadmin">Blogger</span></span>';
        }
    } else {
        if (checkMobile()) {
            ssk = '<br><br>';
        }
    }
    return ssk;
}
//Administrator Judges End
//Mobile Client Judgment Start
function checkMobile() {
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if (isiPad) {
        return false;
    }
    var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i) != null;
    if (isMobile) {
        return true;
    }
    return false;
}
//Mobile Client Judges End
//Apparent UA begins
function ua(e) {
    var r = new Array;
    var outputer = '';
    if (r = e.match(/FireFox\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_firefox"><i class="fa fa-firefox"></i> FireFox'
    } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon'
    } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> Baidu Browser'
    } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser'
    } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser'
    } else if (r = e.match(/MetaSr/ig)) {
        outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> Sogou Browser'
    } else if (r = e.match(/2345Explorer/ig)) {
        outputer = '<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345 Ace Browser'
    } else if (r = e.match(/2345chrome/ig)) {
        outputer = '<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345 Accelerate browsers'
    } else if (r = e.match(/LBBROWSER/ig)) {
        outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> Cheetah Security Browser'
    } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> WeChat'
        /*.split('/')[0]*/
    } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ Browser'
        /*.split('/')[0]*/
    } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ Browser'
        /*.split('/')[0]*/
    } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui Browser'
        /*.split('/')[0]*/
    } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_chrome"><i class="fa fa-chrome"></i> Chrome'
        /*.split('.')[0]*/
    } else if (r = e.match(/safari\/([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_apple"><i class="fa fa-safari"></i> Safari'
    } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
        var r1 = r[0].split("/");
        outputer = '<span class="ua_opera"><i class="fa fa-opera"></i> Opera'
    } else if (r = e.match(/Trident\/7.0/gi)) {
        outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> IE 11'
    } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
        outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> IE' + ' ' + r[0]
        /*.replace('MSIE', '').split('.')[0]*/
    } else {
        outputer = '<span class="ua_other"><i class="fa fa-globe"></i> Other browsers'
    }
    if (checkMobile()) {
        Mobile = '<br><br>';
    } else {
        Mobile = '';
    }
    return outputer + "</span>" + Mobile;
}
function os(e) {
    var os = '';
    if (e.match(/win/ig)) {
        if (e.match(/nt 5.1/ig)) {
            os = '<span class="os_xp"><i class="fa fa-windows"></i> Windows XP'
        } else if (e.match(/nt 6.1/ig)) {
            os = '<span class="os_7"><i class="fa fa-windows"></i> Windows 7'
        } else if (e.match(/nt 6.2/ig)) {
            os = '<span class="os_8"><i class="fa fa-windows"></i> Windows 8'
        } else if (e.match(/nt 6.3/ig)) {
            os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 8.1'
        } else if (e.match(/nt 10.0/ig)) {
            os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 10'
        } else if (e.match(/nt 6.0/ig)) {
            os = '<span class="os_vista"><i class="fa fa-windows"></i> Windows Vista'
        } else if (e.match(/nt 5/ig)) {
            os = '<span class="os_2000"><i class="fa fa-windows"></i> Windows 2000'
        } else {
            os = '<span class="os_windows"><i class="fa fa-windows"></i> Windows'
        }
    } else if (e.match(/android/ig)) {
        os = '<span class="os_android"><i class="fa fa-android"></i> Android'
    } else if (e.match(/ubuntu/ig)) {
        os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu'
    } else if (e.match(/linux/ig)) {
        os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux'
    } else if (e.match(/mac/ig)) {
        os = '<span class="os_mac"><i class="fa fa-apple"></i> Mac OS X'
    } else if (e.match(/unix/ig)) {
        os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix'
    } else if (e.match(/symbian/ig)) {
        os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS'
    } else {
        os = '<span class="os_other"><i class="fa fa-desktop"></i> Other Operating Systems'
    }
    return os + "</span>";
}
//Explicit UA ends

And then search:

data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + "</span>"),

_is added later

t += sskadmin(s.author) + "<span class=\"ua\">" + ua(s.agent) + "</span><span class=\"ua\">" + os(s.agent) + "</span>",

Adding Speaking CSS

Add the corresponding CSS, open themes next source css main. style, insert the code at the beginning of the file:

/*Blogger tag CSS starts*/
.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: 1;
}
/*Blogger Markup CSS End*/
/*Say more about UA*/
span.ua{
    margin: 0 1px!important;
    color:#FFFFFF!important;
    /*text-transform: Capitalize!important;
    float: right!important;
    line-height: 18px!important;*/
}
.ua_other.os_other{
    background-color: #ccc!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
}
.ua_ie{
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_firefox{
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_maxthon{
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_ucweb{
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_sogou{
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345explorer{
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345chrome{
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_mi{
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_lbbrowser{
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_chrome{
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_qq{
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_apple{
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_opera{
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}


.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
    background-color: #39b3d7!important;
    border-color: #46b8da!important;
    border-radius: 4px;
    padding: 0 5px!important;
}

.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_ubuntu{
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_mac{
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_unix{
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_nokia{
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
/*More about the end of UA*/

Setting up multi-talk and moving avatars

See more about the effects and CSS code. Custom CSS makes your comments more dynamic. Open the backstage and paste in the following code:

#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px;     /*Set the length and width of the image, and change it here according to your comment box*/
border-radius: 27px;     /*Set the image rounded corner effect, where I directly set more than width/2 of the pixels, that is, circular.*/
-webkit-border-radius: 27px;     /*Rounded corner effect: compatible with webkit browser*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf;     /*Setting Image Shadow Effect*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;     /*Change time is set to 0.4 seconds (change action is to rotate 360 reads for the following image)*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {
/*Setting CSS Styles for Mouse Hovering in Head Portrait*/    box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg);     /*Image rotation 360 degrees*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url(http://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;
}
#ds-recent-visitors .ds-avatar {
float: left
}
/*Hide and Say More about Bottom Copyright*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}

Recent Visitor Settings

The first step is to add code to the page

Add the following code to the page you want to add.

<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

Among them:

class="ds-recent-visitors"    //Specify a container to display the latest visitors
data-num-items="28"    //Show the number of recent visitors
data-avatar-size="42"    //Display the size of the latest visitor's Avatar
id="ds-recent-visitors"    //In order to adjust the style of recent visitors

My blog is implemented by generating a guest book page and adding the above code directly to guest book index. MD.

The second step is to modify the latest visitor style of the blog

_Modify the latest visitor's CSS style by saying more about background management > Settings > basic settings > customizing CSS.
_My whole talk about custom css, in which visitor style and comment style are unified. The code has been included in the previous section Setting up multi-talk and moving avatars It's in that code. You can also edit the code and change it to your favorite style instead of using it directly.

Add a message page for the Next theme of your hexo website

Well, some people will ask how your guest book was created, so now I'll write out the method.

Create a new guest book page:

hexo new page "guestbook"

Find your NexT theme config.yml (the idea is config.yml for Next theme, not config.yml for hexo site directory), file path themes next config.yml, add guest book to menu, as follows:

menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  # tags: /tags
  #commonweal: /404.html
  guestbook: /guestbook

Find your Next theme zh-Hans.yml file (my website is in simplified language), file path themes next languages zh-Hans.yml, add guest book: message board to menu, as follows:

menu:
  home: home page
  archives: File
  categories: classification
  tags: Label
  about: about
  commonweal: public welfare404
  guestbook: Leaving a message.

SEO optimization

Change the heading format of the home page to "Key words - website name - website description". Open the themes next layout index. swig file and find this line of code:

{% block title %} {{ config.title }} {% endblock %}

Change it to:

{% block title %}
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

message Settings for Blog Deployment

At the end of the file hexo node_modules hexo-deployer-git lib deployer.js, you can find this sentence:

Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}.

_

The diligent blogger has updated: {now ( YYYY-MM-DD HH: mm: ss})}.

Add README to the project home page

_The blog warehouse home page on Github is empty and there is no README. If README.md is placed in the source folder, the hexo g will be parsed into html files when it is generated and put into the public folder, which will be automatically deleted when it is generated.
The solution is simple. In the site configuration file, search skip_render:, add a space after its colon and then add README.md.

Blogger contact information:

E-mail: xuewending1995@gmail.com [Please indicate your intention]

GitHub: Levi.GitHub