Hexo框架(三):Next主题配置及美化

前言

本篇设置基于NEXT主题7.7.2版本!

Hexo框架允许我们更换自己喜欢的主题,用于构件不同风格的主题,因为我个人比较喜欢简洁风,所以我选择了Next主题。Next主题也是特别常用的一款主题,如果你也和我一样喜欢简洁的风格,可以对我的配置进行参考。

在正式开始配置之前,我们需要明确以下东西 :站点配置文件 主题配置文件

  • 在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml

  • 一份是站点配置文件,位于站点根目录下,用于网站的基础配置

  • 另一份是主题配置文件,位于thems目录下,用于主题相关的配置

  • 不同的主题会有不同的配置文件,主题配置文件通常有主题作者提供

注意:目前我已经更新至最新版本,目前采用了全新的配置方式,这里的主题配置文件,均指hexo/source/_data目录下的next.yml文件,你可以点击这里查看:关于博客主题持续更新的问题和我的新配置方式

安装Next主题

下载Next

  • Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。具体到 NexT 来说,安装步骤如下。

    :我们这里使用社区维护的最新版本。

  • 我们使用Git,克隆最新版本的方式进行安装,之后的更新我们也可以用 git pull 来进行快速更新,而不用再次下载压缩包替换

  • 在终端窗口下,定位到Hexo站点根目录,在终端中输入:

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

启用主题

  • 与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先使用hexo clean清除缓存,然后使用hexo g 生成文件,然后使用hexo s来运行本地服务。当命令行输出中提示:

1
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。

image-20200321144825051

现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

Hexo基础配置

现在我们就正式开始配置,以下内容均为 站点配置文件

1
2
3
4
5
6
7
title: #网站的标题
subtitle: '' #网站副标题
description: '' #网站描述
keywords: #网站关键字
author: #网站作者
language: zh-CN #语言 zh-CN简体中文
timezone: '' #时区,默认就好
1
2
url:  #网站地址 比如:https://yourname.github.io
root: / #网站根目录
1
2
#网站的url格式
permalink: :category/:title/
1
2
3
4
5
6
7
#自动提交到仓库,可以设置多个仓库
deploy:
type: git
repo:
GitHub: https://github.com/yourname/yourname.github.io.git
Gitee: https://gitee.com/yourname/blog.git
branch: master
1
2
#设置主题为next
theme: next

Next主题设置

以下配置主要基于更高版本的Next7,下面配置项如无特别指明,均为主题配置文件中的配置项

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持四种 Scheme,他们是:

  • scheme: Muse
  • scheme: Mist
  • scheme: Pisces
  • scheme: Gemini

Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有四行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。我个人选择Gemini。

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

设置语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

1
language: zh-CN

目前 NexT 支持的语言如以下表格所示:

语言代码设定示例
Englishenlanguage: en
简体中文zh-Hanslanguage: zh-CN
Françaisfr-FRlanguage: fr-FR
Portuguêsptlanguage: pt or language: pt-BR
繁體中文zh-hk 或者 zh-twlanguage: zh-hk
Русский языкrulanguage: ru
Deutschdelanguage: de
日本語jalanguage: ja
Indonesianidlanguage: id
Koreankolanguage: ko

设置菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件,修改以下内容:

  • 设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。

设置菜单项的显示中文文本

打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字,修改对应中文或者新增。
最新版本此方法已经修改:你可以点击 这里 查看其中的第3.2节。

1
2
3
4
5
6
7
8
9
10
11
12
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
# 新增menu
catalogue: 目录

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

打开 themes/next/_config.yml 文件,搜索 menu 关键字,修改对应图标名称或者新增对应 menu 的图标。各个菜单项通过 # 注释开启或关闭。

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

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

除了 homearchives , 后面都需要手动创建这个页面

创建菜单项对应文件目录

设定好上面后,我们hexo s启动本地服务器预览,就可以看到网页上出现了对应的文件目录。更改目录的位置即可调整顺序。比如我习惯的:

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

网页显示:

image-20200320102717504

