Next主题美化(仅7.1版本)

2020年更新:此方法不适用于新版本Next主题!!!


博客主题更换为Next,本博文针对Next7.10主题,佛系填坑~
201904121
为了节省空间,图片我就不放了(才不是因为懒


本篇内容包括:

  • Next 主题的安装
  • Next 主题的配置
  • Next 主题深度美化

Next 主题的安装

Next主题安装和闪烁之狐一样,直接将克隆到博客文件夹即可,命令如下
git clone https://github.com/theme-next/hexo-theme-next themes/next
由于Next主题比较简洁,所以等待数秒即可安装完成
由于Next主题一直在更新,所以此处加一个更新命令:

1
2
cd themes/next
git pull

安装完成后到根目录下的_config.ymltheme:后添加next即可

Next 主题的配置

安装完成后还需要进一步配置主题

根目录下_config.yml的配置

Site设置

1
2
3
4
5
6
7
# Site
title: Siriusq
subtitle: Hello World!
description: 一只想变成程序猿的建筑狗
keywords:
author: Sirius
language: zh-CN

title: 填写标题
subtitle: 填写副标题
description: 简介
keywords: 关键词
author: 作者,文章中显示的作者名称
language: 设置语言,zh-CN是简体中文,en是英语,默认是德语

URL栏设置

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://Siriusq.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

url:填写博客在Github的二级域名,如 https://Siriusq.github.io
permalink:是生成博客页面时的路径名,一般是:year/:month/:day/:title/

翻页设置

共有两处,用于控制每一页显示多少篇博文

1
2
3
4
5
6
7
8
9
10
11
12
13
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 12
order_by: -date

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page

per_page:后设置博文数量,0代表不翻页全部平铺显示

Deployment设置

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:username/username.github.io.git
branch: master

branch:分支填写master

repo:后把username换成自己的用户名

主题目录下_config.yml的配置

文件中很多配置前面都带有#,删掉它就可以激活选项

网站Logo设置

1
2
3
4
5
6
7
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

把选好的图标放入\themes\next\source\images目录中并改成上面的文件名即可,注意图片尺寸

页脚设置

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
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 fontawesome, see: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#f08080"

# If not defined, `author` from Hexo main config will be used.
copyright: Siriusq

powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: false

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false

since: 表示网站成立的年份,不设置的话默认是当前年份,显示为© 2019
icon: 中设置年份后面的图标,默认是心形,想修改的话去Fontawesome选择图标,然后再name栏修改
animated: 用于设置心形是否跳动
color: 用于设置图标颜色,百度对照色表查就好
copyright: 显示图标后面的版权所属,也就是作者名,不设置的话默认显示根目录配置文件中的作者名
powered: 后面的栏目用于设定是否显示Powered by Hexo以及当前主题的版本信息,显示的话设为true
theme: 后面的栏目用于设定是否显示当前主题的版本信息,显示的话将设为true

版权信息

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: en

license:用于设置版权标准,具体可以去Creative Commons查看
sidebar:用于设置是否在侧边栏显示版权标准
post:用于设置是否在文章底部显示版权信息
language:用于设置语言

Github角标

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

enable:用于设置是否在页面右上角显示Github三角标
permalink:后面填写你的Github地址
title:用于设置鼠标移动到图标后显示的文字

侧边栏菜单设置

1
2
3
4
5
6
7
8
9
10
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
switch_lang: /en || language
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

||前表示页面的地址,后面表示显示的图标名称
about:用于设置关于页面,没有的话在Git bash中使用hexo new page "about"创建,然后打开\source\about\index.md就可以编写了
tags:用于设置标签功能,同样使用命令hexo new page "tags"创建,然后打开source\tags\index.md并在日期后面添加一行type: "tags",写博文时在顶部加上一栏tags: []即可设置标签,多个标签中间使用,分隔
archieves:用于设置归档页面
categories:用于设置目录页面,编辑博文时在顶部加上一栏categories:就可以为博文设置所属目录

主题选择

Next有四个主题可供选择

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

把想要的主题前面的#删掉即可

社交网站链接设置

在侧边栏可以设置显示社交链接,让更多人了解自己

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/Siriusq || github
E-Mail: mailto:siriuskevin@foxmail.com || 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
#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

||前输入你社交主页的链接即可,后面用于设置图标
E-mail:栏格式为mailto:邮箱地址,在win10系统可以调用系统邮件服务自动填写收件人

头像设置

用于设置是否在侧边栏显示头像

1
2
3
4
5
6
7
8
9
10
11
12
# 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.gif
# If true, the avatar would be dispalyed in circle.
rounded: true
# 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: true

url:后填写头像图片的路径,默认在\themes\next\source\images
rounded:用于设置是否显示圆形头像
opacity:用于设置头像透明度,1为不透明
rotated:用于设置头像鼠标移动到头像上时头像是否旋转

侧边栏目录设置

1
2
3
4
5
6
7
8
9
10
11
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# 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. You can set it in one post through `toc_max_depth` in Front Matter.
max_depth: 6

enable:用于设置是否开启侧边栏目录
number:用于设置自动编号
wrap:用于设置当标题长度超过侧边栏长度时是否自动换行
expand_all:用于设置是否展开全部目录,否的话会自动展开正在看的那部分
max_depth:用于设置自动生成目录的最大深度,也就是生成到几级标题

侧边栏显示设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
#position: left
position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
width: 320

# Sidebar Display, available values (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
# Click any blank part of the page to close sidebar (only for Muse | Mist).
dimmer: false

position:用于设置侧边栏在左边还是右边,把要选择的位置前面的#去掉再把另一个前面加上#即可,这个选项只对PiscesGemini两个主题起作用
width:用于设置侧边栏的宽度,默认MuseMist是320,PiscesGemini是240
display:用于设置侧边栏的显示方式,只对MuseMist两个主题起作用,可以挨个试一下
offset:用于设置侧边栏距离顶部介绍的距离,只对PiscesGemini两个主题起作用
onmobile:用于设置是否在手机等宽度较小的设备上显示侧边栏,只对MuseMist两个主题起作用
dimmer:用于设置点击屏幕空白处是否关闭侧边栏,同样只对MuseMist两个主题起作用

返回顶部按钮

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

enable:用于设置是否开启回到顶部按钮
sidebar:用于设置是否将按钮放到侧边栏中
scrollpercent:用于设置是否显示阅读进度百分比

开启阅读全文选项

用搜索找到这一段并把read_more_btn:设为true即可

1
2
3
# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

下面这一段用于设置自动生成阅读全文选项

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

length表示截止到的字符长度

这一段用于设置自动跳转到阅读全文选项之后的位置

1
2
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

设置完成后,在文章内加入<!--more-->字段就可以在首页隐去剩下的文字并显示阅读全文按钮了

代码块复制按钮

1
2
3
4
5
6
7
8
9
10
codeblock:
# Manual define the border radius in codeblock, leave it blank for the default value: 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true
# Style: only 'flat' is currently available, leave it blank if you prefer default theme
style:

enable:用于开启代码块右上角的复制按钮
show_result:用于设置是否显示复制成功提示

打赏

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
enable: false
animation: false
#comment: Donate comment here

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

enable:用于设置是否在文章末尾显示打赏按钮
animation:用于设置打上按钮是否显示动画
reward:后面的选项去掉前面的#即可开启对应的打赏,记得替换成自己的图片,路径在\themes\next\source\images

代码块高亮主题

Next主题内置了tomorrow代码高亮主题,一共有五个,可以去Tomorrow查看预览效果,在下面的highlight_theme:中改成自己想要的即可

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

书签

在左上角显示一个书签按钮可以跳转到上一次设置书签的位置
首先执行命令git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark安装bookmark插件
然后在下面的选项中将enable:设置为true

1
2
3
4
5
6
7
# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: true
# If auto, save the reading position when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

开启RSS

话说RSS好像也没什么人用了。。。。。。

安装

在博客根目录执行下面的命令安装RSS插件

1
npm install hexo-generator-feed --save

配置

打开博客根目录的配置文件_config.yml并在末尾添加下列代码

1
2
3
4
5
6
7
8
9
# RSS订阅支持
plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

页面搜索功能

开启站内搜索功能方便快速定位

安装

执行下列命令安装插件

1
npm install hexo-generator-searchdb --save

配置

打开Next主题的配置文件_config.yml并搜索local_search,修改为

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false

Next主题深度美化

写不动了,慢慢填吧,全都是闲的蛋疼加上的

顶部阅读进度条

在博文页面顶部添加Reading Progress进度条,表示阅读进度,Next主题已内置配置文件

安装

切换到Next主题文件夹

1
cd themes/next

安装模块到source/lib文件夹

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

修改配置文件

打开Next主题路径下的配置文件_config.yml,搜索reading_progress定位到如下代码并将enable:设置为true

1
2
3
4
5
6
# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
enable: true
color: "#ffc0cb" # 调整线条颜色
height: 2px # 调整线条高度

线条颜色可以在ATOOL查询颜色代码直接修改,默认颜色是青色,我修改的是粉色
顶部阅读进度条可能会和加载条重合,可以通过修改线条高度覆盖,我的线条高度设置成了3px

升级

切换到安装目录

1
cd themes/next/source/lib/reading_progress

更新

1
git pull

加载条

用于在网页加载的过程中显示加载进度,Next主题已支持PACE功能
有多种加载动画可选

  • pace-theme-big-counter
  • pace-theme-bounce
  • pace-theme-barber-shop
  • pace-theme-center-atom
  • pace-theme-center-circle
  • pace-theme-center-radar
  • pace-theme-center-simple
  • pace-theme-corner-indicator
  • pace-theme-fill-left
  • pace-theme-flash
  • pace-theme-loading-bar
  • pace-theme-mac-osx
  • pace-theme-minimal

安装

切换到Next主题文件夹

1
cd themes/next

安装模块到source/lib文件夹

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件

打开Next主题路径下的配置文件_config.yml,搜索pace定位到如下代码

1
2
3
4
5
6
7
8
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-flash

pace:设置为true
pace_theme:设置为上面Themes list:中的一种,主题样式可以在PACE查看

调整颜色

为了让进度条和主题背景相匹配,可以在./themes/next/source/lib/pace中找到相应主题的css文件并修改颜色配置
下面代码以pace-theme-flash.min.css示例

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}

