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选择心仪的,替换即可;
Hywell wechat
遗世独立
-------------本文结束感谢您的阅读-------------
羽化登仙
显示 Gitment 评论
0%