Blog更新&配置文件详解

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

最近博客的CSS被我玩坏了，顺带就对博客进行整体更新，并且对hexo、nexT的配置文件进行详细的记录。
Ps：每篇文章还弄了摘要格式！好累~~下一篇会写nexT主题的自定义优化。

由于使用hexo-neat插件压缩有问题，然后改用gulp进行压缩。发现来来回回都会有问题，并且提交到GitHub上之后，导致博客的CSS都出问题无法显示。发现nexT主题更新到6.0+，在GitHub上面的路径也换了，最终决定重新搭建博客。

准备

软件、环境这些可以参考博客搭建这篇文章搭建博客。
使用hexo init本地新建一个博客之后，下载最新的next主题。

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

配置

以前写的文章对Hexo、nexT的配置文件没有进行详细的说明，这次搭建的时候发现有点头痛！因此，这次准备把所用到的各个字段都进行记录，便于以后出现意外情况再次重建。

Hexo配置

Hexo的配置为hexo根目录下的_config.yml文件。

Site配置

用于配置站点的主要属性。

1
2
3
4
5
6
7
# Site
title: #站点主标题
subtitle: #站点副标题
description: #站点描述
author: #站点作者
language: #站点语言
timezone: #站点时区

Url配置

用于配置Url请求时的主要属性。
Url这块我进行了优化，安装了hexo-abbrlink插件：让文章链接唯一化。在hexo根目录下执行$ npm install hexo-abbrlink --save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: #站点url
enforce_ssl: #强制使用ssl
root: #站点目录
permalink: archives/:abbrlink.html #站点链接设置
abbrlink: #abbrlink设置
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
  ## crc16 & hex
  ##  https://iassas.com/posts/66c8.html
  ## crc16 & dec
  ##  https://iassas.com/posts/65535.html
  ## crc32 & hex
  ##  https://iassas.com/posts/8ddf18fb.html
  ## crc32 & dec
  ##  https://iassas.com/posts/1690090958.html
permalink_defaults:

Directory配置

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

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source        #资源文件夹，这个文件夹用来存放内容
public_dir: public        #公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags             #标签文件夹
archive_dir: archives     #归档文件夹
category_dir: categories  #分类文件夹
code_dir: downloads/code  #Include code 文件夹
i18n_dir: :lang           #国际化（i18n）文件夹
skip_render:              #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径

Writing配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
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:

Home page配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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

archive_generator: #档案索引
  per_page: 20
  yearly: true
  monthly: true

tag_generator: #标签索引
  per_page: 10

Category & Tag配置

用于配置分类、标签的主要属性。

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

Date配置

用于配置日期的主要属性。该部分的配置不需要修改。

1
2
3
4
5
6
# 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         #时间格式

Pagination配置

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

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10                   #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page           #分页目录

Extensions配置

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

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

Deployment配置

用于配置部署的主要属性。
我就选择部署到GitHub，还支持Heroku、Rsync、OpenShift、FTPSync等。可以参考官网说明。
部署到GitHub需要安装hexo-deployer-git插件，在hexo根目录下执行$ npm install hexo-deployer-git --save。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/youname/youname.github.io.git
  branch: master

search配置

用于配置搜索的主要属性。
启用搜索需要安装hexo-generator-search、hexo-generator-searchdb插件，在hexo根目录下执行

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

安装完之后还需要在nexT主题里面进行配置。后续会说到如何配置，稳住。

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

feed配置

用于配置RSS。
RSS和ATOM的区别，可以参考这里。

1
2
3
4
5
6
feed:
  type: atom        #atom/rss2
  path: atom.xml    #feed路径
  limit: 10         #最大帖子数
  hub:           
  content:          #true/false 是否将整个页面包含进去

hexo-neat配置

用于博客压缩，加快访问速度。
启用压缩需要安装hexo-neat，在hexo根目录下执行$ npm install hexo-neat --save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-neat 静态资源压缩
neat_enable: true 
neat_html:
  enable: true
  exclude: 
neat_css:
  enable: false
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

hexo-encypt配置

用于文章加密。
启用文章加密需要安装hexo-blog-encrypt，在hexo根目录下执行$ npm install hexo-blog-encrypt --save

1
2
3
# 文章加密功能
encrypt:
  enable: true

启用加密功能需要在文章的Front-matter部分添加password字段即可。建议修改post.md模版，目录为hexo\scaffolds\。

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
password:          #文章密码
abstract:          #文章摘要
message:           #密码提示
---

hexo-autonofollowp配置

用于外部链接优化，主要作用：

  1. 防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。
  2. 付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。
  3. 引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。
    其主要方法是给所有外部链接加上rel=”external nofollow”属性，对外部链接target=”_blank”采用在新窗口种打开外部链接的方法。
    启用该功能需要安装hexo-autonofollowp，在hexo根目录下执行$ npm install hexo-autonofollowp --save
    1
    2
    3
    4
    5
    # 外部链接优化
    nofollow:
        enable: true
        exclude:     # 例外的链接，可将友情链接放置此处
        - 'yousite'

sitemap配置

用于站点地图配置，主要用于SEO优化。
启用该功能需要安装hexo-generator-sitemap、hexo-generator-baidu-sitemap，在hexo根目录下执行

1
2
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

配置如下

1
2
3
4
5
# hexo sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

symblos_count_time配置

用于站点字数、阅读时间统计等。
启用该功能需要安装hexo-symbols-count-time，在hexo根目录和next主题目录下执行$ npm install hexo-symbols-count-time --save。**注意这里我是两个地方都执行**。

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

live2d配置

