Hexo 安装及配置
安装
本地环境要求：nodejs 6.9+、git
$ npm install -g hexo-cli
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
新建完成后，指定文件夹的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
配置 _config.yml
您可以在 _config.yml 中修改大部分的 配置 。另外有几点需要注意：
-
需要填写多个值的属性可以用类似数组的形式填写，例如
keywords: [前端, 科技, 读书, 终身学习] -
将文章从 Jekyll 迁移至 Hexo ，只需把
_posts文件夹内的所有文件复制到source/_posts文件夹，把_drafts文件夹内的所有文件复制到source/_drafts文件夹，并在_config.yml中修改new_post_name参数，new_post_name: :year-:month-:day-:title.md。 -
您可以将 Hexo 生成的静态文件部署到 GitHub Page
deploy: type: git repository: https://github.com/AustinXT/AustinXT.github.io.git branch: master
scaffolds
当您新建文章时，Hexo 会根据 模版 文件夹（scaffold）来建立文件。您可以在模板中的 Front-matter 预定义参数。
| 参数 | 描述 | 默认值 |
|---|---|---|
layout |
布局 | |
title |
标题 | |
date |
建立日期 | 文件建立日期 |
updated |
更新日期 | 文件更新日期 |
comments |
开启文章的评论功能 | true |
tags |
标签（不适用于分页） | |
categories |
分类（不适用于分页） | |
permalink |
覆盖文章网址 |
分类具有顺序性和层次性，标签没有顺序和层次。例如，并列+子分类如下：
categories:
- [Linux, Hexo]
- [Tools, PHP]
# 其分类层级为
# - Linux
# - Hexo
# - Tools
# - PHP
source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
此外，可以在 source 目录下添加标签页面，运行以下命令
$ hexo new page "tags"
同时，在 source 目录下会生成一个 tags 文件夹，里面包含一个index.md文件
由于每次将博客部署到 GitHub Page，GitHub Page Setting 里设置好的域名会被刷新为空，因此需要在 source 目录下新建一个文件，命名为 CNAME ，里面填写域名，例如 austinxt.com 。
themes
Hexo 会根据主题来生成静态页面。您可以在 GitHub 检索「hexo-theme」，按 start 数排序，来筛选主题。我大致看了二十几个主题，其中，特别喜欢 hexo-theme-cactus 的风格，配色好看，又极其简约，可惜功能不符合要求。符合「首页文章摘要」和「正文有目录结构且定位当前标题」两项要求有如下五个主题：
- sanonz/hexo-theme-concise: Hexo 简约主题，响应式设计支持 PC、手机等设备，代码高亮使用 monokai-sublime 风格。
- Molunerfinn/hexo-theme-melody: A simple & beautiful & fast theme for Hexo.
- fi3ework/hexo-theme-archer: 🏹 A smart and modern theme for Hexo.
- theme-next/hexo-theme-next: Elegant and powerful theme for Hexo.
前三个略显花哨，最后选择了 start 数最高的 NexT 主题（一开始只看到 GitHub 仓库提供的 Pisces 主题示例，不太喜欢，所以继续去点其他主题了）。
安装 NexT 主题，在更目录下运行命令
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
根目录的配置文件的 theme 属性
theme: next
如何写博客
在根目录下输入一下命令，会在 source/_post 目录下生成一个按照模板构建的 Markdown 文件
$ hexo new [layout] <title>
标签插件（Tag Plugins）
Hexo 的 Markdown 还能插入标签插件，使文章渲染得更加优雅。
引用块
引用书上的句子
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}
{% blockquote David Levithan, Wide Awake %} Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. {% endblockquote %}
引用 Twitter
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %} NEW: DevDocs now comes with syntax highlighting. http://devdocs.io {% endblockquote %}
反引号代码块
``` [language] [title] [url] [link text] code snippet ```
code snippet
Gist
在文章中嵌入 Gist。
{% gist gist_id [filename] %}
iframe
在文章中插入 iframe。
{% iframe url [width] [height] %}
Image
在文章中插入指定大小的图片。
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
Youtube
在文章中插入 Youtube 视频。
{% youtube video_id %}
常用命令
hexo new "postName" #新建文章
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
NexT 主题配置
themes/next 目录下的 _config.yml 文件提供了详尽的配置说明，根据需求按顺序配置一遍即可，有些配置需要安装依赖的记得安装。我主要进行了如下配置
# 菜单
menu:
about: /about/ || user
tags: /tags/ || tags
archives: /archives/ || archive
# 主题
scheme: Mist
# 社交网站
social:
GitHub: https://github.com/AustinXT || github
E-Mail: mailto:164640966@qq.com || envelope
FB Page: https://www.facebook.com/100012833825444 || facebook
# 友情链接
links_icon: link
links_title: 友情链接
links_layout: inline
links:
阳志平: https://www.yangzhiping.com
# 头像
avatar:
url: https://xieting-img.oss-cn-hangzhou.aliyuncs.com/20190522170101.png
rounded: true
# 首页摘要
excerpt_description: true
auto_excerpt:
enable: true
length: 150
read_more_btn: true
# 赞赏
reward_settings:
enable: true
comment: 「谢谢您支持」
reward:
wechatpay: https://xieting-img.oss-cn-hangzhou.aliyuncs.com/Donate.JPG
# 代码高亮
highlight_theme: night
# 数学公式
math:
enable: true
per_page: true # 在文章的Front-matter 配置 mathjax: true 即可使用
engine: mathjax
mathjax:
cdn: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# pangu 插件
pangu: true
vendors:
pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
# gitalk
gitalk:
enable: true
github_id: 夜航星 # Github repo owner
repo: austinxt.github.io # Repository name to store issues
client_id: 7bb306012bddd706324d # Github Application Client ID
client_secret: # Github Application Client Secret
admin_user: 夜航星
distraction_free_mode: true
# 访问统计
busuanzi_count:
enable: true
post_views: true
post_views_icon: eye
# 搜索
# 需要 npm install hexo-generator-searchdb --save
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false
local_search 功能还需在根目录的 _config.yml 末尾添加如下配置
search:
path: search.xml
field: post
format: html
limit: 500
ChangeLog
- 2019-07-17 添加 CNAME 文件
- 2019-05-24 初稿