但是,此时我们还没有创建对应的页面,比如点击分类,会报错:Cannot GET /categories/

下面我们就创建上面对应的页面:

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建页面:

1
2
3
4
5
6
#分类
hexo new page "categories"
#标签
hexo new page "tags"
#关于
hexo new page "about"

这时候,站点根目录source文件夹下面新增一个categories文件夹,打开里面的index.md文件。在文档头部添加以下描述,其他页面类似。

1
2
3
4
5
6
7
8
---
<!-- 页面的名字,可以更改为你自己喜欢的名字 -->
title: categories
date: 2020-03-20 10:32:05
type: "categories"
<!-- 评论功能默认关闭 -->
comments: false
---

设置头像

打开主题配置文件,搜索关键字Sidebar Avatar 进行定位,将 avatar 的值设置成头像图片的链接地址即可。

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: #/images/avatar.gif
# 修改头像边框为圆形
rounded: true
# 鼠标放置头像时,头像旋转特效
rotated: true

头像图片的完整连接地址可以是:

  • 完整的互联网地址:例如,https://www.example.com/avatar.jpg
  • 站点内的相对地址:例如,假设图片命名为 avatar.jpg,存放在 source/images/ 目录下,则链接地址可以写成 /images/avatar.jpg

侧边栏设置

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

设置侧边栏的位置

修改 sidebar.position 的值,支持的选项有:

  • left - 靠左放置
  • right - 靠右放置
1
2
sidebar:
position: left

设置侧边栏显示的时机

修改 sidebar.display 的值,支持的选项有:

  • post - 默认行为,在文章页面(拥有目录列表)时显示

  • always - 在所有页面中都显示

  • hide - 在所有页面中都隐藏(可以手动展开)

  • remove - 完全移除

1
2
sidebar:
display: post

设置侧边栏社交链接

打开 主题配置文件,搜索关键字social,然后添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# 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/yourname || github
E-Mail: http://mail.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
#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 ,添加社交站点名称(注意大小写)图标,Font Awesome图标地。

友情链接

打开 主题配置文件 ,搜索关键字blog rolls :

1
2
3
4
5
6
7
8
9
10
11
# Blog rolls
links_settings:
#图标样式
icon: link
#链接名称
title: Links
# Available values: block | inline 布局
layout: block
#链接
links:
#Title: http://yoursite.com

提醒版本更新

1
2
# Console reminder if new version released.
reminder: true # 提醒版本更新

缓存

1
2
3
# Allow to cache content generation.
cache:
enable: true # 缓存

自动清除无用文件

1
2
# Remove unnecessary files after hexo generate.
minify: true # 压缩

不蒜子统计

1
2
3
4
5
6
7
8
9
10
11
# 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

valine评论

获取APP id和APP key

  • 你可以点击 LeanCloud ,注册登录,进入控制台后点击创建应用。
  • 进入刚刚创建的应用,选择设置应用Keys,就能看到你的APP ID和APP Key

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
# 配置项详情请查阅官方文档。
valine:
enable: true # 开启评论功能
appid: # 填入刚刚获取的APP ID
appkey: # 填入刚刚获取的APP key
notify: false # 邮件通知默认关闭
verify: false # 验证码默认关闭
placeholder: 在这里写下你的评论吧! # 评论框默认文字
avatar: mm # 头像风格
guest_info: nick,mail #,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: false # If false, comment count will only be displayed in post page, not in home page
recordIP: false # 是否记录IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

配置参考:https://valine.js.org/configuration.html

定制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
# 路径为根目录下的source,新建一个_data文件夹,不是主题下的source,去掉#即生效
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
postBodyEnd: source/_data/post-body-end.swig # 本文结束放这里
footer: source/_data/footer.swig # js 代码放这里
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl # css 代码放这里

修改valine及不蒜子样式

source/_data/styles.styl 文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 隐藏 valine 的 powered by
.power.txt-right {
display: none;
}

// 修改不蒜子数据颜色
#busuanzi_value_site_pv,#busuanzi_value_site_uv{
color: #00BFFF;
}

