ZK

欢迎你的到来

next主题7.8.0版本优化记录

精品 | 发表于 更新于 分类于 Valine：
本文字数： 12k 阅读时长 ≈ 11 分钟
欢迎
Next主题的配置 在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录(hexo/themes/next)下，为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件

配置环境

1
2
3
4
5
hexo: 4.2.1
hexo-cli: 3.1.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.16.3
next: 7.8

配置文件分离

Next主题在7.3之后分离了配置文件与主题，详情请见小丁的博客。

  • 新建文件夹hexo/source/_data
  • 将hexo/themes/next/_config.yml复制到hexo/source/_data路径下并重命名为next.yml
  • 将next.yml中的override设置为true即可作为主题的配置文件使用
  • 在hexo/source/_data中新建body-end.swig和styles.styl文件
  • 然后在next.yml的custom_file_path中删除前面的注释符#来启用bodyEnd和style
  • custom_file_path中的其他选项根据需要创建相关文件并启用

站点配置文件的修改

Site设置

1
2
3
4
5
6
7
# Site
title: Siriusq
subtitle: Hello World!
description: 
keywords:
author: Sirius
language: zh-CN

title: 填写标题
subtitle: 填写副标题
description: 简介
keywords: 关键词
author: 作者，文章中显示的作者名称
language: 设置语言，zh-CN是简体中文，en是英语，默认是德语

URL栏设置

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://Siriusq.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

url:填写博客在Github的二级域名，如 https://Siriusq.github.io
permalink:是生成博客页面时的路径名，一般是:year/:month/:day/:title/

Directory设置

用于配置站点目录的主要属性。该部分的配置不需要修改。

1
2
3
4
5
6
7
8
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

Writing设置

用于配置写作时的主要属性。该部分的配置不需要修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new_post_name: :title.md                #新文章的文件名称
default_layout: post                    #预设布局
titlecase: false                        #把标题转换为 title case
external_link: true                     #在新标签中打开链接
filename_case: 0                        #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false                    #显示草稿
post_asset_folder: false                #启动 Asset 文件夹
relative_link: false                    #把链接改为与根目录的相对位址
future: true                            #显示未来的文章
highlight:                              #代码块的设置
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  wrap: true
  hljs: false

Home page设置

用于配置主页的主要属性。

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator: #主页索引
  path: ''
  per_page: 5
  order_by: -date

Category & Tag设置

1
2
3
4
# Category & Tag
default_category: uncategorized      #默认分类
category_map:                        #分类别名
tag_map:                             #标签别名

Date / Time设置

1
2
3
4
5
6
7
8
# Date / Time format
### Hexo uses Moment.js to parse and display date
### You can customize the date format as defined in
### http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD       #日期格式
time_format: HH:mm:ss         #时间格式
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

翻页设置

1
2
3
4
# Pagination
### Set per_page to 0 to disable pagination
per_page: 10                   
pagination_dir: page

per_page:后设置博文数量，0代表不翻页全部平铺显示

Extensions设置

用于扩展的主要属性。
plugin我加了hexo-generator-feed（用来生成RSS），theme我选择用next。

1
2
3
4
5
6
# Extensions
## Plugins: https://hexo.io/plugins/
plugin:
- hexo-generator-feed
## Themes: https://hexo.io/themes/
theme: next

Deployment设置

用于配置部署的主要属性。
我选择部署到Coding,经过对比发现Coding在国内速度较Github，码云快很多（仅本人观点）

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  branch: master
  repo:                         //Coding仓库链接

主题配置文件的修改

文件中很多配置前面都带有#，删掉它就可以激活选项

网站Logo设置

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

把选好的图标改成上面的文件名放入\themes\next\source\images目录中替换掉原来的图标，注意图片尺寸

页脚设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:
   Powered by Hexo & NexT
  powered: false

since: 表示网站成立的年份，不设置的话默认是当前年份，显示为© 2019
icon: 中设置年份后面的图标，默认是心形，想修改的话去Fontawesome选择图标，然后在name栏修改
animated: 用于设置心形是否跳动
color: 用于设置图标颜色，百度对照色表查就好
copyright: 显示图标后面的版权所属，也就是作者名，不设置的话默认显示根目录配置文件中的作者名
powered: 后面的栏目用于设定是否显示Powered by Hexo以及当前主题的版本信息，显示的话设为true

版权信息

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: en

license:用于设置版权标准，具体可以去Creative Commons查看
sidebar:用于设置是否在侧边栏显示版权标准
post:用于设置是否在文章底部显示版权信息
language:用于设置语言

主题选择

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

一共有四种，把想要的主题前面的#删掉即可,我选择的是Gemini风格

侧边栏菜单设置

1
2
3
4
5
6
7
8
9
10
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
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  #photo: /gallery/ || fa fa-tags

