Blog更新&配置文件详解

最近博客的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选择心仪的,替换即可;