Next主题配置文件说明

Hexo博客配置说明中已经对Hexo博客的”_config.yml”文件做了详细的解释说明。本博客主要对NexT主题中的”_config.yml”文件做详细的解释说明。

Next主题配置内容较多,主要包括以下几个方面的内容:

站点信息设置(Site Information Settings)

名称 配置类型 备注
设置favicon图标(Favicon settings) 优化配置
设置默认关键字(Default Keywords Settings) 优化配置 SEO相关
rss设置(Rss Settings) 优化配置 (待深入研究)
建站时间(Site Setup Date Settings) 基础配置
Canonical标签(Canonical Settings) 优化配置 (待研究)SEO相关

设置favicon图标(favicon settings)

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

Favicon用于展示网站的小图标,一般在浏览器的页签或者收藏夹里的前面显示。由于favicon很小,图片要进行特殊的处理,可以参考在如下的网站处理:

设置了48*48或者16*16的ico文件,修改名称为favicon.ico,放到hexo-source即可。理论上生效之后浏览器和收藏夹都会显示。要注意如下两个点:

  • 如果你是在同一台电脑操作,很可能看不到效果,除非全部清空缓存,建议换一台电脑查看效果。
  • 图标最好是透明底色,效果比较好。

设置默认关键字(Default Keywords Settings)

1
2
# Set default keywords (Use a comma to separate)
keywords: "Hexo, NexT"

这里的keywords就是关键字,对SEO优化有比较大的帮助。为什么是“默认”关键字呢?如果你的页面自行设置了关键字,会以页面的为主,如果没有,就会来取这个默认的关键字了。

Rss设置(Rss Settings)

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss:

关于 Rss Feed说明

独立博客的RSS Feed设置主要有以下三个步骤

  1. 烧制:怕墙的用Feedsky,不怕墙的用Feedburner。
  2. 自定义Feed地址;
  3. 替换掉博客中的Feed链接,特别是Header信息。

建站时间(Site Setup Date Settings)

1
2
# Specify the date when the site was setup
since: 2016

修改since后面的数字即可,注意冒号后面有空格。

Canonical标签设置(Canonical Settings)

1
2
3
4
# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

Canonical 标签和SEO相关,这里有canonical 标签基本介绍

菜单设置(Menu Settings)

这里的菜单主要指的是NexT主题最上方的“主页、关于”等组成的菜单结构。

名称 作用说明 配置类型 备注
菜单结构(Menu Structure Settings) 基础配置
菜单图标(Menu Icons Settings) 优化配置

菜单结构(Menu Structure Settings)

1
2
3
4
5
6
7
8
9
10
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
#categories: /categories
about: /about
#archives: /archives
#tags: /tags
#schedule: /schedule
#commonweal: /404.html
#projects: /projects

菜单前加“#”的是被隐藏的目录,这里的目录对应了相应的页面。前面显示的内容和语言相关。
这里不仅仅可以添加内部页面,还可以添加外部链接。
增加一行百度的链接如下:

1
baidu: http://www.baidu.com

此时你会发现菜单里多了一个按钮“Menu.baidu”,也能打开链接,但是显示的内容不是我们想要的。因为这里显示的文字是根据语言设置显示的,原来的语言设置里没有baidu对应的语言显示,所以就会显示成“Menu.baidu”。在语言文件里按照格式增加一行就可以正常显示了。

菜单图标(Menu Icons Settings)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: false
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
commonweal: heartbeat

可以采用图标的形式展示菜单的对应内容

风格设置(Scheme Settings)

1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

保留scheme: Mist即可。

字体设置(Font Settings)

名称 作用说明 配置类型 备注
字体设置(Font Settings) 优化配置 待深入研究
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
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:
# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
codes:
external: true
family:
size:

侧边栏设置(Sidebar Settings)

名称 作用说明 配置类型 备注
社交链接设置(Social Links) 优化配置
社交链接图标设置(Social Links Icons) 优化配置
侧边栏头像设置(Sidebar Avatar) 基础配置
侧边栏内容设置(Table Of Contents in the Sidebar) 优化配置
知识共享证书(Creative Commons 4.0 International License) 优化配置
侧边栏位置相关(Sidebar Positions Settings) 优化配置
友情链接设置(Blogrolls) 优化配置

官方文档:侧边栏社交链接有明确的说明:先设置链接,再设置显示的图标。图标来自FontAwesome。这里的配置只要给出匹配的名称就可以了。这是开源项目的仓库:FortAwesome/Font-Awesome

1
2
3
4
5
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
Github: https://github.com/Wangjunyu