||前表示页面的地址，后面表示显示的图标名称
about:用于设置关于页面，没有的话在Git bash中使用hexo new page "about"创建，然后打开\source\about\index.md就可以编写了
tags:用于设置标签功能，同样使用命令hexo new page "tags"创建，然后打开source\tags\index.md并在日期后面添加一行type: "tags"，写博文时在顶部加上一栏tags: []即可设置标签，多个标签中间使用,分隔
archieves:用于设置归档页面
categories:用于设置目录页面，编辑博文时在顶部加上一栏categories:就可以为博文设置所属目录

侧边栏显示设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  width: 320

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

position:用于设置侧边栏在左边还是右边，把要选择的位置前面的#去掉再把另一个前面加上#即可，这个选项只对Pisces和Gemini两个主题起作用
width:用于设置侧边栏的宽度，默认Muse和Mist是320,Pisces和Gemini是240
display:用于设置侧边栏的显示方式，只对Muse和Mist两个主题起作用，可以挨个试一下
offset:用于设置侧边栏距离顶部介绍的距离，只对Pisces和Gemini两个主题起作用
onmobile:用于设置是否在手机等宽度较小的设备上显示侧边栏，只对Muse和Mist两个主题起作用

头像设置

用于设置是否在侧边栏显示头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

在url:后填写头像图片的路径，默认在\themes\next\source\images中
rounded:用于设置是否显示圆形头像
opacity:用于设置头像透明度，1为不透明
rotated:用于设置头像鼠标移动到头像上时头像是否旋转

社交网站链接设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/Siriusq || github
  E-Mail: mailto:siriuskevin@foxmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

在||前输入你社交主页的链接即可，后面用于设置图标
E-mail:栏格式为mailto:邮箱地址，在win10系统可以调用系统邮件服务自动填写收件人

侧边栏目录设置

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

enable:用于设置是否开启侧边栏目录
number:用于设置自动编号
wrap:用于设置当标题长度超过侧边栏长度时是否自动换行
expand_all:用于设置是否展开全部目录，否的话会自动展开正在看的那部分
max_depth:用于设置自动生成目录的最大深度，也就是生成到几级标题
注意：在使用hexo-blog-encrypt插件对文章加密时会出现侧边栏目录无法显示的情况，请按需使用

开启阅读全文选项

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

下面这一段用于设置自动生成阅读全文选项

1
2
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

设置完成后，在文章内加入<!--more-->字段就可以在首页隐去剩下的文字并显示阅读全文按钮了

打赏

1
2
3
4
5
6
7
8
9
10
11
12
13
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  #comment: Donate comment here.

reward:
  wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

enable:用于设置是否在文章末尾显示打赏按钮
animation:用于设置打上按钮是否显示动画
reward:后面的选项去掉前面的#即可开启对应的打赏，记得替换成自己的图片，路径在\themes\next\source\images

代码块高亮设置

1
2
3
4
5
6
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: galactic
  # See: https://github.com/chriskempson/tomorrow-theme

Next主题内置了tomorrow代码高亮主题，一共有八个，在highlight_theme:中改成自己想要的即可。

代码块复制按钮

1
2
3
4
5
6
7
#Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

enable:用于开启代码块右上角的复制按钮
show_result:用于设置是否显示复制成功提示
style:代码框风格，mac风格参照我的代码框，其它风格请自行测试

返回顶部按钮

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

enable:用于设置是否开启回到顶部按钮
sidebar:用于设置是否将按钮放到侧边栏中
scrollpercent:用于设置是否显示阅读进度百分比

阅读进度条

1
2
3
4
5
6
7
#Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

position:进度条位置，top/bottom顶部/底部
color:进度条颜色
height:宽度

书签

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

在右上角显示一个书签按钮可以跳转到上一次设置书签的位置
首先执行命令git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark安装bookmark插件
然后在下面的选项中将enable:设置为true

Github角标

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/Siriusq
  title: Follow me on GitHub

enable:用于设置是否在页面右上角显示Github三角标
permalink:后面填写你的Github地址
title:用于设置鼠标移动到图标后显示的文字

开启RSS

安装

1
npm install hexo-generator-feed --save

配置

打开站点配置文件并在末尾添加下列代码

1
2
3
4
5
6
7
8
# RSS订阅支持
plugin:
- hexo-generator-feed
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

页面搜索功能

安装

执行下列命令安装插件

1
npm install hexo-generator-searchdb --save

配置

打开主题配置文件并搜索local_search,修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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: false
  # Preload the search data when the page loads.
  preload: false

Valine评论功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

具体操作请看这里

AddThis文章分享

1
2
3
# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id:

具体操作请看这里

动态背景

Next主题默认提供了三种动态背景,只需要打开就可以了
Canvas-nest
JavaScript 3D library
Canvas-ribbon

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
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: false
  onmobile: false # 是否在手机上显示
  color: "255,51,51" # RGB颜色设置
  opacity: 0.5 # 线条透明度
  zIndex: -1 # 显示级别
  count: 160 # 线条的数量，越多越卡

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: true
  canvas_lines: true
  canvas_sphere: true

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 100 # The width of the ribbon
  alpha: 1.0 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

有三种风格可选，将一种enable:设置为true即可

Next主题自定义

太多了，有时间再记录。。。


本文结束啦感谢您阅读

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