.pace .pace-progress {
background: #ffc0cb;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #ffc0cb, 0 0 5px #ffc0cb;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #ffc0cb;
border-left-color: #ffc0cb;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

使用搜索功能搜索#,定位到颜色设置,上述代码中一共有5处,颜色替换方法如下

  • ATOOL查询颜色代码直接修改
  • 使用Visual Studio Code安装css插件直接点击#修改颜色
  • 前往PACE选择颜色并复制代码直接替换原文件中的代码

默认颜色都是蓝色,上述代码修改完后是粉色

升级

切换到安装目录

1
cd themes/next/source/lib/pace

更新

1
git pull

动态背景

Next主题默认提供了三种动态背景

Canvas-nest

我选用的是这个背景,比较好玩

安装

切换到Next主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改配置文件

打开Next主题路径下的配置文件_config.yml修改下列代码

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # 是否在手机上显示
color: "255,51,51" # RGB颜色设置
opacity: 0.5 # 线条透明度
zIndex: -1 # 显示级别
count: 160 # 线条的数量,越多越卡

如果想使用CDN加速的话需要设置

1
2
3
4
vendors:
...
canvas_nest: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest.min.js
canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest-nomobile.min.js

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-nest

更新

1
git pull

JavaScript 3D library

安装

切换到Next主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

修改配置文件

打开Next主题路径下的配置文件_config.yml修改下列代码,有三种风格可选,将一种设置为true即可

1
2
3
4
5
6
7
8
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

升级

切换到安装目录

1
cd themes/next/source/lib/three

更新

1
git pull

Canvas-ribbon

安装

切换到Next主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

修改配置文件

打开Next主题路径下的配置文件_config.yml修改下列代码

1
2
3
4
5
6
7
8
9
10
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: true # 是否开启
size: 300 # 宽度
alpha: 0.6 # 透明度
zIndex: -1 # 显示级别

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-ribbon

更新

1
git pull

鼠标点击特效

在网页中加入鼠标点击特效,目前有心形和爆炸两种特效,两者可以叠加,特效对性能较低的设备非常不友好,尤其是爆炸特效,在平板上卡成PPT,慎用……

心形特效

创建js文件

./themes/next/source/js中新建clicklove.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);

