Blog更新&配置文件详解

发表于 更新于 分类于 阅读次数： 本文字数： 11k 阅读时长 ≈ 10 分钟

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

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

准备

软件、环境这些可以参考博客搭建这篇文章Post not found: Blog/build-blog。
使用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。
    推荐几个我个人感觉不错的：
  4. pace-theme-center-atom
  5. pace-theme-center-circle
  6. pace-theme-center-simple
  7. 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

    总结

    两个配置文件弄得我满脸懵逼！！太难了~~
  8. 配置文件字段名和字段值中间需要空格;
  9. 部分插件安装、配置Hexo、nexT都需进行；
  10. 文章中存在特殊符号，需要使用三个单引号以代码形式，不然会报错；
  11. 所有配置文件icon都可以在fontawesome选择心仪的，替换即可；
相关文章