主题下载安装
进入命令行,下载 NexT 主题,输入:
git clone https://github.com/theme-next/hexo-theme-next themes/next
修改站点配置文件_config.yml,找到如下代码:
## Themes: https://hexo.io/themes/
theme: landscape
将 landscape 修改为 next
切换主题
next 主题自带四种样式。
在主题配置文件/next/_config.yml中查找:scheme,找到如下代码:
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择一种样式,去掉前面的 #,其他主题前加上 #
隐藏网页强力驱动
隐藏网页底部 powered By Hexo / 强力驱动
打开 themes/next/layout/_partials/footer.swig
找到
{% if theme.footer.powered.enable %}{# #}{{ __('footer.powered', 'Hexo') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{# #}</div> {% endif %} {% if theme.footer.powered.enable and theme.footer.theme.enable %} {% endif %} {% if theme.footer.theme.enable %}{# #}{{ __('footer.theme') }} – {# #}{# #}NexT.{{ theme.scheme }}{# #}{% if theme.footer.theme.version %} v{{ version }}{% endif %}{# #}</div> {% endif %}
把这段代码首尾分别加上:,或者直接删除
浏览进度
浏览页面显示当前浏览进度
打开 themes/next/_config.yml,搜索关键字 scrollpercent,把 false 改为 true
Local Search本地搜索
安装插件hexo-generator-searchdb,执行以下命令:
npm install hexo-generator-searchdb --save
或者
npm install -g npm@11.3.0
修改hexo/_config.yml站点配置文件,新增以下内容到任意位置
search:
path: search.xml
field: post
format: html
limit: 10000
编辑 __主题配置文件__,启用本地搜索功能:
# Local search
local_search:
enable: true
设置网站图标
找一张(32 * 32)的 ico 图标,或者去别的网站下载或者制作,并将图标名称改为 favicon.ico,然后把图标放在 ·/themes/next/source/images· 里,并且修改主题配置文件:
Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
修改文章底部标签
修改文章底部的#号的标签,改为图标
修改模板/themes/next/layout/_macro/post.swig
搜索 rel=“tag”>#,将 # 换成<i class="fa fa-tag"></i>
[Read More]按钮样式
修改themes\next\source\css\_custom\custom.styl文件,加入自定义样式
// [Read More]按钮样式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
阅读全文设置
修改 阅读全文 前显示文字数量即位置
打开 themes/next/_config.yml,搜索关键字 auto_excerpt, 修改length即可修改阅读全文前显示文字数量
auto_excerpt:
enable: true
length: 150
或者在文章中任意位置添加<!-- more -->
建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容!
修改链接文字样式
打开themes\next\source\css\_common\components\post\post.styl添加以下代码:
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #ff106c;
text-decoration: underline;
}
}
连接颜色已变为彩色
代码块复制选项
Next6 中自带了复制代码按钮,Next5 需要自己手动配置。
搜索 codeblock,找到如下配置:
codeblock:
border_radius: 8 # 按钮圆滑度
copy_button: # 设置是否开启代码块复制按钮
enable: true
show_result: true # 是否显示复制成功信息
修改加载特效
由于网页不可能一直都秒进,总会等待一段时间的,所以可以设置顶部加载条。Next 已经集成了很多加载特效,可以在下面选项中在线调试测试一下。
搜索pace,找到如下代码:
# 页面顶部加载条
# Progress bar in the top during page loading.
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
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal #默认设置,可以修改为上述任何一个