0%

Hexo-Next主题优化

经过几天的不断优化折腾,终于将博客搞得比较满意了,特此记录一下!本次配置基于Next7.0版本!

准备工作

开启github pages

首先注册一个github账号,登录后新建一个仓库

创建新仓库

然后填入仓库的名称和描述,注意:仓库的名称需为 用户名.github.io,然后点击创建

创建仓库

然后点击Settings设置,找到github pages,点击choose theme选择一个主题(可随便选,后面还可以改),然后博客首页就做好了。可以先在浏览器中输入用户名.github.io访问

Hexo环境搭建

首先是安装git

再安装nodejs

两个都默认安装即可

安装完成后创建一个存放Hexo组件的目录,我以blog目录为例

进入blog文件夹,右键选择git bash here

然后在命令行中输入npm install hexo -g ,开始安装Hexo

初始化hexo

输入 hexo -v,检查hexo是否安装成功

hexo -v

输入hexo init,初始化文件夹,有点慢,可能要耐心等待。 完成后显示Start blogging with Hexo这串提示就说明安装成功啦 。

输入npm install,安装所需组件

将Hexo和github pages联系起来设置 user name和email

​ 输入git config –global user.name “你的github用户名”

​ 输入git config –global user.email “你注册github时的邮箱”

进入blog文件夹,找到并打开_config.yml配置文件

打开配置文件

配置deploy属性

配置deploy

使用Hexo修改博客主题

我们可以在Hexo官网上选择一个我们喜欢的主题,点击主题名,进入发布人的github,我以next主题为例

复制主题链接

然后回到blog目录下,找到并进入theme文件夹

右键选择git bash here

输入git clone +你选择的主题链接

下载所选主题

将名字改为next,在blog文件夹下邮件选择git bash here,执行命令

1
npm install hexo-renderer-less --save

运行hexo s,浏览器输入localhost:4000查看页面预览

主题基础配置

配置基本信息

打开~/blog中的_config.yml文件,配置如下基本信息

基本信息

各个配置说明如下:
title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url

新增分类页

打开/blog文件夹,右键选择git bash here,执行命令

1
hexo new page categories

执行完成后,打开/blog/source/categories/index.md文件,在文件头内容中添加:

1
2
3
title: 分类
layout: categories
comments: false

新增标签页

参考新增分类页,执行命令:

1
hexo new page tags

执行完成后,打开/blog/source/tags/index.md文件,在文件头内容中添加:

1
2
3
title: 标签
layout: tags
comments: false

新增关于页

参考新增分类页,执行命令:

1
hexo new page about

执行完成后,打开/blog/source/about/index.md文件,在文件头内容中添加:

1
2
3
title: 关于
layout: about
comments: false

设置主题风格

打开/theme/next/_config.yml文件,搜索scheme关键字,选择想要启用的scheme,去掉注释#即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

设置菜单项的文件目录和对应图标

打开/themes/next/_config.yml文件,搜索menu_icons关键字,修改对应图标名称或者新增对应menu的图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
tags: /tags/ || tags
top: /top/ || signal
links: /links/ || link
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

设置菜单项显示中文

打开/theme/next/languages/zh-CN.yml文件,搜索menu关键字,修改对应中文或者新增

1
2
3
4
5
6
7
8
9
10
11
12
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
links: 友链
top: 排行
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404

设置唯一链接

打开/blog/_config.yml文件,搜索URL,修改url为你的url,root:/,设置permalink

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.dchengsd.com
root: /
permalink: posts/:abbrlink/

# abbrlink config
abbrlink: #abbrlink设置
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
### crc16 & hex
### https://iassas.com/posts/66c8.html
### crc16 & dec
### https://iassas.com/posts/65535.html
### crc32 & hex
### https://iassas.com/posts/8ddf18fb.html
### crc32 & dec
### https://iassas.com/posts/1690090958.html

右上角添加fork me on github入口

方法一:

1、首先到GitHub Corners选择自己喜欢的图标,然后copy相应的代码

2、然后将复制的代码粘贴到/themes/next/layout/_layout.swig文件中

下面一行

3、修改代码中href的值,替换成想要跳转的地址

实现效果如下:

![follow on me GitHub](/images/picture/Hexo-Next主题优化/follow on me GitHub.JPG)

方法二:

打开/themes/next/_config.yml文件,搜索github_banner,permalink修改为自己的github地址。

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/dchengsd/dchengsd.github.io
title: Follow me on GitHub

添加RSS

1、blog目录下,安装Hexo插件,执行命令

1
npm install hexo-generator-feed --save

2、打开/blog/_config.yml文件,搜索feed,修改如下:

1
2
3
4
5
6
7
8
9
# RSS订阅
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '

3、打开/blog/themes/next/_config.yml文件,搜索rss,修改如下:

1
2
3
# hexo-generator-feed required for rss support. Leave rss as blank to use site's feed link.
# Set rss to false to disable feed link. Set rss to specific value if you have burned your feed already.
rss: /atom.xml

实现效果如下:

RSS

添加动态背景

1、打开/themes/next/layout/_layout.swig文件,在之前添加代码

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

2、打开/themes/next/_config.yml文件,搜索canvas_nest,修改如下:

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines

实现效果如下:

动态背景

实现点击出现桃心效果

打开/themes/next/source/js文件夹,新建love.js文件并将如下代码复制进去,保存。

1
!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);

打开/themes/next/layout/_layout.swig文件末尾添加,如下代码:

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

实现效果如下:

点击桃心

修改文章内链接文本样式

打开/themes/next/source/css/_common/components/post/post.styl文件,在末尾添加css代码如下:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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; //底部分割线颜色
}
}

实现效果如下:

文章内链接文本

修改文章底部带”#”号的标签

打开/themes/next/layout/_macro/post.swig文件,搜索rel=”tag”,修改代码如下:

1
2
3
4
5
<div class="post-tags">
{%- for tag in post.tags.toArray() %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{%- endfor %}
</div>

标签

文章末尾添加“本文结束”标记

1、打开/themes/next/layout/_macro/目录,新建passage-end-tag.swig文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:18px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

2、修改/themes/next/layout/_macro/post.swig文件,在post-body之后,在post-footer之前((‘postBodyEnd’) 下边一行)添加如下内容:

1
2
3
4
5
6
<!--文末结束语-->
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

3、打开主题配置文件_config.yml,在末尾添加如下代码:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

实现效果如下:

文末标志

修改头像并旋转

打开主题配置文件_config.yml文件,搜索avater,修改如下:

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/header.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true

设置侧边栏社交小图标

打开主题配置文件_config.yml文件,搜索social,根据自己的需求修改,效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
GitHub: https://github.com/dchengsd || github
E-Mail: mailto:dchengsd@163.com || envelope
Weibo: https://weibo.com/u/3774425261 || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#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

social_icons:
enable: true
icons_only: false
transition: false

实现效果如下:

侧边栏社交小图标

实现统计功能

1、在blog目录下,右键选git bash here,执行命令:

1
npm install hexo-wordcount --save

2、修改主题配置文件_config.yml,配置如下:

1
2
3
4
5
6
7
# Post wordcount display settings
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true

实现效果如下:

统计功能

添加顶部加载条

打开主题配置文件_config.yml,修改如下(theme可根据个人喜好选择):

1
2
3
4
5
6
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

文章底部增加版权信息

1、打开/themes/next/layout/_macro目录,新建my-copyright.swig文件,并添加如下信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}

2、打开目录/themes/next/source/css/_common/components/post/,新建my-post-copyright.styl文件,并添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
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;
}

3、修改themes/next/layout/_macro/post.swig文件,在

之前添加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

4、修改themes/next/source/css/_common/components/post/post.styl文件,在末尾添加如下内容:

1
@import "my-post-copyright";

保存重新生成即可。
如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加copyright: true的设置

实现效果如下:

版权信息

隐藏网页底部powered By Hexo / 强力驱动

修改 themes/next/layout/_partials/footer.swig文件,隐藏或删除该信息,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--{%- if theme.footer.powered.enable %}

<div class="powered-by">
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}
{%- if theme.footer.powered.version %} v{{ hexo_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">
{%- set next_site = 'https://theme-next.org' %}
{%- if theme.scheme !== 'Gemini' %}
{%- set next_site = 'https://' + theme.scheme.toLowerCase() + '.theme-next.org' %}
{%- endif %}
{{- __('footer.theme') }} – {{ next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'}) }}
{%- if theme.footer.theme.version %} v{{ next_version }}{%- endif %}
</div>

{%- endif %}
-->

点击爆炸效果

1、打开/themes/next/source/js/目录中新建fireworks.js文件,添加代码如下:

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

2、修改 themes/next/layout/_layout.swig文件,在上面添加如下代码:

1
2
3
4
5
6
<!-- 配置爆炸效果 -->
{% 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/fireworks.js"></script>
{% endif %}

3、打开主题配置文件_config.yml,末尾添加如下内容:

1
2
# Fireworks
fireworks: true

实现效果如下:

点击爆炸

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!

本文标题:Hexo-Next主题优化

文章作者:Cheng Dong

发布时间:2019年11月11日 - 21:41

最后更新:2019年11月14日 - 00:45

原始链接:https://www.dchengsd.com/posts/b8ac865a/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。