修改layout文件

打开./themes/next/layout/_layout.swig并在末尾添加以下代码

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

爆炸特效

创建js文件

./themes/next/source/js中新建firework.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)};

修改layout文件

打开./themes/next/layout/_layout.swig并在<head>中间添加以下代码

1
2
3
4
  <!-- 爆炸效果 -->
<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/firework.js"></script>

配置主题文件

打开./themes/next路径下的_config.yml文件并在末尾添加以下代码

1
2
# Fireworks
fireworks: true

Live2D看板娘

在网站角落加一个类似B站2233的看板娘,可以跟着鼠标焦点转,可以查看大佬的官方文档
(把你们的老婆放上去吧)

安装

  • 执行命令npm install --save hexo-helper-live2d安装Live2D模块

  • 挑选自己喜欢的模型样式并执行命令npm install packagename安装模型,把packagename替换成下面模型的名字,模型有:

    • live2d-widget-model-chitose
    • live2d-widget-model-epsilon2_1
    • live2d-widget-model-gf
    • live2d-widget-model-haru/01 (使用命令npm install --save live2d-widget-model-haru安装)
    • live2d-widget-model-haru/02 (使用命令npm install --save live2d-widget-model-haru安装)
    • live2d-widget-model-haruto
    • live2d-widget-model-hibiki
    • live2d-widget-model-hijiki
    • live2d-widget-model-izumi
    • live2d-widget-model-koharu
    • live2d-widget-model-miku
    • live2d-widget-model-ni-j
    • live2d-widget-model-nico
    • live2d-widget-model-nietzsche
    • live2d-widget-model-nipsilon
    • live2d-widget-model-nito
    • live2d-widget-model-shizuku
    • live2d-widget-model-tororo
    • live2d-widget-model-tsumiki
    • live2d-widget-model-unitychan
    • live2d-widget-model-wanko
    • live2d-widget-model-z16
  • 这里可以查看部分预览

