Hexo Next 主题优化

发表于 分类于 Waline： 本文字数： 5.9k 阅读时长 ≈ 5 分钟

Hexo Next 主题优化 。

Hexo基础设置

配置网站基础信息

修改站点配置文件_config.yml中，修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
title: Y.a.F.e.Y Blog					# 网站标题
subtitle: ''							# 网站副标题
description: 'Putty 本无树，MinGW 亦非台'	# 描述，介绍网站的
keywords:								# 网站的关键字
author: YaFey							# 博主姓名
language:
    - zh-CN  # 中文
    - en
timezone: Asia/Chongqing				# 时区

url: https://yafey.github.io/qh
permalink: :year/:month/:post_title/  # :year/:month/:day/:title/

theme: next

Next主题进阶设置[^hexo-next-cnblogs]

配置主题

默认的主题配置文件 _config.next.yml 中，菜单只开启了首页和归档，我们根据需要，可以添加 about、tag、categories 等菜单

1
2
3
4
5
6
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

不需要新装插件的设置

hexo next主页文章预览[^read-more] [^read-more2]

将<!-- more -->插入到文章后发现有效果，主页在插入处截止了预览 。 

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

[^read-more]: 使用-more-来控制hexo-next主页文章预览，让主页更简洁 hizrd.top | @archive.org

[^read-more2]: Hexo如何在索引页显示摘要和阅读全文按钮 mingdao.me | @archive.org

需要 npm install 插件

字数统计、阅读时长

首先安装插件：

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

主题配置文件 _config.next.yml 修改如下：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true # 统计信息不换行显示
  item_text_post: true # 文章统计信息中是否显示“本文字数/阅读时长”等描述文字
  item_text_total: false # 底部footer站点统计信息中是否显示“本文字数/阅读时长”等描述文字
  awl: 4 # 平均字符长度
  wpm: 275 # 阅读速度, 一分钟阅读的字数

站点配置文件 _config.yml 新增如下：

1
2
3
4
5
6
7
8
# 新增文章字数统计
symbols_count_time:
  #文章内是否显示
  symbols: true # 文章字数
  time: true # 阅读时长
  # 网页底部是否显示
  total_symbols: false # 所有文章总字数
  total_time: false # 所有文章阅读中时长

本地搜索插件

首先安装插件：

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

站点配置文件 _config.yml 新增如下：

1
2
3
4
5
6
# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • path：索引文件的路径，相对于站点根目录
  • field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  • limit：限制搜索的条目数

主题配置文件 _config.next.yml 修改如下 : 

1
2
3
4
5
6
7
8
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1 #每篇文章中显示的搜索数量
  unescape: false
  preload: false

[^hexo-next-cnblogs]: Hexo进阶设置 Next 主题优化 | @archive.org

官方 md 图片解决方案

Embedding an image using markdown

首先安装插件：

1
npm install hexo-renderer-marked --save

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

站点配置文件 _config.yml 新增如下：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as <img src="/2020/01/02/foo/image.jpg">.

其他插件[^laosu-hexo]

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
# 百度推送插件
npm install hexo-baidu-url-submit --save

# hexo-generator-index2 插件
# https://github.com/Jamling/hexo-generator-index2/blob/master/README_zh.md
npm install hexo-generator-index2 --save
npm uninstall hexo-generator-index --save

# symbols_count_time 插件
npm install hexo-symbols-count-time --save

# hexo-blog-encrypt 插件
npm install hexo-blog-encrypt --save

# hexo-deployer-git 插件
npm install hexo-deployer-git --save

# Local Search
npm install hexo-generator-searchdb --save




# 在 Hexo 中无痛使用本地图片 https://hyf.js.org/blog/2017-06-01.no-pains-with-hexo-local-image/

npm install hexo-asset-image-for-hexo5 --save		# https://github.com/uinika/hexo-asset-image-for-hexo5

# npm install https://github.com/yafey/hexo-asset-image.git --save
npm install hexo-asset-img --save     # https://github.com/yiyungent/hexo-asset-img    https://www.idealx.cn/post/Hexo/hexo-asset-image/
	# npm install github:yafey/hexo-asset-image2#main --save 
	# npm i git+https://yafey:hyf4@github@github.com/yafey/hexo-asset-image2#main --save

在Hexo中使用本地图片

[^laosu-hexo]: 在群晖上复刻公网的Hexo-上海老苏 | @archive.org

入侵式修改

调整 博客宽度

How to Change Content Width

Default variables for both Muse and Mist schemes are defined as:

1
2
3
4
5
next/source/css/_variables/base.styl

$content-desktop         = 700px  	// screen width < 1200px
$content-desktop-large   = 800px  	// screen width >= 1200px
$content-desktop-largest = 900px  	// screen width >= 1600px

For example, you may override these variables with percentage value to increase content width. Create and edit source/_data/variables.styl in site root directory and add variables:

1
2
3
4
5
hexo/source/_data/variables.styl

$content-desktop         = 90%
$content-desktop-large   = 90%
$content-desktop-largest = 90%

Then uncomment variable under the custom_file_path section in NexT config file.

1
2
3
4
NexT config file

custom_file_path:
  variable: source/_data/variables.styl

Hexo next自适应宽屏

效果见 https://zengwu.com.cn

电脑屏幕都1920*1080了，用的next主题配置中只有960，文章只有可怜的700，这样看起来挺别扭的，特别是有代码块的时候，基本上都显示不完要滑动。可以通过修改next主题的文章页面宽度来解决。
打开\themes\next\source/css/_schemes/Picses/_layout.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
// 以下为新增代码！！修改post宽度
header{ width: 80% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 80%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

Deployment settings

验证 ssh key

验证前需在平台已添加 SSH 公钥，如果你是按照我前面相同的卷设置， id_rsa.pub 密钥在 /docker/hexo/blog/.ssh 目录中

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
docker exec --user root -it spurin-hexo1 /bin/bash

# 生成 key
ssh-keygen -t rsa -f ~/.ssh/id_rsa -q -P "" ;

### cp pub key to github

# 验证 github 
ssh -T git@github.com

# 将 gitee.com 写入 known_hosts
ssh-keyscan gitee.com >> ~/.ssh/known_hosts 2>/dev/null

# 验证 gitee
ssh -T git@gitee.com

# 将 e.coding.net 写入 known_hosts
ssh-keyscan e.coding.net >> ~/.ssh/known_hosts 2>/dev/null

# 验证 Coding
ssh -T git@e.coding.net

# 复制
cp -r ~/.ssh /myblog

发布

1
2
3
4
5
6
7
8
9
10
11
12
13
docker exec -it spurin-hexo1 /bin/bash 

git config --global user.email "xxxx@gmail.com"
git config --global user.name "xxxx"

# 生成 和 发布
hexo clean && hexo d github

# # 生成 
# hexo g    # hexo generate
#
# # 发布
# hexo d   # hexo deploy