用于站点’吉祥物’设置，作用应该是美化站点吧。手动/斜眼笑！
想要吉祥物的话需要先安装hexo-helper-live2d，在hexo根目录下执行$ npm install hexo-helper-live2d --save。接下来修改next主题目录的_layout.swig文件，路径为hexo\themes\next\layout\。在合适的地方给它安个家，要在body标签之间，例如

1
<body>{{ live2d() }}</body>

也可以看看喜欢什么吉祥物。

1
2
3
4
5
live2d:
  model: z16
  bottom: -30
  mobileShow: true
  mobileScaling: 0.5

lazyload配置

用于图片快速加载设置。
启用该功能需要安装hexo-lazyload-image，在hexo根目录在执行$ npm install hexo-lazyload-image --save

1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png

nexT配置

nexT的配置文件为next目录下的_config.yml文件，路径为hexo\themes\next_config.yml。由于nexT的配置较多，就记录修改或者启用的地方。配置文件中所填写的目录路径皆为/source目录下，例如修改图标来源将参数值设置成/images/favicon.ico的话，表示来源为hexo\themes\next\source\images\favicon.ico。

favicon设置

用于图标设置，效果显示在站点标签页的地方。

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.ico
  medium: /images/favicon-32x32-next.ico
  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

keyword设置

用于关键字设置。

1
keywords: "keyword1, keyword2, keyword3"

rss设置

用于rss设置，结合hexo中的设置。

1
rss: /atom.xml

footer设置

用于页脚设置，nexT6.0可以在配置文件中设置页脚。以前用5.X的时候，需要自己手工去修改。所以及时更新很重要哦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: #网站建立日期

  # Icon between year and copyright info.
  icon: heart #年份和版权之间的图标

  # If not defined, will be used `author` from Hexo main config.
  copyright: Hywell #版权
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false
  # -------------------------------------------------------------
  # Any custom text can be defined here.
  custom_text: #输入自定义文本

SEO设置

用于seo优化设置。

1
2
3
canonical: true
seo: true
index_with_subtitle: true

用于导航栏设置。这里的顺序会影响导航栏上显示布局的顺序。

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || home
  categories: /categories/ || th
  archives: /archives/ || archive
  tags: /tags/ || tags
  about: /about/ || user

menu_settings:
  icons: true
  badges: false #设置为true会显示具体的数值

Schemes设置

用于样式设置。我采用了Mist样式。

1
scheme: Mist

Sidebar设置

用于侧边栏设置。

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
site_state: true #显示文章、分类、标签

social: #友情链接设置 Key: permalink || icon
  GitHub: https://github.com/hywell || github

social_icons: #社交图标
  enable: true
  icons_only: false
  transition: true
github_banner: https://github.com/hywell || Follow me on GitHub # 用于设置右上角GitHub横幅。

# 友情链接设置
links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
  keyword: link

# 侧边栏头像设置
avatar: /images/avatar.png

# 侧边栏目录显示
toc:
  enable: true
  number: true
  wrap: true

# 侧边栏设置
sidebar:
  position: left       #位置
  display: post        #显示设置
  scrollpercent: true  #滚动百分比
  onmobile: true       #窄视图启用侧边栏

POST设置

用于发布设置。

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
scroll_to_more: true      #如果文章有摘要（<!-- more -->），会自动滚动到摘要下面。
save_scroll: true         #通过cookies来缓存阅读进度
excerpt_description: true #自动摘录描述作为序言
auto_excerpt:   #自动摘录，如果不设置<!-- more -->的话，可以用这个来控制
  enable: true
  length: 150

post_meta:            #发布元设置
  item_text: true
  created_at: true
  updated_at: true
  categories: true

symbols_count_time:   #字数与阅读时间统计设置 需安装hexo-symbols-count-time
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 25
  wpm: 50

# Wechat Subscriber           #微信二维码设置
wechat_subscriber:
  enabled: true
  qcode: /images/Wechat.jpg
  description: 描述文字

# Reward                      #打赏设置
reward_comment: 打赏comment
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

# Declare license on posts    #文章license设置
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

Code Highlight theme设置

用于代码主题设置。

1
highlight_theme: normal

needmoreshare2设置

用于分享设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
  enable: true
  postbottom:     #文章分享
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Evernote
  float:         #浮动分享
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Local search设置

用于本地搜索，需要安装hexo-generator-searchdb。

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

Reading progress bar设置

用于阅读进度设置，在top显示，需要扩展theme-next-reading-progress。

1
2
3
4
reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

pace设置

用于页面加载进度设置，我选用了pace-theme-loading-bar，需要扩展theme-next-pace。
推荐几个我个人感觉不错的：

  1. pace-theme-center-atom
  2. pace-theme-center-circle
  3. pace-theme-center-simple
  4. pace-theme-loading-bar
    1
    2
    pace: true
    pace_theme: pace-theme-loading-bar

Canvas-nest设置

用于网页背景效果设置。

1
canvas_nest: true

Gitment设置

用于页面评论系统设置，本来选用Hypercomments，在样式上设置不好看。因此，换成了Gitment。需要扩展Gitmentnpm i --save gitment。

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: true # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: user # MUST HAVE, Your Github Username
  github_repo: user.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id:  # MUST HAVE, Github client id for the Gitment
  client_secret:  # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

总结

两个配置文件弄得我满脸懵逼！！太难了~~

  1. 配置文件字段名和字段值中间需要空格;
  2. 部分插件安装、配置Hexo、nexT都需进行；
  3. 文章中存在特殊符号，需要使用三个单引号以代码形式，不然会报错；
  4. 所有配置文件icon都可以在fontawesome选择心仪的，替换即可；