配置

基础配置

  • 打开博客根目录下的配置文件_config.yml
  • 添加如下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: true # 开启Live2D
    scriptFrom: local # 插件来源
    pluginRootPath: live2dw/ # 插件根目录(相对路径)
    pluginJsPath: lib/ # 脚本文件路径(相对于插件根目录路径)
    pluginModelPath: assets/ # 模型文件路径(相对于插件根目录)
    tagMode: false # 是否标签模式
    debug: false # 是否开启调试模式
    model:
    use: live2d-widget-model-wanko # 选择模型
    display:
    position: right # 模型在页面上的位置
    width: 150 # 模型宽度
    height: 300 # 模型高度
    mobile:
    show: true # 是否在手机端显示
    react:
    opacity: 1 # 设置模型透明度

关于标签模式

在想插入的页面的</body>前插入{{ live2d() }}(swig),将tagMode设置为true, 然后插件将只会在拥有live2d标签的页面出现.
(这选项我没开,老婆当然是要放在所有页面上

仅供大佬食用

如果想使用自己制作的模型包,可以参考:

  • 新建一个目录, 用你的Node环境执行npm init,推荐使用live2d-widget-model-xxx的包名.
  • 在刚刚创建的目录下创建assets子目录, 把你的模型放进去.
  • 使用npm publish发布
  • 然后使用npm install --save live2d-widget-model-xxx安装
  • 调整配置文件中的模型名称就可以使用了

网易云音乐挂件

给博客加入背景音乐,支持网易云歌单,步骤如下:

  1. 首先登陆网易云音乐网页版
  2. 选择自己想要添加的歌单
  3. 分享歌单
  4. 点击右上角个人头像,进入我的主页
  5. 点击动态
  6. 找到自己刚刚分享的歌单
  7. 点击生成外链播放器
  8. 选择iframe界面并调整播放器样式与大小
  9. 播放模式个人建议不勾选自动播放
  10. 复制下方html代码
  11. 按照路径Hexo根目录\themes\next\layout\_macro打开sidebar.swig
  12. 在合适的位置加入以下代码,位置慢慢调整,中间iframe是刚刚复制的代码
    1
    2
    3
    4
    <div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=450 src="//music.163.com/outchain/player?type=0&id=908252389&auto=1&height=430">
    </iframe>
    </div>
  13. 播放器可能由于侧栏宽度不够显示不全,需要在主题配置文件中调整侧栏宽度
  14. 打开next主题下的_config.yml文件
  15. 搜索width,在下列代码中去掉最后一行width前的#号使其生效
    1
    2
    3
    4
    # Manual define the sidebar width. If commented, will be default for:
    # Muse | Mist: 320
    # Pisces | Gemini: 240
    # width: 300
  16. 根据需要调整侧栏宽度

折叠代码块功能

示例

用两个折叠块隐藏大段文字,减少页面占用,针对Next主题,示例如下

折叠内容

something you want to fold, include code block.

1
2
3
4
5
6
7
8
9
System.out.println("QAQ!");
console.log("QAQ!");
print("QAQ!");
printf("QAQ!\n");
cout << "QAQ!" << endl;
Console.WriteLine("QAQ!");
Response.Write("QAQ!");
alert("QAQ!")
echo "QAQ!"

编辑main.js

打开.\themes\next\source\js\post-details.js,在类似$(document).ready(function()的代码块下面插入如下代码

1
2
3
4
5
6
7
8
$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display","none");
});