// valine 评论框对齐文章
div#comments.comments.v{
margin-left: 0px !important;
margin-right: 0px !important;
border: 0px;
}

个性网页标题

新建source/_data/footer.swig 文件,添加内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 搞怪网页标题 #}
{% if theme.title_trick.enable %}
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = '{{ theme.title_trick.leave }}' + OriginTitle;
clearTimeout(titleTime);
} else {
document.title = '{{ theme.title_trick.enter }}' + OriginTitle;
titleTime = setTimeout(function() {
document.title = OriginTitle;
}, 2000);
}
});
</script>
{% endif %}

主题配置文件添加以下内容:

1
2
3
4
5
# 搞怪网站标题
title_trick:
enable: true
leave: "(*^▽^*)我藏好了哦~"
enter: "q(≧▽≦q)被你发现啦~"

文章末尾统一添加本文结束分割线

新建 source/_data/post-body-end.swig 文件,添加内容:

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

修改底部用户图标为跳动的心

1
2
3
4
5
6
7
8
9
# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. 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: "#ff5999"

打开文章末尾的版权信息

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language:

菜单栏显示分类/标签中的文章数目

1
2
menu_settings:
badges: true # 显示菜单分类的数目

文章目录的设置

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: true # 目录全展开
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 3 # 目录展开的标题级数

字数统计与阅读时长

  • 在终端中输入命令安装插件
1
npm install hexo-symbols-count-time
  • 站点配置文件 添加:
1
2
3
4
5
6
7
8
9
10
11
symbols_count_time:
#文章内是否显示
symbols: true
time: false
# 网页底部是否显示
total_symbols: true
total_time: false
exclude_codeblock: false
awl: 4
wpm: 275
suffix: "mins."
  • 修改 主题配置文件
1
2
3
4
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false

修改文章底部标签的样式

1
2
3
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
# 标签代替#
tag_icon: true

SEO优化

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
# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: false

# Set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
seo: true

# If true, will add site-subtitle to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: true

# Google Webmaster tools verification.
# See: https://www.google.com/webmasters
google_site_verification:

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmaster
bing_site_verification:

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true

第三方插件

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
# Math Formulas Render Support
math:
# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
# For moreinformation: https://github.com/MoOx/pjax
pjax: true

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
# 点击图片放大
fancybox: true

# A JavaScript library for zooming images like Medium.
# Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
# 高性能、轻巧和可配置的延迟加载器
lazyload: true

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# 神器啊,盘古之白:自动在中文字和半形的英文、数字、符号之间插入空白。
pangu: true

# Quicklink Support
# For more information: https://github.com/GoogleChromeLabs/quicklink
# 通过在空闲时间预取in-viewport链接来加快后续页面加载速度。
quicklink:
enable: true

# Quicklink (quicklink.umd.js script) is loaded on demand.
# Add `quicklink: true` in Front-matter of the page or post you need.
# Home page and archive page can be controlled through home and archive options below.
home: true
archive: true

# Default (true) will initialize quicklink after the load event fires.
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching.
timeout: 3000
# Default (true) will enable fetch() or falls back to XHR.
priority: true

# For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.
# See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
ignores:

动态线条背景

  • Next7内置了2个动态背景,但我都觉得不太好看,安装对应插件打开即可。
  • three:
1
git clone https://github.com/theme-next/theme-next-three source/lib/three
1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: false
three_waves: false
canvas_lines: false
canvas_sphere: false
  • canvas_ribbon
1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon
1
2
3
4
5
6
7
8
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon
  • 我使用的canvas_nest

source\_data\footer.swig文件中添加以下代码即可。

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

如果你没有配置 第11条 ,那一定要记得打开主题配置文件 中的:

1
2
custom_file_path:
footer: source/_data/footer.swig

点击头像跳转到关于页面

打开 themes\next\layout\_partials\sidebar\site-overview.swig 文件,添加以下的 a 标签。当然这个about你也可以改成你想要页面。

1
2
3
4
5
6
7
8
9
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
{# 点击头像跳转 #}
<a href="/about">
<img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url or theme.images + '/avatar.gif') }}">
</a>
<p class="site-author-name" itemprop="name">{{ author }}</p>
<div class="site-description" itemprop="description">{{ description }}</div>
</div>

