Used for backing up personal settings, some scheme collected from the Internet.

Theme downloads and enable

Enter the command line, download NexT theme, enter:

git clone https://github.com/theme-next/hexo-theme-next themes/next

Modify the site profile _config.yml, find the following code:

## Themes: https://hexo.io/themes/
theme: landscapeb v

The landscape changed to next to.

Modify Subject Language

Open site profile, search language, find the following code:

author:
language:
timezone:

After the input language zh-CN`.

Note: There must be a space after the colon.

New label and classify interface

Open the theme configuration file, the search menu, find the following code:

menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

The tags and categories # in front of the delete, enter the command line, enter:

hexo n page tags
hexo n page categories

Enter the blog's home directory Hexo / source, find the folder tags and categories, respectively, enter and modify files within the folder. For example, first enter the tags folder, open index.md file, enter the date in the next line:

type: "tags"

Modify categories file folder under, just put the code into the above categories to tags.

Switch themes

next theme comes with four styles

Find the theme configuration file /next/_config.yml in: scheme, find the following code:

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

Select a style you like, remove the # in front, before other topics with the # can be.

Hidden bottom of the page powered By Hexo / Powered

打开 themes/next/layout/_partials/footer.swig

turn up:

{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

The beginning and end, respectively, add this code: , or delete.

Article add shadows

Open /themes/next/source/css/_custom/custom.styl, added:

.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

Browse through the pages shows the current progress

Open themes / next / _config.yml, search keywords scrollpercent, the false to true.

Local Search Local Search

Execute the following command at the root of the site:

npm install hexo-generator-searchdb --save

Edit site configuration file, add the following anywhere:

search:
path: search.xml
field: post
format: html
limit: 10000

Edit theme configuration file, enable the local search function:

# Local search
local_search:
enable: true

Set Avatar

Open the theme configuration file, locate the Sidebar Avatar fields:

# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: #/images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: false
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false

The url behind # deleted, and then put your avatar name into themes / next / source is avatar.jpg / images in

rounded : Set round Avatar

opacity : Set the opacity avatar

rotated : Set Avatar rotatable

Set up a site set-up time

In the theme configuration file, search for: since, you can modify the value of the latter since, for example:

since: 2019

Set up a website icon

In EasyIcon looking for in a (32 * 32) of the ico icon, or go to another site to download or make and icon name to favicon.ico, then placed the icon / themes / next / source / images there, and modify the theme configuration file:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

Modify the bottom of the article # tag number

Modify the template /themes/next/layout/_macro/post.swig
search rel = "tag"> #, # will be replaced<i class="fa fa-tag"></i>

Count website bottom

Change to the root directory, run the following code:

npm install hexo-wordcount --save

Then /themes/next/layout/_partials/footer.swig end of the file add:

<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

Click to add the effect of love

In / themes / next / source / js / src clicklove.js the new document, and then paste the copied clicklove.js following code file, as follows:

!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"==typeof e.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())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

In \ themes \ next \ layout_layout.swig end of the file add:

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

Click explosions

Click on the methods and documents that appear caring effect is about the same, first in themes / next / source / js / src built inside a called fireworks.js, the code is as follows:

"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)};

Open themes / next / layout / _layout.swig, the </body>write above the following code:

{% if theme.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/fireworks.js"></script>
{% endif %}

Open the theme configuration file, and finally wrote in it:

# Fireworks
fireworks: true

Dynamic background

next topic in 5.1.1 above

Open the next / layout / _layout.swig file

In </body>add the following code before, not on </head>the back:

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

Open the theme configuration file /next/_config.yml

Search elements canvas_nest, to be false to true.

next topic in the following 5.1.1

Open the next / layout / _layout.swig file

In </body>add the following code before, not on </head>the back:

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

Open the theme configuration file /next/_config.yml

:( add the following code can be placed on the inside surface of the last)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

Item Description

color: Line color, default: '0,0,0'; three numbers are (R, G, B)
opacity: Lines Transparency (0 to 1), default: 0.5
count: The total number of lines, default: 150
zIndex: Z-index attribute background, css attributes for controlling the position of the layer where default: -1

Modify article opacity

After setting the dynamic background, dynamic lines can interfere with the reading of the article, so we need to adjust the opacity of the background paper.

Modify themes \ next \ source \ css _custom \ custom.styl file, add the following code after:

.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}

Item Description

background: #Fff; white
opacity: 0.8; Opacity

Automatically change background image

And modify the dynamic background is similar.

Automatically replace the background is modified to add background css styles to achieve. Source is: https://source.unsplash.com/

This site not only offers a lot of high-definition Mito free, but also provides an interface api calls, very conscientious. Principle implemented here also called the interface of this site.
Modify themes \ next \ source \ css _custom \ custom.styl file, add the following code:

body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}

If you do not like the picture of this URL provided in the background and you can modify the url (inside the path). repeat, attachment, position is to adjust the position of the picture, is not repeated, without scrolling, and so on.

Static background

Open blog root directory /themes/next/source/css/_custom/custom.styl file, edit the following:

// Custom styles.
body {
background-image: url(/images/background.png);
background-attachment: fixed; // 不随屏幕滚动而滚动
background-repeat: repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
background-size: contain; // 等比例铺满屏幕
}

Then the background theme named background.png and put the root source / next images

Modify theme colors

Find the blog root directory \ themes \ next \ source \ css_custom \ custom.styl and open

Below lists the reference code blue theme, it can be used directly:

// 文章内链接文本样式
.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;
}
}
// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection {
background: #49b1f5;
color: #fff;
}
/* firefox */
::-moz-selection {
background: #49b1f5;
color: #fff;
}
// 修改网站头部颜色
.headband {
height: 3px;
background: #49b1f5;
}
.site-meta {
padding: 20px 0;
color: #fff;
background: #49b1f5;
}
.site-subtitle {
margin-top: 10px;
font-size: 13px;
color: #ffffff;
}
// 修改按键（button）样式
.btn {
color: #49b1f5;
background: #fff;
border: 2px solid #49b1f5;
}
// 按键（button）点击时样式
.btn:hover {
border-color: #49b1f5;
color: #fff;
background: #49b1f5;
}
// 鼠标移动至文章标题时的效果
.posts-expand .post-title-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #49b1f5;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}

Hexo Next to enable the theme and related settings

Theme downloads and enable

Modify Subject Language

New label and classify interface

Switch themes

Hidden bottom of the page powered By Hexo / Powered

Article add shadows

Browse through the pages shows the current progress

Local Search Local Search

Set Avatar

Set up a site set-up time

Set up a website icon

Modify the bottom of the article # tag number

Count website bottom

Click to add the effect of love

Click explosions

Dynamic background

next topic in 5.1.1 above

next topic in the following 5.1.1

Item Description

Modify article opacity

Item Description

Automatically change background image

Static background

Modify theme colors

Guess you like