添加 tag.js

打开.\themes\next\scripts路径并新建tag.js文件,代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
data.content = data.content.replace(rEscapeContent, function(match, content) {
return escapeContent(content);
});
return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
data.content = data.content.replace(rPlaceholder, function() {
return cache[arguments[1]];
});
return data;
});

添加 fold.js

在相同的路径下新建fold.js文件,代码如下

1
2
3
4
5
6
function fold (args, content) {
var text = args[0];
if(!text) text = "折叠";
return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

配置custom.styl

打开.\themes\next\source\css\_custom\custom.styl,在最后插入如下代码

1
2
3
4
5
6
7
8
9
10
.hider_title{
font-family: "Microsoft Yahei";
cursor: pointer;
}
.close:after{
content: "▼";
}
.open:after{
content: "▲";
}

用法

在要折叠的段落前后添加标签即可,如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% fold 折叠内容 %}
something you want to fold, include code block.
&#39;&#39;&#39;
System.out.println("QAQ!");
console.log("QAQ!");
print("QAQ!");
printf("QAQ!\n");
cout << "QAQ!" << endl;
Console.WriteLine("QAQ!");
Response.Write("QAQ!");
alert("QAQ!")
echo "QAQ!"
&#39;&#39;&#39;
{% endfold %}

这段代码就是上面示例的效果

感谢大佬@Ryan Miao


网站标题崩溃欺骗

在网页标题中添加崩溃欺骗效果,离开页面后标题会更改,切换回来后会恢复正常,用来忽悠人效果不错

新建文件

博客根目录\themes\next\source\js中新建crash_cheat文件,复制下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

其中document.title后的内容可以自定义,第一个是页面切出后标题显示的文字,第二个是切回页面后短暂显示的文字,第三个是原网页标题,此外记得把else中的/favicon.ico改为自己在public目录中的logo路径,否则返回仍然是页面崩溃时显示的符号

添加引用

博客根目录\themes\next\layout\_layout.swig的末尾添加下列代码

1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>

背景及半透明效果

Emmm…感觉背景太空,需要添点东西,

步骤如下:

  1. 将选好的背景图片放在博客根目录/themes/next/source/images
  2. 打开根目录/themes/next/source/css/_custom中的custom.styl文件
  3. 添加如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
background:url(/images/background.jpg);//图片路径
background-repeat: no-repeat;//是否重复平铺
background-attachment:fixed;//是否随着网页上下滚动而滚动,fixed为固定
background-position:50% 50%;//图片位置
background-size: cover;//图片展示大小
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;

