Other structures,
Hexo4 quickly build a blog (a) quickly build a blog (b) change the theme of hexo4 quickly build a blog (C) beautize very comprehensive collection of many topics hexo4 quickly build a blog (d) writing skills including map bed and automatic map bed plug-in
It’s easy to set up a blog, but there are a lot of holes. I may have made some mistakes, please point them out in the comments. But there are tested ones. The version I’m using is Hexo4.0 + NexT7.6.
My personal blog
1. Add a blog icon
Such as:
To query favicon in the _config.yml file in the theme directory, just change the first two: small and medium, and the image will have 16 and 32 pixels
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
Copy the codeYou can see both the value of the attribute, / images actually complete path for: themes/next/source/images of this path to locate.
You can also define external URIs.
You can go to icon material: iconfont, easyicon. Download the size of 16 x16 and 32 x32 PNG format images, and then into the themes/next/source/images.
You can put any images you want to add to a theme in this directory.
2. Mouse click effect (choose one of two)
2.1 Special effects of hearts
Themes \next\source\images. Themes \next\source has a js file. Start a new clicklove.js file under Themes \next\source\js\ SRC (if not, create your own) and copy the following code into that file.
!function(e,t,a){function n(){c(".heart{width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }.heart:after,.heart:before{content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; }.heart:after{top: -5px; }.heart:before{left: -5px; }"),o(),r()}function r(){for(var e=0; e<d.length; e++)d[e].alpha<=0? (t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=004.,d[e].alpha-=013.,d[e].el.style.cssText="left:"+d[e].x+"px; top:"+d[e].y+"px; opacity:"+d[e].alpha+"; transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg); background:"+d[e].color+"; z-index:99999"); requestAnimationFrame(r)}function o(){var t="function"= =typeofe.onclick&&e.onclick; e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div"); a.className="heart",d.push({el:a,x:e.clientX- 5.y:e.clientY- 5.scale:1.alpha:1.color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style"); a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head") [0].appendChild(a)}function s(){return"rgb("+ ~ ~ (255*Math.random())+","+ ~ ~ (255*Math.random())+","+ ~ ~ (255*Math.random())+")"}vard=[]; e.requestAnimationFrame=function(){returne.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msReques tAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window.document);
Copy the codeThen at the end of the \themes\next\layout_layout.swig file add:
<! -- Page click little red heart --><script type="text/javascript" src="/js/src/clicklove.js"></script>
Copy the code2.2 Exploding Fireworks
Create a new firework.js file under themes\next\source\js\ SRC (if not, create your own) and copy the following code into that file.
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0.360) *Math.PI/180,a=anime.random(50.180),n=[- 1.1][anime.random(0.1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length- 1)],a.radius=anime.random(16.32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0.2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0.2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0; t<e.animatables.length; t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0; i<numberOfParticules; i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1.duration:anime.random(1200.1800),easing:"easeOutExpo".update:renderParticule}).add({targets:a,radius:anime.random(80.160),lineWidth:0.alpha: {value:0.easing:"linear".duration:anime.random(600.800)},duration:anime.random(1200.1800),easing:"easeOutExpo".update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments; clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461"."#18FF92"."#5A87FF"."#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2.2)},500),render=anime({duration:1/0.update:function(){ctx.clearRect(0.0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"! ==e.target.id&&"toggle-sidebar"! ==e.target.id&&"A"! ==e.target.nodeName&&"IMG"! ==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0.360) *Math.PI/180,a=anime.random(50.180),n=[- 1.1][anime.random(0.1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length- 1)],a.radius=anime.random(16.32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0.2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0.2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0; t<e.animatables.length; t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0; i<numberOfParticules; i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1.duration:anime.random(1200.1800),easing:"easeOutExpo".update:renderParticule}).add({targets:a,radius:anime.random(80.160),lineWidth:0.alpha: {value:0.easing:"linear".duration:anime.random(600.800)},duration:anime.random(1200.1800),easing:"easeOutExpo".update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments; clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461"."#18FF92"."#5A87FF"."#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2.2)},500),render=anime({duration:1/0.update:function(){ctx.clearRect(0.0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"! ==e.target.id&&"toggle-sidebar"! ==e.target.id&&"A"! ==e.target.nodeName&&"IMG"! ==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
Copy the codeThen at the end of the \themes\next\layout_layout.swig file add:
<! -- Exploding fireworks --><canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="/ / cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/firework.js"></script>
Copy the code3. Set your profile picture
In _config.yml in the themes directory (Themes/Next /), look for Avatar
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
Change the name of your avatar file to "Avatar" and place it in the appropriate path. If the suffix is different, change the suffix here, not the picture suffix
url: /images/avatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true
Copy the code4. Sidebar social icon Settings
In the topic directory, open _config.yml and query social
social:
GitHub: https://github.com/magicflung || github
#E-Mail: mailto:[email protected] || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname? call|chat || skype
#RSS: /atom.xml || rss
Copy the codeThen launch what you want and modify it to your own path. That’s all we have right now.
5. Modify the label icon at the end of the article
The default is “#”, which can be replaced with an icon. Once again, open the topic directory and query for tag_icon in _config.yml
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true
Copy the codeEffect:
6. Traffic statistics
Open _config.yml in the topic directory and query for busuanzi
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true # Whether to enable traffic statistics
total_visitors: false # Number of visitors to this site
total_visitors_icon: user
total_views: true # Total visits to this site
total_views_icon: eye
post_views: false # article views, but I don't like to use this because I don't show the number of views for each blog post on the front page of my site. Instead, I have to click on the blog post
post_views_icon: eye
Copy the codeBut I was configured when invalid, I baidu, find a solution, the original is not garlic son use seven cattle domain name was forced to expire.
In busuanzi-counter.swig in /themes/next/layout/_third-party/statistics, look at the front as shown:
I changed it. You changed SRC to:
https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
Copy the codeIn the /themes/next/layout/_partials/footer.swig directory, add the following line at the end to change the display position. I forgot if it was already there, and if there was the first one in the following code, if so add it in there. If it doesn’t work, just copy the one below.
{% -if theme.footer.powered.enable %}
<span id="busuanzi_container_site_pv""> <span class=" max-width: 100%; clear: both"busuanzi-value" id="busuanzi_value_site_pv"></span> times </span> {% -endif %}Copy the codeNote: Local test traffic will be very unusual at first, but normal after deployment, never mind.
7. Add site search
Git Bash:
sudo npm install hexo-generator-search --save
Copy the codeThen add the following code to the _config.yml file in the site directory without modification. I have tested that the following code can be configured without the plugin only indexing articles (POST) by default, and changing the value of path to all if pages can also be retrieved.
For details, see hexo-generator-search
# search
search:
path: search.xml
field: post
format: html
limit: 10000
Copy the codeFinally, in the _config.yml file in the topic directory, query local_search
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true # Enable site search
If automatic, the search is triggered by changing the input.
If manually, press enter or the search button to trigger the search.
trigger: auto
# display the first n results of each post, set to -1 to display all results
top_n_per_article: 1
Convert the HTML string to a readable string.
unescape: false
Preload the search data when loading the page.
preload: false
Copy the code8. Activate the read more button
In _config.yml of the topic directory, query: read_more_btn
# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true # start
Copy the codeEffect:
Now, as an extra note, you have to add a key at the beginning of every blog post where there’s a bunch of default key-value pairs: Description,
Then colon: :, then space, add your own paragraph.
However, having to add them each time is too cumbersome, so the Scaffolds file under the sites directory contains the POST file, which is the blog template that you click on to add general information for each blog. Mine is as follows:
---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
top:
description:
---
Copy the code9. Article top (choose one of the two, see which is easier)
Methods 9.1 a
In node_modules/hexo-generator-index/lib/generator.js of the site directory, change all the code to change the file
'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) { // Both articles have definitions of top
if(a.top == b.top) return b.date - a.date; // If the top value is the same, the articles are sorted in descending order
else return b.top - a.top; // Otherwise, sort the data in descending order according to the top value
}
else if(a.top && ! b.top) {// If there is a definition of top, then there is a definition of top.
return - 1;
}
else if(! a.top && b.top) {return 1;
}
else return b.date - a.date; // All articles are not defined in descending order by 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 codeYou can then add a top key to the post template, which is an integer, and the higher the value, the higher the first value.
9.2 method 2
Open Git Bash in your site directory, uninstall the previous overhead plug-in, and then install hexo-generator-index-pin-top.
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
Copy the codeYou can then add a top key to the post template, which is an integer, and the higher the value, the higher the first value.
This way you don’t have to modify the JS file.
Finally, you can use both. It’s a little weird not to have an overhead icon, so you can add one. In the Themes \next\layout\_macro post file, open the first query: post-meta.
<div class="post-meta">
Copy the codeThen add the following line to the div:
{% if post. Top %} < I class = "fa fa - thumb - tack" > < / I > < font color = 7 d26cd > top < / font > < span class = "post - meta - divider" > | < / span > {% endif %}Copy the codeEffect:
10. Add copyright information at the bottom of the article
10.1 one way
As simple as possible, query creative_Commons in the topic directory _config.yml
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: false
post: true # open
language:
Copy the codeHowever, I did not study how to change the style, I like the following way, after all, you can add style, text, etc.
10.2 Method 2 (More troublesome, but good-looking)
I used the direct copy of the code on the Internet, but in this code sweetalert external link does not know what happened, the access timed out, resulting in my blog access to an article is slow, I think there is something wrong. ** Here’s a hint: If your blog post is suddenly slow, open a Web tool and check for things that are loading too slowly. Consider whether to delete them or what’s wrong. ** As shown below: 11s loading.
So what went wrong was this:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Copy the codeI download a local JS and change it to local connection.
Click download and unpack sweetalert.min.js file into themes\next\source\js.
In themes\next\layout_macro, create a new my-copyright. Swig file and add:
{% if page.copyright %} <div class="my_post_copyright"> <script SRC = "/ / cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js" > < / script > <! </script> <p><span> </span>< /span> ">{{theme. Author}}</a></p> <p><span> </span>{{page.date.format("YYYY YYYY MM MM DD - HH:MM") }} < / p > < p > < span > original link: < / span > < a href = "{{url_for (page. The path)}}" title = "{{page. The title}}" > {{page. The permalink}} < / a > < span < I class="fa fa-clipboard" data-clipboard-text="{{page.permalink}}" Aria-label =" Copy successful!" > < / I > < / span > < / p > < p > < span > license agreement: < / span > reprint please keep the original link, and the author. </p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){clipboard. On ('success', function(){swal({title: "", text: 'success', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}Copy the codeThen, in themes\next\source\css_common\ Components \post, create a new my-post-copyright. Styl file and add our copyright style.
.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 codeThen in Themes /next/layout/_macro/post.swig, search for END Post BODY and add it in the next line:
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
Copy the codeFinally in the themes/next/source/CSS / _common/components/post/post styl file last added:
@import "my-post-copyright"
Copy the codeThen go back to the Scaffolds file with the POST file and add Copyright: true. This will add copyright information to each post and make it easier for others to copy your URL.
11. Add tips
In the topic file _config.yml, query: reward
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true # Turn on tipping
animation: true # Enable animation dither, you can try it yourself
#comment: Donate comment here.
reward:
wechatpay: /images/wechatpay.jpg # Put the wechat payment code
alipay: /images/alipay.jpg # Put the payment code of Alipay
#bitcoin: /images/bitcoin.png
Copy the code12. Encrypted access to articles
I don’t recommend it. It’s just front-end verification. Although the average person can’t figure it out.
13. Launch the code copy button
Open _config.yml in the theme directory and query copy_button.
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
copy_button:
enable: true # Enable the code copy button
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac # Code box style, I like to use the MAC, there are three options above can try
Copy the code14. Add site runtime to Footer
Find the following sentence in the /themes/next/layout/_partials/footer.swig directory.
{% -if theme.footer.theme.enable %}
Copy the codeThen add under this sentence:
<div id="days"></div> </script> <script language="javascript"> function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("11/29/2019 20:00:00"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=setzero(Math.floor(e_hrsold)); e_minsold=(e_hrsold-hrsold)*60; minsold=setzero(Math.floor((e_hrsold-hrsold)*60)); seconds=setzero(Math.floor((e_minsold-minsold)*60)); Document.getelementbyid ('days').innerhtml =" run "+daysold+" day "+hrsold+" time "+minsold+" minute "+seconds+" seconds "; } function setzero(i){ if (i<10) {i="0" + i}; return i; } show_date_time(); </script>Copy the codeIn this statement I put the original code comment, do not want to use. In case of confusion, stickers:
15. Implement article statistics function
Install a hexo-symbols-count-time plugin to count words and reading minutes.
npm install hexo-symbols-count-time --save
Copy the codeThen at the end of the site directory config.yml add:
symbols_count_time:
symbols: true # Article word count
time: true # Article reading time
total_symbols: true # Total word count of the site
total_time: true # Total reading time on the site
exclude_codeblock: false # Exclude code word count
Copy the codeIf you don’t like it, you can use false to disable it. In addition, he counted the number of words in the article, including Spaces and punctuation marks, which may lead to incorrect and large number of words in the article.
Effect:
16. Modify the blog directory
Query toc in _config.yml of the topic directory
# Contents in the sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true Whether to start the blog target
# Automatically add list numbers to directories.
number: false
# If true, all words will be placed on the next line if the title width is greater than the width of the sidebar. width.
wrap: false
# If true, all levels of TOC in the post will be displayed, not the active part of it.
expand_all: false
# The maximum depth of the generated subtitle.
max_depth: 6
Copy the code17. RSS feeds (not necessary)
Reason: RSS feeds allow you to subscribe to article content. Here it is: You don’t have to go to favorites every time
Start by opening the Git Bash installation in your site directory
npm install hexo-generator-feed --save
Copy the codeThen open _config.yml in the site directory and add:
# RSS
plugins: hexo-generate-feed
Copy the codeThen look for RSS in _config.yml of the site directory
Then uncomment it, that is, turn it on, and there is no need to create the page, it will be generated automatically
RSS: /atom.xml || rss
Copy the codeAnd then deploy it to the website and you can see it, but when we click on it it’s a bunch of code, we need to install an RSS reader plug-in and search in the browser
RSS, Google Store generally don’t board, board to check the same RSS on the line, that in Firefox additional tools search, the first is the following:
To install this, use:
https://flunggg.cn/atom.xml
Copy the code18. GitHub Fork Me
The GitHub jump button appears in the upper right corner of our website, which is similar to the social icon in the sidebar
Query github_banner in the topic directory _config.yml
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true # open
permalink: https://github.com/magicflung # Change it to your Github homepage
title: Follow me on GitHub
Copy the code19. bookmark
Bookmark is a plug-in that allows users to save their reading progress. Users can save the scrolling position by clicking the bookmark icon in the upper left corner of the page. The next time they visit your blog, they can automatically restore the last scrolling position of each page.
Query bookmark in the topic directory _config.yml
bookmark:
enable: true # open
# Customize the color of the bookmark.
color: "#836FFF" # Custom colors
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto Reading progress will be automatically saved
Copy the codeEffect:
20. Add LazyLoad (can’t coexist with the following image when you click full screen)
For the picture to carry on the lazy loading, visits the picture location to request the picture resource, so can improve the visit speed of the blog, saves the traffic. Let’s copy the whole thing.
npm install --save lozad
Copy the codeThen in the configuration file _config.yml of your theme directory, query lazyLoad
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: true # open
Copy the code21. Display current browsing progress (both can coexist)
21.1 one way
Query scrollPercent in the topic directory _config.yml, which defaults to false and changes to true
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true # open
Copy the code21.2 way 2
Query reading_progress in the topic directory at _config.yml
# Reading progress bar
reading_progress:
enable: true # open
# Available values: top | bottom
position: top # top will appear at the top of the page, and bottom will appear there
color: "#836FFF" # Color can be modified
height: 3px
Copy the code22. Footer/Footer Settings
Query footer in the topic directory _config.yml
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
#since: 2019
# Icon between year and copyright info.
icon:
# Icon name in the Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart # can modify pictures, can go to https://fontawesome.com/v4.7.0/icons/ to find
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#F5F5F5" # icon color
# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:
# Powered by Hexo, set to false if you don't like it
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true
If you don't like the topic, you can use false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
If the website has a record number, you can fill in the record number here
# Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
beian:
enable: false
icp:
# The digit in the num of gongan beian.
gongan_id:
# The full num of gongan beian.
gongan_num:
# The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
gongan_icon_url:
Copy the codeSwig can also be modified in themes\next\layout_partials footer. Swig can be modified in this file as well as manually remove or add things. As my:
23. Add Valine comments
There are many kinds of comment systems, and you can only choose one.
I myself like to use off-login comments, which is when someone occasionally says something but finds they have to log in. The commenting system is Valine, and here’s the tutorial:
23.1 registered LeanCloud
Click on LeanCloud to sign up for an account. Click on the console in the upper right corner to jump to sign up. After 2019-10-1, you need to customize the registered domain name to continue to provide services. If you feel troubled, you can move to the international version of LeanCloud international edition.
23.2. Creating an application
After registration, real name verification, email verification and so on.
Click Create App, enter a name, and create it directly.
23.3. Set the Web security domain name and enter your own domain name
The goal: Data security.
Open the app and go to Settings > Security Center. Look below and include all the urls that lead to your site.
23.4. Obtain the APP ID and APP Key
Open as follows:
Then look up valine in the _config.yml file in the topic directory and copy the above two into it
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true # open
appid: # Add your appID
appkey: # Add your appKey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: monsterid # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: true # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
avatar_cdn: https://www.gravatar.com/avatar/
Copy the codeThe renderings look like this:
Open themes\next\layout_third-party\comments and delete the third one. Mine has already been deleted:
You can also choose the Gitalk comment system, which I won’t talk about. Want to own Baidu.
24. Vline email comment notification
Every time someone comments on our blog post, we can use this plugin to know by email.
The following plug-in is new and has several advantages:
- Perfect email notification, custom SMTP send frequency and content is no longer limited
- Akismet-based spam comment automatic tagging and filtering
- Comment management, avoiding direct manipulation of the database
Effect:
1. We still need to use Leancloud to open the app we just created, as shown in the picture: modify the content of the border on the right. This is the configuration reply template.
Note: please modify the link to your blog or website home page.
<p>Hi, {{username}}</p>
<p>You have received a new response to your {{appName}} comment, please check it out:</p>
<p><a href="Your homepage link" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">Check immediately</a></p>
Copy the code2. Still in Leancloud, open the Cloud Engine – Settings and copy the following code into it:
https://github.com/DesertsP/Valine-Admin.git
Copy the code
Then, again here, click Deploy, as shown:
I used someone else’s image above, because I clicked on it myself and it was the image below:
And then wait for the deployment to complete, which takes a long time.
3. Then go back to the Cloud Engine – Settings, as shown: Find the custom environment variables
Information to be configured:
| The variable name | The instance | instructions |
|---|---|---|
| SITE_NAME | flunggg | Name of the website |
| SITE_URL | flunggg.cn/ | Web site address |
| SMTP_HOST | smtp.qq.com | QQ mailbox for this, other check yourself |
| SMTP_PORT | 465 | Https mail port |
| SMTP_USER | [email protected] | Fill in the QQ mailbox here, and then someone’s comments will be sent to our mailbox |
| SMTP_PASS | Add the SMTP password obtained by the mailbox | |
| SENDER_NAME | XXX Blog – Comment alerts | The nickname for sending the message |
| SENDER_EMAIL | Sender email address, same as above QQ email on the line | |
| ADMIN_URL | Managing the review background. I’ll talk about that later |
4. How to apply for SMTP, directly look at the picture, I use QQ mailbox, you want to use other have to check. Copy the STMP password here when enabled.
5. After setting the secondary domain name, you can access the comment management background. Again, find the Web hosting domain name below here
Now it seems that the default is to give you one, which cannot be changed, and then copy this domain name to ADMIN_URL of the above environment variable.
We also need the password, username, need to set here, just fill in the email, password, username, these three fields, use username or email login.
Then restart the instance
Finally, go to the domain name and type in username or email. You can manage our comments section.
LeanCloud sleep policy
The free LeanCloud container has a mandatory sleep policy and does not run 24 hours a day:
- You must sleep for six hours a day
- If there is no external request within 30 minutes, the device sleeps.
- If there is a new external request instance after hibernation, it will start immediately (but will fail to send mail when activated).
After analyzing the above strategy, if you don’t want to pay, the best solution is to set a timer and visit every 20 minutes from 7 to 23 PM every day, so that the mail service is normal for most of the day.
25. Valine profile photo Settings
We can modify the profile picture of comments. There are several types of profile picture of passers-by. The default is the first one
In the _config.yml file in the theme directory, look for Avatar in valine and modify the icon above
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
...
avatar: monsterid # Gravatar style.Copy the codeIf you change your avatar and it doesn’t update, don’t panic, because gravatar.cat.net has a 7 day cache, wait quietly
Then you can also set up your own custom avatar, log in gravatar, register your account and set up your avatar, and then when Valine comments, enter the email we just signed up for and it will show you our custom avatar. My Settings are as follows:
26. Add the number of times the article is read
Again, use Leancloud.
Query leancloud_visitors in the topic directory _config.yml
! [23](D:\myblog\blog\source\_posts\ hexo4-next7 build blog (四)\23.png)# Show number of visitors of each article.
# You can visit https://leancloud.cn to get AppID and AppKey.
# AppID and AppKey are recommended to be the same as valine's for counter compatibility.
# Do not enable both `valine.visitor` and `leancloud_visitors`.
leancloud_visitors:
enable: true # open
app_id: # Add your Leancloud appId
app_key: # Add your Leancloud appKey
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false # the default
betterPerformance: false # the default
Copy the codeClick on the app you just created (comment on that one) and go to Settings -> App Keys for Id and Key. Copy and paste that up there. And then in that application, there’s one called Store, click on it, and you see create Class, create Counter.
27. Url persistence
We can see that hexo’s default generated article address path is [site name/year/month/day/article name].
This link is unfriendly to search crawlers, its URL structure is more than three layers deep.
I recommend installing hexo-AbbrLink:
npm install hexo-abbrlink --save
Copy the codeThen, in the site directory, query permalink
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://flunggg.cn/ # Here I fill in my own domain name, do not move if there is no domain name
root: /
permalink: archives/:abbrlink.html # the this
abbrlink:
alg: crc32 # crC16 (default) and CRC32
rep: hex Dec (default) and hex
Copy the codeEffect:
28. Use of nofollow tags
Reducing outbound links effectively prevents weight dispersion. Simply put, if webpage A has A link to webpage B, but Webpage A adds rel=”nofollow” to the link, the search engine will not count webpage A as the backlink of webpage B. Search engines that see this tag may reduce or remove the link’s voting weight altogether. (Baidu Encyclopedia)
Install plug-in:
npm install hexo-autonofollow --save
Copy the codeThen add it under _config.yml in the site directory
# External link optimization
nofollow:
enable: true
exclude: # Exception links can be placed here
- 'yousite'
Copy the codeIn this way, exceptional links will not be nofollow.
29. Disable automatic numbering of Articles contents
In _config.yml in the subject directory, search for toc
toc:
enable: true
# Automatically add list number to toc.
number: false # Cancel automatic numbering
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: true
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6
Copy the code30. Background (Don’t co-exist)
30.1 Rain code (the one I’m currently using)
Here we go. The first time I found this was a surprise.
In the themes\next\source\js\ SRC directory, create a new file named Digitalrain-js. Then add the following code:
window.onload = function(){// get the canvas object var canvas = document.getelementById ("canvas"); Var context =canvas.getContext("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height; Var W = window.innerWidth; //var H = window.innerHeight; // Set the canvas width and height to canvas.width = W; canvas.height = H; Var fontSize = 12; Var colunms = math.floor (W /fontSize); Var drops = []; // Initialize a starting position for each textfor(var i=0; i<colunms; i++){ drops.push(0); } // Move the text var STR ="WELCOME TO WWW.ITRHX.COM"; //4:fillText(str,x,y); The principle is to change the coordinate position of y // painting functionfunction draw(){
context.fillStyle = "Rgba (238238238, 08)"; // context.fillrect (0,0,W,H); // Style the font context.font ="600"+fontSize+"px Georgia"; // Add a color to the font context.fillstyle = ["#33B5E5"."#0099CC"."#AA66CC"."#9933CC"."#99CC00"."# 669900"."#FFBB33"."#FF8800"."#FF4444"."#CC0000"][parseInt(Math.random() * 10)]; //randColor(); RGB, HSL, standard, hexadecimal color // can be written to the canvasfor(var i=0; i<colunms; i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); // If you want to change time, you must change its starting point each timeif(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColorVar r = math.floor (math.random () * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256);return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,35);
};
Copy the codeThen in the _layout.swig file under the themes\next\layout directory, add the following code to
:
<! -- Digital rain --> <canvas ID ="canvas" width="1440" height="900" ></canvas>
<script type="text/javascript" src="/js/DigitalRain.js"></script>
Copy the codeAlso, look for custom_file_path in the configuration file _config.yml in the topic directory
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
mixin: source/_data/mixins.styl
style: source/_data/styles.styl
Copy the codeThese files can be used to customize CSS, just turn them on (leave the # off). Then create the file based on the path, or you can customize the file path and create it. I added the following code to source/_data/styles.styl:
canvas {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: -1;
}
Copy the code30.2 Custom background image
To open a CSS file path as above, add code:
// Add background image
body {
background: url(/images/background.jpg); // The background you gave me
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
top: 0;
left: 0;
z-index: 2 -;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
background-size: cover;
}
Copy the code30.3 Other background
For other backgrounds, you can query canvas_nest and canvas_ribbon in the theme directory configuration file _config.yml. I won’t mention canvas_nest and canvas_ribbon. You have to install it to open it.
31. Web page title spoof (transfer, have posted reprint address)
Effect:
When users visit your blog and click on another page, we can make fun of the page title and call them back. First, create a new funnytitle. js file under the directory \Hexo\themes\hexo-theme- SPFK \source\js and fill it with the following code:
<! -- Browser funny title -->var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange'.function () {
if (document.hidden) {
$('[rel="icon"]').attr('href'."/img/trhx2.png");
document.title = 'Worry (●-' bluei -) Blue you go! ';
clearTimeout(titleTime);
}
else{$('[rel="icon"]').attr('href'."/img/trhx2.png");
document.title = 'ヾ(afraid of ∀ 3) Blue you'll be back! ' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000); }});Copy the codeThen in the _layout.swig file under the themes\next\layout directory, add the following code to
:
<! -- Browser funny title --><script type="text/javascript" src="/js/src/FunnyTitle.js"></script>
Copy the code32. Some styles
Look for custom_file_path in the configuration file _config.yml of the topic directory again
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
mixin: source/_data/mixins.styl
style: source/_data/styles.styl
Copy the codeAdd the following code to source/_data/styles.styl: All of the following attributes can be viewed on your own website by pressing F12. My CSS is copied from others, their own CSS.
Posts-expand. Post-eof {margin: 4em auto 4em; background: white; } // title bar. Site-meta {// these custom added} // bottom text. Footer-inner {font-size: 17px; color: #262626; font-family: 'EB Garamond',"Noto Serif SC",sans-serif; font-weight: bold; } .fa-heart { color: red; } .post-meta-item-icon { color: red; }.footer {// these custom additions} // change the main transparency. Main -inner {background: #000; Opacity: 0.90; padding-right: 3px; padding-left: 3px; Margin-top: 30px; margin-top: 30px; margin-top: 30px; margin-bottom: 30px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); } // @media (max-width: 767px) {. Post-block {padding-right:10px; } .posts-expand .post-eof { margin: 4em auto 4em; background: white; }}Copy the code33. Some modifications
For example, the default here is very long, I have changed now, too long will cause bad display on the phone, so you can change it
- PC:
- Mobile client:
Change it in the post.swig of themes\next\layout\_macro. It’s basically a line break.
Search: if theme. Leancloud_visitors. Enable. Then add the following code to this:
{# add line break #}<br>
Copy the codePlease give me a thumbs up if you can help
Reference:
Xiaoding’s personal blog
Comment mailbox Reference
Valine official
Rain code, title spoof
Hexo4.0-next7.2.4 Theme optimization configuration