Hexo,『 NexT 模板配置 』

发表于 更新于 分类于 阅读次数：

NexT 安装

npm 安装 ( 推荐使用 )

  • 使用 npm 安装

    1
    npm install hexo-theme-next@latest

  • 安装指定版本

    1
    npm install hexo-theme-next@8.0.0

  • Copy next/_config.yml 文件

  • 该文件会复制到 Hexo 目录下, 与 Hexo _config.yml 在同一级目录

    1
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml

Git 安装

  • 使用 git 直接 clone

    1
    git clone https://github.com/next-theme/hexo-theme-next themes/next

    or

    1
    git clone https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next

  • 安装指定版本

    1
    git clone --branch v8.0.0 https://github.com/next-theme/hexo-theme-next themes/next

    or

    1
    git clone --branch v8.0.0 https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next

  • Copy next/_config.yml 文件

  • 该文件会复制到 Hexo 目录下, 与 Hexo _config.yml 在同一级目录

    1
    cp theme/next/_config.yml _config.next.yml

_config.yml 配置

  • 安装完成，修改 /博客目录/_config.yml/**， 配置文件，找到 **theme: landscape 修改为 theme: next。

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

  • 修改完成进入终端:

    1
    2
    cd <folder>
    hexo s

  • 浏览器访问 : http://localhost:4000

  • NexT 主题的效果:

NexT 文档

NexT 配置

  • 在安装 NexT 模板的时，我们已经复制复制了一份 _config.yml 文件，修改名称为 _config.next.yml, 我们通过修改这个文件来控制模板的样式，复制出来是为了避免修改源文件，模板升级问题。
  • /_config.next.yml 配置文件中有很多参数，我们简单介绍下常用的。

缓存文件 & 资源文件

缓存文件 & 资源文件配置

 
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
35
# ===============================================================
# It's recommended to use Alternate Theme Config to configure the theme
# Modifying this file may result in merge conflict
# See: https://theme-next.js.org/docs/getting-started/configuration
# ===============================================================

# ---------------------------------------------------------------
# Theme Core Configuration Settings
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

# Allow to cache content generation. Introduced in NexT v6.0.0.
# 允许缓存，true
cache:
  enable: true

# Remove unnecessary files after hexo generate.
# 是否在 hexo 生成之后删除不必要的文件，false
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
# 常用的文件路径
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

NexT 样式配置

NexT 样式配置

 
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# 布局
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# Dark Mode
# 夜间模式
darkmode: true


# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# 网站图标设置
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

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

# 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: false
  language:


# ---------------------------------------------------------------
# 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.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
# 菜单显示
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     # 404

# Enable / Disable menu icons / item badges.
# 菜单设置
menu_settings:
  icons: true       # 显示图标
  badges: false


# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# 侧边栏位置
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: 300


  # 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

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.                         头像
  url: /images/Header/swp_header.png
  # If true, the avatar will be dispalyed in circle.                        设置圆形
  rounded: false
  # If true, the avatar will be rotated with the cursor.                    是否旋转
  rotated: false

# Posts / Categories / Tags in sidebar.
# 头像下是否显示文章、分类和标签设置
site_state: true

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
# 社交账号 & 友情链接
social:
  GitHub: https://github.com/swp-song || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

# 友情链接
social_icons:
  enable: true
  icons_only: false
  transition: false

# Blog rolls
links_settings:
  icon: fa fa-globe
  title: Links
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com

# 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

# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
  enable: false
  #service: chatra
  #service: tidio
  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
  text: Chat # Button text, change it as you wish.


# 网站页脚设置
# ---------------------------------------------------------------
# Footer Settings
# See: https://theme-next.js.org/docs/theme-settings/footer
# ---------------------------------------------------------------

# Show multilingual switcher in footer.
language_switcher: false

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  # 起始建站时间
  since: 2017

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons     页脚图片
    name: fab fa-apple
    # If you want to animate the icon, set it to true.                  是否开启页脚图片动画
    animated: true
    # Change the color of icon, using Hex Code.                         图片颜色
    color: "#ffffff"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:

  # Powered by Hexo & NexT      是否显示 HexT 链接
  powered: false


  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
  # 备案
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

NexT 文章设置

NexT 文章设置

 
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# 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

# Post meta display settings
# 文章显示设置
post_meta:
  item_text: true           # 显示文章内容
  created_at: true          # 显示创建时间
  updated_at:
    enable: true            # 显示更新时间
    another_day: true
  categories: true          # 显示分类

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
# 预计阅读时间和文章字数统计
symbols_count_time: 
  separated_meta: true
  item_text_total: false

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
# 文章底部默认的标签是 # tags 
tag_icon: false

# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
# 打赏设置
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: false
  animation: false
  #comment: Buy me a coffee

# 收款二维码图片
reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: false
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

# Show previous post and next post in post footer if exists
# Available values: left | right | false
post_navigation: left


# ---------------------------------------------------------------
# Custom Page Settings
# See: https://theme-next.js.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# TagCloud settings for tags page.
tagcloud:
  min: 12 # Minimun font size in px
  max: 30 # Maxium font size in px
  amount: 200 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
  calendar_id: <required> # Your Google account E-Mail
  api_key: <required>
  orderBy: startTime
  showLocation: false
  offsetMax: 72 # Time Range
  offsetMin: 4 # Time Range
  showDeleted: false
  singleEvents: true
  maxResults: 250


# ---------------------------------------------------------------
# Misc Theme Settings
# See: https://theme-next.js.org/docs/theme-settings/miscellaneous
# ---------------------------------------------------------------

# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: justify
  mobile: justify

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: vs2015
    dark: vs2015
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: 

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

# Bookmark Support
bookmark:
  enable: false
  # 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

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: false
  permalink: https://github.com/yourname
  title: Follow me on GitHub


NexT 字体设置

NexT 字体设置

 
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Monda
    size: 0.80

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Monda
    size: 1.5

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Monda
    size: 1.5

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: Monda

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: monospace