next 主题配置

主题下载安装

进入命令行,下载 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 %}

把这段代码首尾分别加上:,或者直接删除

浏览进度

浏览页面显示当前浏览进度
打开 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  #默认设置,可以修改为上述任何一个

正在加载今日诗词....