注意:social前的井号要去掉,否则链接不会在侧边栏显示。

1
2
3
4
5
6
7
8
9
10
11
12
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: false
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo

注意:可以试一下“enable: false”与“enable: true”的效果差别决定是否适用icon

侧边栏头像设置(Sidebar Avatar)

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://bkt.clouddn.com/avatar.png

既可以放在网站里,又可以设置一个外部链接。

侧边栏内容设置(Table Of Contents in the Sidebar)

1
2
3
4
5
6
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: false

个人觉得NexT主题中侧边栏内容是神来之笔,既可以隐藏一些不必要一直展示的信息,又可以作为长文的大纲方便检索定位。
解释一下上面的代码,一共有两个作用:

  • 是否显示文章的目录结构。如果选择false,文章不会自动生成目录显示。
  • 文章的目录结构显示时是否自动添加序号。

这两个功能很实用,而且都是true 或者 false值进行判定。

4.0证书(Creative Commons 4.0 International License)

1
2
3
4
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa

你的博客采用什么样的知识共享证书呢?

NexT 主要提供了五种方案根据自己的需要选择一种即可。

侧边栏位置设置(Sidebar Positions Settings)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value:
# - 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 toggler.
display: post
#display: always
#display: hide
#display: remove

侧边栏的位置和展示方式,展示方式又有多种,不明白的可以自己尝试一下。

友情链接(Blogrolls)

1
2
3
4
5
6
7
8
9
10
11
12
# Blogrolls
links_title: 链接
links_layout: block
# links_layout: inline
links:
CNZZ: https://web.umeng.com
百度统计: http://tongji.baidu.com/
leancloud: https://leancloud.cn
Google分析: https://analytics.google.com
Next主题配置文档: http://theme-next.iissnan.com/
Hexo官方配置文档: https://hexo.io/docs/
Google Webmaster: https://www.google.com/webmasters/

links_title 后跟的是模块名称
links_layout: block 是否竖排,不然按照行走
links_layout: inline 还没研究明白

Misc主题设置(Misc Theme Settings)

名称 作用说明 配置类型 备注
Logo定制(Custom Logo) 优化配置 待深入研究
代码高亮主题设置(Code Highlight theme) 优化配置

Logo定制(Custom Logo)

1
2
3
4
5
6
7
8
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:

还没有研究明白

代码高亮主题设置(Code Highlight theme)

1
2
3
4
5
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

用于设置 代码高亮的主题,这里提供了五种主题,任选其一即可。

第三方服务设置(Third Party Services Settings)

NexT中设置了大量的第三方服务接口,这也是主题非常优秀的地方。一般来说,增加一个第三方服务会需要在源码做一些修改,一旦修改,主题的通用性降低,未来有新的特性升级会很麻烦。NexT中不需要考虑这个问题,因为相关的接口代码已经预先写好,只需要在这里设置一些接口值就可以正常使用,也不会影响未来的升级工作了。

名称 作用说明 备注
百度统计 统计分析
Google Webmaster 统计分析
Google Analytics 统计分析
CNZZ count 统计分析
腾讯分析 统计分析
文章访问数量设置 统计分析
站点访问数量设置 统计分析
百度文章提交 SEO
多说ShortName 沟通分享
多说展示UA 沟通分享
Disqus ShortName 沟通分享
Facebook SDK Support 沟通分享
Facebook comments plugin 沟通分享
百度分享 沟通分享
分享 沟通分享
谷歌日历
MathJax Support
Swiftype Search 搜索 收费

目前的接口主要针对统计分析、沟通分享、搜索等功能。期待未来有更多的接口出现,可以通过官方文档查看。由于部分接口设置中涉及到其他网站账号注册、使用方法说明等,内容较多,会根据不同的用途单独介绍。这里仅说明最简单的一个。

百度提交rul

1
2
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

好处是能够更快的被百度收录,在这两篇博客中零零散散涉及到不少SEO优化的内容,后续会单独博客说明。

不要碰的设置

1
2
3
4
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

如果不知道这些是什么,不要编辑下面的设置。

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
# Motion
use_motion: true
# Fancybox
fancybox: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib
# Internal version: 2.1.3
jquery:
# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox:
fancybox_css:
# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick:
# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui:
# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser:
# Internal version: 4.4.0
# See: http://fontawesome.io/
fontawesome:
# Assets
css: css
js: js
images: images
# Theme version
version: 5.0.2

这里有一些主题使用的版本说明,建议保持默认。

声明: 本文转载需标明出处,禁止用于商业目的。

ChangeLog

20161112 新建
20161112 发布