点击出现桃心效果

实现效果图:

image-20200320121756514

实现方法:

  • 创建JS文件

    在在/themes/next/source/js/src下新建文件clicklove.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);
  • 修改themes/next/layout/_layout.swig文件,在末尾添加

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

页面底部主题信息删除

  • 打开主题配置文件 ,修改footer下面的这些设置为false即可。
1
2
3
4
5
6
7
8
9
10
11
12
# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:
powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true

修改网站的图标Favicon

实现效果

image-20200320152531334

实现方法:

  • EasyIcon中找一张(32*32)的ico图标,或者去别的网站下载或者制作,并将图标名称改为favicon.ico,然后把图标放在/themes/next/source/images里,并且修改 主题配置文件
1
2
3
4
5
6
7
favicon:
small: /images/favicon.ico
medium: /images/favicon.ico
apple_touch_icon: /images/favicon.ico
safari_pinned_tab: /images/favicon.ico
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

显示当前浏览进度

实现效果:

image-20200320171110759

实现方法:

  • 修改主题配置文件,把 false 改为 true
1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

添加在线联系功能

实现方法:

  • 一个在线的联系功能:DaoVoice
  • 点击 注册 ,获取app_id

image-20200320172235334

  • 修改next\layout_partials\head\head.swig文件, 添加以下内容
1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
  • 修改主题配置文件,添加:
1
2
3
# daovoice 配置
daovoice: true
daovoice_app_id: # 填入刚才的app_id
  • 部署到网站:

    hexo clean && hexo g && hexo d就能看到效果了,网页右下角多了个 图标。具体修改图表的样式,位置。可以在daovoice网页中 应用设置-聊天设置 中配置。

添加文章书写样式

文字增加背景色块

source\_data\styles.styl文件中添加属性样式(参考第11条):
2020.3.25提醒:其实可以直接使用next主题支持的label方法。

1
{% label danger @ XXXX %}

效果: XXXX

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
78
79
80
81
82
83
84
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 颜色块-橙
span#inline-geraldine {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f78a7a;
}
// 颜色块-红
span#inline-roman {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #de5c6b;
}

在你需要编辑的地方,使用如下代码:

1
2
3
4
5
6
{% label danger @站点配置文件 %}
<span id="inline-purple"> {% label danger @主题配置文件 %} </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> {% label danger @主题配置文件 %} </span>
<span id="inline-geraldine"> {% label danger @主题配置文件 %} </span>
<span id="inline-roman"> {% label danger @主题配置文件 %} </span>

下载样式

source\_data\styles.styl文件中添加属性样式(参考第11条):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

在你需要编辑的文章地方。放置如下代码:

1
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

在文章中增加小图标

next支持Font Awesome 提供图标,你可以选择你喜欢的图标,这样使用即可:

1
<i class="fa fa-pencil"></i>支持Markdown

添加本地搜索

  • 搜索功能需要依赖 hexo-generator-searchdb 插件,我们先安装插件:
1
npm install hexo-generator-searchdb --save
  • 打开主题配置文件 ,搜索local_search,修改 enabletrue
  • 修改站点配置文件,添加代码:
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

右上角增加fork me on GitHub图标

1
2
3
4
github_banner:
enable: true
permalink: https://github.com/yourname
title: Follow me on GitHub

打开代码块的复制功能

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style:

页面加载进度效果

  • 安装插件
1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  • 编辑主题配置文件
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
2
3
4
5
6
7
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

文章创建时间和更新时间

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: false
another_day: true
categories: true

结语

很多内容参考了很多优秀博文,并根据自己实际情况进行了自己的博客进行了修改,感谢前辈们的珍贵经验,参考文章:

Next使用文档

hexo的next主题个性化教程:打造炫酷网站

Hexo使用攻略-添加分类及标签

Hexo+Next个人博客主题优化

Hexo 博客 NexT 主题定制与优化

------ 本文结束  感谢阅读 ------