Next主题美化(仅7.1版本)

发表于 更新于 分类于 本文字数： 10k 阅读时长 ≈ 38 分钟

博客主题更换为Next，本博文仅适用于Next7.10主题
201904121

为了节省空间，图片我就不放了（才不是因为懒）

本篇内容包括：

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

注意：此方法不适用于新版本Next主题

Next 主题的安装

Next主题安装和闪烁之狐一样，直接将克隆到博客文件夹即可，命令如下

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

由于Next主题比较简洁，所以等待数秒即可安装完成

由于Next主题一直在更新，所以此处加一个更新命令：

1
2
cd themes/next
git pull

安装完成后到根目录下的_config.yml在theme：后添加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
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com: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:用于设置侧边栏在左边还是右边，把要选择的位置前面的#去掉再把另一个前面加上#即可，这个选项只对Pisces和Gemini两个主题起作用
width:用于设置侧边栏的宽度，默认Muse和Mist是320,Pisces和Gemini是240
display:用于设置侧边栏的显示方式，只对Muse和Mist两个主题起作用，可以挨个试一下
offset:用于设置侧边栏距离顶部介绍的距离，只对Pisces和Gemini两个主题起作用
onmobile:用于设置是否在手机等宽度较小的设备上显示侧边栏，只对Muse和Mist两个主题起作用
dimmer:用于设置点击屏幕空白处是否关闭侧边栏，同样只对Muse和Mist两个主题起作用

返回顶部按钮

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
77
.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/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/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. 根据需要调整侧栏宽度

折叠代码块功能

示例

2022.5.13 Next8 已废弃
用两个折叠块隐藏大段文字，减少页面占用，针对Next主题，示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% fold 折叠内容 %}
something you want to fold, include code block.

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！"

{% endfold %}

编辑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设置为true，icon可以自定义设置，下面是我的配置

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 URL和Authorization callback URL填写自己的网站首页地址即可
  • Application description选填，记录这个东西是干什么的

填写完成后点击Register application，跳转页面会显示Client ID和Client 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.css、404.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:siriuskevin@foxmail.com" 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