Hexo扩展操作——NexT主题

2019-10-06

折腾的心又开始躁动起来了,在搭建好Hexo博客后,不止于默认的博客样式和功能。

于是我开始搜索各种Hexo主题,最终确定主题为NexT。

于是开始大刀阔斧的开始改造我的Hexo博客,各种功能样式的细枝末节的配置我整理如下,希望需要的同学自行尝试。

遇到问题的可以尝试评论,我能解决的话一定尽力帮助大家。

共勉

Hexo扩展操作——NexT主题

添加RSS

安装 hexo-generator-feed

在 hexo 根目录下执行下列命令

1
cnpm install hexo-generator-feed --save

然后在_config.yml 中配置如下:

1
2
3
4
5
6
7
8
9
10
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png

我用的主题是 hexo-theme-melody,在主题对应的_config.yml中的 social 下加入

1
2
social:
rss fa: /atom.xml

然后hexo g重新渲染,hexo s重启项目,就可以在首页看到 RSS 按钮了。

添加404页面,修改为腾讯公益。

在站点根目录下,输入 hexo new page 404 ,默认在 Hexo 站点下/source/404/index.md 打开新建的404界面,在底部插入一行,写上 permalink: /404 ,这表示指定该页固定链接为 http://"主页"/404.html

再增加如下html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 404
date: 2019-10-06 08:51:29
permalink: /404
---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://blog.xiaojianzheng.cn"></script>
</body>
</html>

效果如下

修改网页底部

打开 themes/next_config.yml ,搜索关键字 footer,替换图标名。

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
#since: 2015

# 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: user
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#808080"

隐藏网页底部 Hexo 强力驱动,将enable改为false。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:

powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

本地搜索

在你站点的根目录下

1
$ npm install hexo-generator-searchdb --save

打开 Hexo 站点的 _config.yml,添加配置

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

打开 themes/next/_config.yml ,搜索关键字 local_search ,设置为 true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/wzpan/hexo-generator-search
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

添加顶部加载条

安装模块

1
2
3
cd themes/next

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

打开 themes/next/_config.yml ,搜索关键字 pace ,设置为 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: minimal

开启文章版权声明

主题配置文件下,搜索关键字 creative_commons , post 改为 true

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
language: zh-Hans

Top按钮

打开 themes/next/_config.yml ,搜索关键字 back2top

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

头像设置

打开 themes/next/_config.yml 文件,搜索 Sidebar Avatar 关键字。

1
2
3
4
5
6
7
8
9
10
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.png
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true

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

打开 themes/next/_config.yml 文件,搜索 menu 关键字,修改对应图标名称或者新增对应 menu 的图标。

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

# 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. If icon (with or without delimiter) is not specified, question icon will be loaded.
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags
about: /about/ || user
#categories: /categories/ || th
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

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

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

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

打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字,修改对应中文或者新增。

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 文件,搜索 scheme 关键字,将你需用启用的 scheme 前面注释 # 去除即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse # 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
#scheme: Mist # Muse 的紧凑版本,整洁有序的单栏外观
scheme: Pisces # 双栏 Scheme,小家碧玉似的清新
#scheme: Gemini # 类似 Pisces

fork me on github

修改next主题的_config.yml文件

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true # 这里改成true
permalink: # 这里填写<你的Github链接>
title: Follow me on GitHub

字数统计和阅读时长

安装 hexo-symbols-count-time

1
$ npm install hexo-symbols-count-time --save

如果安装完报如下提醒,还需安装 eslint

1
2
3
4
D:\hexo\blog>npm install hexo-symbols-count-time --save
npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
D:\hexo\blog>npm install hexo-symbols-count-time --save
npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.

安装 eslint

1
$ npm install eslint --save

在站点配置文件添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计

在 NexT 主题配置文件添加如下配置(NexT 主题已支持该插件,有的话无需再添加)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute(每分钟阅读词数)
suffix: mins.
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute(每分钟阅读词数)
suffix: mins.

效果如下:

站点统计

文章统计

参考

theme-next/hexo-symbols-count-time

文章作者: XIAO
文章链接: http://yoursite.com/2019/10/07/Hexo扩展操作——NexT主题/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XIAO
微信打赏
支付宝打赏