¶前言
用next也有一段时间了，刚开始就想着能用就行，不在乎有多美观，只想着做自己的学习记录和知识分享，结果朋友好几次跟我说我的界面也太丑了
那好，那我就抽个时间来做一做吧
打开next里面的config.yml一看，版本是5.1.6版本的，确实比较老了，于是先升级吧
¶hexo升级
Hexo 版本升级可以通过 npm 实现
-
全局升级 hexo-cli
npm install hexo-cli -g -
检查系统中的插件是否有升级的，可以看到自己前面都安装了那些插件
npm install -g npm-check npm-check -
升级系统中的插件
npm install -g npm-upgrade npm-upgrade -
更新全局包
npm update -g -
更新生产环境依赖包
npm update --save -
查看 Hexo 版本
E:\Blog>hexo v INFO Validating config hexo: 5.4.2 hexo-cli: 4.3.0 os: win32 10.0.19044 node: 16.13.0 v8: 9.4.146.19-node.13 uv: 1.42.0 zlib: 1.2.11 brotli: 1.0.9 ares: 1.17.2 modules: 93 nghttp2: 1.45.1 napi: 8 llhttp: 6.0.4 openssl: 1.1.1l+quic cldr: 39.0 icu: 69.1 tz: 2021a unicode: 13.0 ngtcp2: 0.1.0-DEV -
查看 package.json
{ "name": "hexo-site", "version": "0.0.0", "private": true, "scripts": { "build": "hexo generate", "clean": "hexo clean", "deploy": "hexo deploy", "server": "hexo server" }, "hexo": { "version": "5.4.2" }, "dependencies": { "hexo": "^5.4.2", "hexo-abbrlink": "^2.2.1", "hexo-admin": "^2.3.0", "hexo-asset-image": "github:CodeFalling/hexo-asset-image", "hexo-deployer-git": "^3.0.0", "hexo-filter-image": "^1.2.3", "hexo-generator-archive": "^1.0.0", "hexo-generator-category": "^1.0.0", "hexo-generator-index": "^2.0.0", "hexo-generator-searchdb": "^1.4.0", "hexo-generator-tag": "^1.0.0", "hexo-helper-live2d": "^3.1.1", "hexo-renderer-ejs": "^2.0.0", "hexo-renderer-kramed": "^0.1.4", "hexo-renderer-stylus": "^2.0.1", "hexo-renderer-swig": "^1.1.0", "hexo-server": "^3.0.0", "hexo-tag-cloud": "2.1.*", "hexo-theme-landscape": "^0.0.3", "hexo-wordcount": "^6.0.1", "live2d-widget-model-wanko": "^1.0.5" } }
¶next升级
从v5升级到v7，NexT官方提供了一个教程，请点next升级，于是自己开始升级过程
-
克隆新的仓库到任一异于 next 的目录（如 next-reloaded）：
git clone https://github.com/RD-run/hexo-theme-next themes/next-reloaded如此，当你又想要使用v5的时候在hexo的theme里面改回next就行
-
在Hexo主题config.yml里面设置
theme: next-reloaded -
更新语言配置
从 v6.0.3 版本起，zh-Hans 改名为 zh-CN：https://github.com/theme-next/hexo-theme-next/releases/tag/v6.0.3
升级到 v6.0.3 及以后版本的用户，需要显式修改 Hexo 主配置文件 _config.yml 里的 language 配置，否则语言显示不正确。 -
更新config.yml
这里，我们不直接修改主题的_config.yml 文件，因为这样操作，后续 git pull 更新的时候，需要解决冲突问题，即使是手动下载 release 版本，也要手动合并_config.yml 文件。所以我们选择 NexT 提供的方式2，创建自己单独的 next.yml 进行配置
¶优化
¶控制备案格式
¶侧边栏常驻
¶添加搜索
¶在hexo目录下安装加密插件
npm install hexo-blog-encrypt使用插件
---
password: smile
abstract: Welcome to my blog, enter password to read.
message: 密码输入框上描述性内容
---
其中：
password: 该Blog使用的密码
abstract: Blog摘要文字（少量）
message: 密码框上的描述性文字
¶文章添加置顶功能
移除默认安装的插件：
npm uninstall hexo-generator-index --save
安装新插件:
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：
top: true
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
设置置顶图标
打开/themes/next/layout/_macro/post.swig文件，在<div class="post-meta">下方，插入如下代码：
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
¶修改链接文字样式
打开themes\next\source\css\_common\components\post\post.styl添加以下代码:
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #ff106c;
text-decoration: underline;
}
}
¶显示最近文章
新建source/_data/sidebar.njk文件，内容如下：
{# RecentPosts #}
{%- if theme.recent_posts %}
<div class="links-of-recent-posts motion-element">
<div class="links-of-recent-posts-title">
{%- if theme.recent_posts.icon %}
<i class="{{ theme.recent_posts.icon }} fa-fw"></i>
{%- endif %}
{{ theme.recent_posts.title }}
</div>
<ul class="links-of-recent-posts-list">
{%- set posts = site.posts.sort('date', 'desc').toArray() %}
{%- for post in posts.slice('0', theme.recent_posts.max_count) %}
<li class="links-of-recent-posts-item">
{{ next_url(post.path, post.title, {title: post.path}) }}
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}修改source/_data/next.yaml，打开custom_file_path中的sidebar和style两个内容，并新增recent_posts内容。
custom_file_path:
#head: source/_data/head.swig
# header: source/_data/header.swig
sidebar: source/_data/sidebar.njk
# 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
recent_posts:
# 块标题
title: 最近文章
# 图标
icon: fa fa-history
# 最多多少文章链接
max_count: 5剩下的，需要修改styl文件，美化界面。新增source/_data/styles.styl文件：
// 近期文章
.links-of-recent-posts
font-size: 0.8125em
margin-top: 10px
.links-of-recent-posts-title
font-size: 1.03em
font-weight: 600
margin-top: 0
.links-of-recent-posts-list
list-style: none
margin: 0
padding: 0¶添加代码块复制功能
v7版本直接在next.yml里面的copy_button设置即可
¶添加字数统计
安装新插件
npm install hexo-symbols-count-time --savehexo配置文件中添加
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false
awl: 4
wpm: 275
suffix: "mins."next配置文件中添加
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false¶分类页美化
其实就是自定义css
// 分类&&标签 页面样式
.post-block.page {
margin-top: 40px;
}
// 分类页面page
.category-all-page {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #797D7F;
padding: 20px 30px 60px 30px;
border-radius: 25px 25px 25px 25px;
}
.category-all-title {
font-family: Impact;
font-size: 24px;
color: aqua;
}
.category-list {
overflow: auto;
}
.category-list li {
height: 30px;
float: left;
border-right: 3px solid #222;
padding: 0 20px;
}
.category-all ul li {
list-style: none!important;
}
.category-list li:last-child {
border-right: none;
}
.category-list li a {
font-size: 16px;
text-decoration: none;
color: chartreuse;
font-family: Helvetica, Verdana, sans-serif;
// text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.category-list li a:hover {
color: black;
}
.category-list li.active a {
font-weight: bold;
color: black;
}¶添加标签云
安装插件
npm i hexo-tag-cloud --save打开hexo配置文件添加
# hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica # 字体
textColor: '#555' # 字体颜色
textHeight: 25 # 字体高度
outlineColor: '#E2E1D1' # 字体背景色
maxSpeed: 0.1 # 标签云最大移动速度在sidebar.njk里面添加
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
<h4 class="widget-title" style="font-size:20px;text-align:center;color:#0080FF;margin:20px 0 0px;">Tag Cloud</h4>
<div id="myCanvasContainer" class="widget tagcloud" style="font-size:20px;">
<canvas width="220" height="200" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}¶添加latex解析
¶添加彩色标签
在themes\next\layout下新建tag-color.swig，修改里面的内容为：
<script type="text/javascript">
var alltags = document.getElementsByClassName('tag-cloud-tags');
var tags = alltags[0].getElementsByTagName('a');
for (var i = tags.length - 1; i >= 0; i--) {
var golden_ratio = 0.618033988749895;
var s = 0.5;
var v = 0.999;
var h = golden_ratio + Math.random()*0.8 - 0.5;
var h_i = parseInt(h * 6);
var f = h * 6 - h_i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var r, g, b;
switch (h_i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3 :
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
r = 1;
g = 1;
b = 1;
}
tags[i].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";
}
</script>
<style>
.tag-cloud-tags{
text-align: center;
counter-reset: tags;
}
.tag-cloud-tags a{
display: inline-block;
border: 0px;
border-radius: 10px;
padding: 0px 10px;
margin: 8px;
color: rgba(34, 34, 34, 0.8);
}
/* 文字前添加相应的符号，content后的Unicode可以自定义*/
.tag-cloud-tags a:before{
font-family: 'Font Awesome 5 Free';
content: "\f02b";
font-weight: 900;
}
.tag-cloud-tags a:hover{
box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
transform: scale(1.1);
transition-duration: 0.15s;
}
</style>
打开theme/next/layout/page.swig，搜索<div class="tag-cloud-title">，修改代码如下：
<div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
{%- if page.type === 'tags' %}
<div class="tag-cloud">
<div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div>
<div class="tag-cloud-tags">
{{ tagcloud({
min_font : theme.tagcloud.min,
max_font : theme.tagcloud.max,
amount : theme.tagcloud.amount,
- color : true,
+ color : false,
start_color: theme.tagcloud.start,
end_color : theme.tagcloud.end})
}}
</div>
</div>
+ {% include 'tag-color.swig' %}
在文章底部添加彩色标签
这个就感觉好看一点，打开themes\next\layout_macro\post.swig文件，搜索for tag in post.tags.toArray()，在下面添加我们之前写好的黄金分割生成的随机颜色代码，如下
<div class="post-tags">
{%- for tag in post.tags.toArray() %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{%- endfor %}
</div>
<script type="text/javascript">
var tagsall=document.getElementsByClassName("post-tags")
for (var i = tagsall.length - 1; i >= 0; i--){
var tags=tagsall[i].getElementsByTagName("a");
for (var j = tags.length - 1; j >= 0; j--) {
var golden_ratio = 0.618033988749895;
var s = 0.5;
var v = 0.999;
var h = golden_ratio + Math.random()*0.8 - 0.5;
var h_i = parseInt(h * 6);
var f = h * 6 - h_i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var r, g, b;
switch (h_i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3 :
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
r = 1;
g = 1;
b = 1;
}
tags[j].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";
}
}
</script>
然后打开blog/source/_data文件夹新建styles.styl，修改文章底部标签的样式：
//文章底部彩色标签样式
.posts-expand .post-tags a {
display: inline-block;
font-size: 0.8em;
padding: 0px 10px;
border-radius: 8px;
color: rgb(85, 85, 85);
border: 0px;
}
¶添加建站时间
¶添加点击特效
下载 JavaScript 脚本，放在主题文件夹下 themes\next\source\js\cursor\ 下，如果没有 cursor 这个目录，手动创建一下。
然后在主题自定义布局文件 themes\next\layout\_custom\custom.swig 中添加如下内容：
{# 鼠标点击烟花特效 #}
{% if theme.cursor_effect == "fireworks" %}
<script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
<script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
<script async src="/js/cursor/text.js"></script>
{% endif %}如果没有 _custom 文件夹或 custom.swig 文件，手动创建一下。
并且在主题布局文件 themes\next\layout_layout.swig 中添加这一行（在 body 尾部）：
{%- if theme.pjax %}
</div>
{%- endif %}
+ {% include '_custom/custom.swig' %}
</body>
</html>主题配置文件加入以下内容：
# 鼠标点击烟花特效
cursor_effect: fireworks
¶添加动漫模型
¶设置创建文章同名文件夹
位置：blog/_config.yml
打开配置文件，搜索post_asset_folder，更改配置如下：
default_layout: post # 默认创建文件分类
post_asset_folder: true开启之后，在创建文章hexo new XXXX，同时也会出现一个同名的文件夹用来存放相关的图片。
根目录下的_config.yml 文件中 post_asset_folder: false 设置为 true，以此打开文章资源文件夹功能；
当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
正确的引用图片方式是使用下列的标签插件而不是 markdown ：
{%asset_img example.jpg This is an example image %}如果是后来才打开此功能的，可以自己新建一个与 md 同名的文件夹，把图片放进去，然后按照文档所给的格式引用图片即可
¶添加背景图片（每个scheme主题有些许区别）
¶页面加载进度效果
安装插件
git clone https://github.com/theme-next/theme-next-pace source/lib/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: minimal
¶阅读进度条
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: '#37c6c0'
height: 3px¶代码块代码段字体颜色和背景色改变
浏览器调试工具自己调的