#footer > div > div {
color:#000000;//底部文字颜色
}
}

.header-inner {
background: #ffffffe8;//设置侧边栏透明
opacity: 1;//这里设置为1,否则搜索栏会消失
}
.main-inner {
background: #fff;
opacity: 0.9;//设置文章主体透明度
}

注意事项

背景图片不要太大,最好压缩一下,太大网站加载速度会极慢
透明度不要调太低,影响阅读


修改超链接样式

打开themes\next\source\css\_common\components\post\post.styl并在末尾一串@import上面添加以下代码

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">#,将#替换为<i class="fa fa-tag"></i>


在文章结尾添加本文结束标志

新建文件

\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:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

修改文件

打开\themes\next\layout\_macro\post.swig,在post-body之后,post-footer之前添加下列代码

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

修改主题文件

打开主题配置文件_config.yml,并在末尾添加:

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

博文压缩

md文件转化为html后会有很多空格,js和css文件中也会有许多空格,js中的空格会影响性能

安装

执行下列命令安装hexo-neat插件

1
npm install hexo-neat --save

配置

打开博客根目录下的配置文件_config.yml并在末尾添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/clicklove.js'
- '**/firework.js'

注意事项

可能会有部分插件压缩后报错,在exclude里面添加对应的文件就可以取消压缩了


修改代码块颜色

打开.\themes\next\source\css\_custom\custom.styl文件并添加下列代码,color可以自定义设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//单行代码块颜色
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

网站运行时间

打开.\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
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("03/31/2019 00:00:00");
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
</div>

访客统计

Next主题已经内置了不蒜子统计,在Next主题的配置文件_config.yml中搜索busuanzi_count并将enable设置为trueicon可以自定义设置,下面是我的配置

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true # 总访客数量,在页脚显示
total_visitors_icon: user
total_views: true # 总阅读数量,在页脚显示
total_views_icon: eye
post_views: true # 单篇文章阅读数量,在标题下显示
post_views_icon: eye

字数统计和阅读时长统计

安装

在博客根目录下执行命令安装统计插件

1
npm install hexo-symbols-count-time --save

配置

在博客根目录配置文件_config.yaml中加入下列代码

1
2
3
4
5
symbols_count_time:
symbols: true # 文章字数
time: true # 阅读时长
total_symbols: true # 所有文章总字数
total_time: true # 所有文章阅读中时长

在Next主题配置文件_config.yaml中搜索symbol_count并修改为

1
2
3
4
5
6
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275

文章加密访问

文章加密插件目前与字数统计、目录生成功能存在冲突,例如一篇9k字的文章在字数统计中会显示43k字,进入文章后没有目录生成,谨慎使用

安装

在博客根目录执行下列命令安装插件

1
npm install --save hexo-blog-encrypt

配置

在根目录的_config.yml中使用下列代码启用插件

1
2
3
4
# Security
##
encrypt:
enable: true

使用

然后在文章md文件的标头添加相应字段就可以实现加密访问了,如

1
2
3
4
5
6
7
8
---
title: hexo
date: 2019-05-02 19:00:00
categories: Blog
password: 123456
abstract: 文章已加密
message: 请输入密码
---

其中password后面输入你想要的密码,abstract后面输入在首页展示的摘要,message后面输入密码输入框显示的信息


文章置顶

安装

在博客根目录执行下列命令安装插件

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

配置

打开.\themes\next\layout\_macro\post.swig并搜索<div class="post-meta">,在其中添加下列代码以开启标签

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

使用

在需要置顶的文章中加入top: true即可,如

1
2
3
4
5
6
---
title: hexo
date: 2019-05-02 19:00:00
categories: Blog
top: true
---

修改默认字体大小

Next主题默认的字体大小是14px,可以打开\themes\next\source\css\ _variables\base.styl并搜索$font-size-base,修改后面的数字就可以调整大小

自定义鼠标样式

打开.\themes\next\source\css\_custom\custom.styl并添加下列代码

