原文链接: https://iassas.com/archives/d6a90b9.html
准备
软件、环境这些可以参考博客搭建这篇文章搭建博客。
使用hexo init本地新建一个博客之后,下载最新的next主题。
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
配置
以前写的文章对Hexo、nexT的配置文件没有进行详细的说明,这次搭建的时候发现有点头痛!因此,这次准备把所用到的各个字段都进行记录,便于以后出现意外情况再次重建。
Hexo配置
Hexo的配置为hexo根目录下的_config.yml文件。
Site配置
用于配置站点的主要属性。
title: #站点主标题
subtitle: #站点副标题
description: #站点描述
author: #站点作者
language: #站点语言
timezone: #站点时区
Url配置
用于配置Url请求时的主要属性。
Url这块我进行了优化,安装了hexo-abbrlink插件:让文章链接唯一化。在hexo根目录下执行
$ npm install hexo-abbrlink --save
### 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配置
用于配置站点目录的主要属性。该部分的配置不需要修改。
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配置
用于配置主页的主要属性。
# 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配置
用于配置分类、标签的主要属性。
# Category & Tag
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名
Date配置
用于配置日期的主要属性。该部分的配置不需要修改。
# 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配置
用于配置分页的主要属性。
# Pagination
### Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
Extensions配置
用于扩展的主要属性。
plugin我加了hexo-generator-feed(用来生成RSS),theme我选择用next。
# 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
。
# 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根目录下执行
$ npm install hexo-generator-search --save
$ npm install hexo-generator-searchdb --save
安装完之后还需要在nexT主题里面进行配置。后续会说到如何配置,稳住。
search:
path: search.xml
field: post
format: html
limit: 10000
feed配置
用于配置RSS。
RSS和ATOM的区别,可以参考这里。
hexo-neat配置
用于博客压缩,加快访问速度。
启用压缩需要安装hexo-neat,在hexo根目录下执行$ npm install hexo-neat --save
# 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
# 文章加密功能
encrypt:
enable: true
启用加密功能需要在文章的Front-matter部分添加password字段即可。建议修改post.md模版,目录为hexo\scaffolds\。
---
title: {{ title }}
date: {{ date }}
tags:
categories:
password: #文章密码
abstract: #文章摘要
message: #密码提示
---
hexo-autonofollowp配置
用于外部链接优化,主要作用:
防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
付费链接:为了防止付费链接影响Google的搜索结果排名,Google建议使用nofollow属性。
引导爬虫抓取有效的页面:避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。
其主要方法是给所有外部链接加上rel=”external nofollow”属性,对外部链接target=”_blank”采用在新窗口种打开外部链接的方法。
启用该功能需要安装hexo-autonofollowp,在hexo根目录下执行$ npm install hexo-autonofollowp --save
# 外部链接优化
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 'yousite'
sitemap配置
用于站点地图配置,主要用于SEO优化。
启用该功能需要安装hexo-generator-sitemap、hexo-generator-baidu-sitemap,在hexo根目录下执行
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
配置如下
# 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
。注意这里我是两个地方都执行。
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标签之间,例如
{{ live2d() }}
也可以看看喜欢什么吉祥物。
live2d:
model: z16
bottom: -30
mobileShow: true
mobileScaling: 0.5
lazyload配置
用于图片快速加载设置。
启用该功能需要安装hexo-lazyload-image,在hexo根目录在执行$ npm install hexo-lazyload-image --save
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设置
用于图标设置,效果显示在站点标签页的地方。
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设置
用于关键字设置。
keywords: "keyword1, keyword2, keyword3"
rss设置
用于rss设置,结合hexo中的设置。
rss: /atom.xml
footer设置
用于页脚设置,nexT6.0可以在配置文件中设置页脚。以前用5.X的时候,需要自己手工去修改。所以及时更新很重要哦。
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优化设置。
canonical: true
seo: true
index_with_subtitle: true
Menu设置
用于导航栏设置。这里的顺序会影响导航栏上显示布局的顺序。
menu:
home: / || home
categories: /categories/ || th
archives: /archives/ || archive
tags: /tags/ || tags
about: /about/ || user
menu_settings:
icons: true
badges: false #设置为true会显示具体的数值
Schemes设置
用于样式设置。我采用了Mist样式。
scheme: Mist
Sidebar设置
用于侧边栏设置。
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设置
用于发布设置。
scroll_to_more: true #如果文章有摘要(),会自动滚动到摘要下面。
save_scroll: true #通过cookies来缓存阅读进度
excerpt_description: true #自动摘录描述作为序言
auto_excerpt: #自动摘录,如果不设置的话,可以用这个来控制
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设置
用于代码主题设置。
highlight_theme: normal
needmoreshare2设置
用于分享设置。
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
Reading progress bar设置
用于阅读进度设置,在top显示,需要扩展theme-next-reading-progress。
reading_progress:
enable: true
color: "#37c6c0"
height: 2px
pace设置
用于页面加载进度设置,我选用了pace-theme-loading-bar,需要扩展theme-next-pace。
推荐几个我个人感觉不错的:
- pace-theme-center-atom
- pace-theme-center-circle
- pace-theme-center-simple
- pace-theme-loading-bar
pace: true
pace_theme: pace-theme-loading-bar
Local search设置
用于本地搜索,需要安装hexo-generator-searchdb。
Canvas-nest设置
用于网页背景效果设置。
canvas_nest: true
Gitment设置
用于页面评论系统设置,本来选用Hypercomments,在样式上设置不好看。因此,换成了Gitment。需要扩展Gitment
npm i --save gitment
。
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
总结
两个配置文件弄得我满脸懵逼!!太难了~~
- 配置文件字段名和字段值中间需要空格;
- 部分插件安装、配置Hexo、nexT都需进行;
- 文章中存在特殊符号,需要使用三个单引号以代码形式,不然会报错;
- 所有配置文件icon都可以在fontawesome选择心仪的,替换即可;