Next 主题个性化配置

显示部分文章

1
<!--more-->     #首页只会显示标记以前的内容,标记后的内容可以通过阅读更多查阅

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

在路径Blog\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件。

1
2
3
4
5
//切换到路径_macro
cd [_macro路径]

//创建passage-end-tag.swig文件
touch passage-end-tag.swig

在 passage-end-tag.swig 添加以下内容,直接用文本编辑器打开,粘贴以下内容后保存

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

打开Blog\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>

添加位置,如下图所示:

Snipaste_2023-11-20_10-17-06

修改主题配置文件**_config.yml**,在末尾添加:

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

配置完成之后,效果如下:

Snipaste_2023-11-20_10-13-53

底部隐藏由 Hexo 强力驱动、主题 –NexT.Mist

打开Blog/themes/next/layout/_partials/footer.swig,注释掉相应代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//用下面的符号注释,注释代码用下面括号括起来
<!-- -->

<!--
<span>|</span>

{% if theme.footer.powered %}
<div>{#
#}{{ __('footer.powered', '<a target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
<span>|</span>
{% endif %}

{% if theme.footer.theme.enable %}
<div>{#
#}{{ __('footer.theme') }} — {#
#}<a target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
<div>{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->

注释掉后效果如下:

img

修改代码块 `` 自定义样式

  • 打开Blog\themes\next\source\css\_custom\custom.styl,添加以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

设置头像并设置动画效果

Blog/_config.yml中添加头像链接地址:

1
2
//添加头像地址
avatar: [ http://....]

设置头像圆角并旋转,打开Blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl,添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

设置超链接为蓝色

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

1
2
3
4
5
6
7
8
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

创建版权申明

1
2
3
4
5
6
7
8
9
10
11
# 创建转载许可证明
# 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 #开启状态,注意要将站点配置文件中的url改为自己的网址
language:

网站底部的爱心设置

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/icons
name: fa fa-heart # 设置图案为爱心
# If you want to animate the icon, set it to true.
animated: true # 爱心跳动动画
# Change the color of icon, using Hex Code.
color: "#ff0000" # 颜色设置

建站时间设置

1
2
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2022 # 建站时间设置

网站背景图片、内容透明化、代码样式

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
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
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl # 在该路径中加入个性设置

我的配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 网站背景图片设置
body {
background:url(/images/background.png);
background-repeat: no-repeat;
background-attachment: fixed; //不重复
background-size: cover; //填充
background-position: 30% 30%; //缩放设置,百分比越小则图片被放大
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}

//``的代码样式,这里是黑底紫字
code {
color: #b294bb;
background: #1d1f21;
margin: 2px;
}

菜单设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 菜单设置,“fa fa-home”样式为图案,需要更改的话可以访问:http://www.fontawesome.com.cn/icons/street-view/
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

添加了新的菜单后,需要到打开git bush输入如下命令:

1
2
cd /d/blog
hexo new page "categories" #新的菜单名,以键值为准

然后打开blog/source/categories/index.md,然后添加如下代码:

1
type: "categories"

侧边栏显示设置

1
2
3
4
5
6
7
# 侧边栏显示设置。“always”则为一直显示
# Sidebar Display (only for Muse | Mist), available values:
# - 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: always

社交联系方式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 社交联系方式设置,“fab fa-github”为显示的图案,也可以不显示图案,但“||”不能去掉,否则会报错
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/tiansztiansz ||
CSDN: https://blog.csdn.net/tiantianzs ||
Gitee: https://gitee.com/a1866 ||
bilibili: https://space.bilibili.com/28606893 ||
#E-Mail: mailto:yourname@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
enable: true
icons_only: false # 只显示社交的图案
transition: true

设置推荐链接

1
2
3
# 设置推荐链接
links:
#Title: http://yoursite.com # 链接的网页地址

添加交流方式

1
2
3
4
5
6
7
8
9
# 聊天工具
# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
enable: false
#service: chatra
#service: tidio
icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, change it as you wish.

捐献设置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: true
comment: 原创技术分享,您的支持将鼓励我继续创作

reward:
wechatpay: /images/wechatpay.png #微信收款码图案
alipay: /images/alipay.png #支付宝收款图案
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

返回页面顶部按钮

1
2
3
4
5
6
7
# 返回页面顶部按钮
back2top:
enable: true
# 将返回顶部按钮放置在侧边栏
sidebar: false
# 显示阅读进度
scrollpercent: true

阅读进度条

1
2
3
4
5
6
7
# 阅读进度条
reading_progress:
enable: true
# top为顶部 | bottom为底部进度条
position: bottom
color: "#37c6c0"
height: 3px

网站标题字体样式

1
2
3
4
5
# 网站标题字体样式
title:
external: true
family: youyuan
size:

SEO 站点推送

1
2
3
4
5
6
7
8
9
10
11
# If true, site-subtitle will be added 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

# 允许百度推送
baidu_push: true

图片缩放

1
2
3
# 图片缩放开关
# For more information: https://fancyapps.com/fancybox
fancybox: true

设置网页加载样式

1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
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: big-counter

添加访问量统计

打开blog/themes/next/_config.yml,找到 busuanzi_count,改为 true:

1
2
busuanzi_count:
enable: true

打开blog/themes/next/layout/_partials/footer.swig, 在{{- next_inject('footer') }}前面加上如下代码:

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
{% if theme.busuanzi_count.enable %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span>总访问量<span></span>次</span>
<span>|</span>
<span>总访客数<span></span>人</span>

<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

var int = setInterval(fixCount, 50); // 50ms周期检测函数
var countOffset = 20000; // 初始化首次数据

function fixCount() {
if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
{
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset);
clearInterval(int);
}
if ($("#busuanzi_container_site_pv").css("display") != "none")
{
$("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据
clearInterval(int); // 停止检测
}
}

});
</script>
{%- endif %}


<!-- 在上面插入代码 -->
{{- next_inject('footer') }}

显示上方菜单中的内容数

1
2
3
4
5
6
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true #显示上方菜单中的内容数

添加网易云音乐歌单

先在网易云音乐中创建 blog 专属歌单,注意歌曲要支持生成外链。然后用手机将歌单转发到电脑,用电脑的浏览器打开,即可看到生成外链按钮,注意选择310×90的大小,取消勾选自动播放,否则加载网页会比较卡。复制 HTML 代码,添加到blog\themes\next\layout\_macro\sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
<div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=7261872754&auto=0&height=90"></iframe>
</div>

<!-- 添加上面的代码,注意要添加<div>块标记 -->
{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div>
<i></i>
<span>0%</span>
</div>
{%- endif %}

打开 https://iconmonstr.com/

选择自己喜欢的 logo,下载. png 格式的图片,然后打开如下网址:

https://tool.lu/favicon/

将. png 图片转换为 32×32 的. ico 图案,将其命名为favicon.ico,然后将图案放置在blog\themes\next\source\images文件夹中

设置文章内容搜索

打开git bush,输入如下命令

1
2
cd /d/blog
npm install hexo-generator-searchdb --save

然后在blog/_config.yml文件中加入如下代码:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

最后在blog\themes\next\_config.yml文件中修改如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# HEXO文章搜索
# 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: true
# Preload the search data when the page loads.
preload: true

Next+waline评论

安装插件

1
npm install @waline/hexo-next

NexT 主题文件夹,添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
waline:
enable: true #是否开启
serverURL: xxxxxx # Waline #服务端地址,就是部署的 Vercel 地址
locale:
placeholder: 无需登录·请留下邮箱以接收回复·来说两句吧~ #评论框的默认文字
avatar: mm # 头像风格
meta: [nick,mail] # 自定义评论框上面的三个输入框的内容
pageSize: 10 # 评论数量多少时显示分页
lang: zh-cn # 语言, 可选值: en, zh-cn
visitor: true # 文章阅读统计
comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
requiredFields: [nick] # 设置用户评论时必填的信息,[nick,mail]: [nick] | [nick, mail]
libUrl: # Set custom library cdn url
login: enable