1
2
3
4
5
6
7
// 鼠标样式
* {
cursor: url("图片链接"),auto!important
}
:active {
cursor: url("图片链接"),auto!important
}

图片链接的文件必须是ico文件

感谢大佬博客


图片懒加载

只在需要的时候加载图片,而不是一次性加载完成,加快速度,适用于图片较多的博客(像我一样懒得放图的就不用看了

安装

在博客根目录执行命令安装插件

1
npm install hexo-lazyload --save

配置

在博客根目录的配置文件_config.yml中添加下列代码

1
2
3
4
5
lazyload:
enable: true
onlypost: false #是否只在文章中开启懒加载
# className: #可选 e.g. .J-lazyload-img
# loadingImg: #可选 eg. ./images/loading.png 作为图片未加载时的替代图片

添加评论系统

2020年元旦更新:Gitment已经凉了,故换用Gitalk
评论系统采用的是Gitalk,与原来的Gitment差不多

安装

新版本的Next主题已经自带Gitalk了,我们只需要开启即可,下面的安装过程请忽略

执行命令安装gitment插件

1
npm i --save gitment

注册OAuth application

点击这里注册新的OAuth application

  • 其中Application name随便填就好
  • Homepage URLAuthorization callback URL填写自己的网站首页地址即可
  • Application description选填,记录这个东西是干什么的

填写完成后点击Register application,跳转页面会显示Client IDClient Secret用于以后登录

配置

打开Next主题的配置文件.\themes\next\_config.yml并搜索gitalk,将enable设置为true,并配置相关选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
enable: true
github_id: 你的github用户名 # Github repo owner
repo: 博客的仓库名称 # Repository name to store issues
client_id: 上一步生成的ID # Github Application Client ID
client_secret: 上一步生成的 # Github Application Client Secret
admin_user: 你的github用户名 # GitHub repo owner and collaborators, only these guys can initialize github issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en, es-ES, fr, ru, zh-CN, zh-TW
language:

初始化

部署到Github Page上之后转到要开启评论的文章的最下方,初始化并登录Github账号就可以评论了

注意

某些文章初始化评论时可能会报错Error:Validation Failed,(很迷的是爬梯子之后就好了。。。。。。)据说是issued的label长度溢出造成的,因为中文会被转码,但是issue是支持中文label的,所以解决方案为:
打开C:\Users\oo\OneDrive\Hexo\themes\next\layout\_third-party\comments\gitment.swig并搜索id,修改后面的值为decodeURI(window.location.pathname)

自定义404页面

因为网页是搭建在Github上的,所以默认的404页面就是Github的页面,可能和主题不太搭,而且也没有任何引导,所以可以添加一个和主题搭配的404页面,这里以我自己的404页面为例,另外自定义404页面必须要有顶级域名才可以,Github的二级域名不支持自定义404页面

创建页面

可以自己用Html写一个新的404页面出来,但是我比较懒,所以直接找的模板源码自己修改,节省时间,百度的时候发现404模板上有几个不错的模板,我选择的是acg-moe模板,点击下载源码然后解压即可

配置

添加标识

首先将解压后文件中的index.html复制到根目录下的.\source文件夹并重命名为404.html,然后打开文件并在顶部添加下列内容

1
2
3
layout: false
title: "404"
---

head部分

首先是head部分的内容,示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=11" id="mixia_vpid">

<title>页面被噬元兽吃掉了╭( `∀´ )╯</title>
<meta name=keywords content="404">
<meta name=description content="一只想变成程序猿的建筑狗">
<link rel="icon" href="https://siriusq.top/images/favicon.png">
<link rel="stylesheet" href="https://siriusq.top/lib/font-awesome/css/font-awesome.min.css?v=4.6.2">
<link rel="stylesheet" href="https://siriusq.top/404/404.css">
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>


</head>
  • <title>页面被噬元兽吃掉了╭(∀´ )╯`中间填写网页的标题,会显示在浏览器的标题栏上
  • <link rel="icon" href="https://siriusq.top/images/favicon.png">中设置网站图标的地址

js及css文件

head中的几个<link rel需要自己设置,源代码指向是原作者的网站,强迫症表示还是放在自己的网站上舒服
首先在.\source中新建文件夹并重命名为404,创建404.css404.js两个文件并复制下列代码保存,然后将herf=后的链接替换成自己的网页,只需要替换/404/前面的部分

404.css 404.js

body部分

下面是我的配置

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<body>

<span class="mobile btn-mobile-menu">
<i class="fa fa-list btn-mobile-menu__icon"></i>
<i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
</span>
</script><header class="panel-cover" style="background-image:url(https://siriusq.top/images/background.jpg)">

<div class="panel-main">

<div class="panel-main__inner panel-inverted">
<div class="panel-main__content">

<a href="https://siriusq.top/" title="前往Siriusq"><img src="https://siriusq.top/images/avatar.gif" width="150" alt="Noisky logo" class="panel-cover__logo logo"></a>


<hr class="panel-cover__divider">
<p class="panel-cover__description">对不起,您要找的页面被被噬元兽吃掉了╭( `∀´ )╯</p>
<hr class="panel-cover__divider panel-cover__divider--secondary">

<p class="panel-cover__description">也许能在主页找到相关内容</p>


<p class="footer">Siriusq © 2019 </p>

<div class="navigation-wrapper">
<div>
<nav class="cover-navigation cover-navigation--primary">
<ul class="navigation">
<li class="navigation__item"><a href="https://siriusq.top/" title="访问博客">主页</a></li>

<li class="navigation__item"><a href="https://siriusq.top/tags/" title="标签">标签</a></li>

<li class="navigation__item"><a href="https://siriusq.top/categories/" title="分类">分类</a></li>

<li class="navigation__item"><a href="https://siriusq.top/archives/" title="归档">归档</a></li>

<li class="navigation__item"><a href="https://siriusq.top/about/" title="关于">关于</a></li>
</ul>
</nav>
</div>

<div><nav class="cover-navigation navigation--social">
<ul class="navigation">
<!-- Github -->
<li class="navigation__item">
<a href="https://github.com/Siriusq" title="Github" target="_blank">
<i class="social fa fa-github"></i>
</a>
</li>

<!-- Email -->
<li class="navigation__item">
<a href="mailto:[email protected]" title="发邮件给我">
<i class="social fa fa-envelope"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="https://siriusq.top/404/404.js"></script>
<script type="text/javascript" src="https://siriusq.top/lib/jquery/index.js?v=2.1.3"></script>
</body>
  • <a href="https://siriusq.top/" title="前往Siriusq"><img src="https://siriusq.top/images/avatar.gif" width="150" alt="Noisky logo" class="panel-cover__logo logo"></a>中设置自己的头像地址及头像链接的网址,头像同样可以旋转
  • </script><header class="panel-cover" style="background-image:url(https://siriusq.top/images/background.jpg)">中可以设置网页的背景图片,路径可以在浏览器中按F12查看
  • <p class="panel-cover__description">对不起,您要找的页面被被噬元兽吃掉了</p>中可以设置两行文字
  • <p class="footer">Siriusq © 2019 </p>中可以设置网页页脚
  • 下面的几个<li class="navigation__item"><a href="https://siriusq.top/" title="访问博客">主页</a></li>可以自己设置标签和跳转的超链接,标签在</a>后填写,跳转的链接在a herf后填写,鼠标移动到标签上显示的文字在title中填写
  • <!-- Github -->后面可以设置自己的Github超链接,<!-- Email -->同理,在herf后面输入网页地址,在title中输入当鼠标移到图标上显示的提示,在<i class="social fa fa-github"></i>设置要用的图标

结尾部分

结尾部分的两个js也要替换成自己网站的链接,一个是前面的404.js,另一个是主题文件里的jquery文件,需要去自己的网站查看链接地址,我的是https://siriusq.top/lib/jquery/index.js?v=2.1.3

1
2
<script type="text/javascript" src="https://siriusq.top/404/404.js"></script>
<script type="text/javascript" src="https://siriusq.top/lib/jquery/index.js?v=2.1.3"></script>

结束

差不多就这些东西,美化真的是个大坑
201904121