Hexo-Getting Started
文章目录

Hexo-Getting Started

Installation

(略)

关于如何在根目录放置文件

可以直接放置在 themes\Wikitten\source

例如 workbox 的 service-worker 文件 themes\Wikitten\source\sw-loader.js

themes\Wikitten\layout\common\scripts.ejs 里面通过 <%- js('sw-loader') %>

这样就可以直接放置在根目录

Post Template

2020 年 4 月更新 TOC 已经设置为默认开启, 但是如果一级标题和二级标题的总数少于一个的话则不会显示。

1
2
3
4
5
6
7
8
title: test
date: 2020-03-12 15:11:56
tags:

* asd
* dsa

categories: Tech

文章加密

插件安装

首先需要安装这个包: hexo-blog-encrypt

这里是 官方的参考文档.

加密方式

有两种加密方式, 首先第一种是根据 post 进行加密:

1
2
3
4
5
\-\-\-
title: Hello World
date: 2016-03-30 21:18:02
password: mikemessi
\-\-\-

高级设定:

1
2
3
4
5
6
7
8
9
10
11
12
13
\-\-\-
title: Hello World
tags:

* Encrypted

date: 2016-03-30 21:12:21
password: 123123
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
\-\-\-

再其次, 另一种是根据特定的 tag 进行加密.

需要实现这样的加密方式, 首先要在配置_config.yml 里面写上对应的设定:

1
2
3
4
5
6
7
8
9
10
11
12
# Security
encrypt: # hexo-blog-encrypt
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:

+ {name: tagName, password: 密码 A}
+ {name: tagName, password: 密码 B}

template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

然后只需要在 post 里面添加对应的 tag, 就可以自动实现加密:

1
2
3
4
5
6
7
8
\-\-\-
title: Callback Test
date: 2019-12-21 11:54:07
tags:

- Encrypted

\-\-\-

加密模板的修改

1
2
3
4
5
6
encrypt: # hexo-blog-encrypt
tags:
- {name: Encrypted, password: zzzz}
- {name: Interviews, password: xxxx}
template: <div id="hexo-blog-encrypt" data-wpm="很显然, 你输入了个错误的密码" data-whm="本地 LocalStorage 错误"> <div class="form-group password"> <label for="exampleDropdownFormPassword1"> 加密文章 </label> <input type="password" id="hbePass" class="form-control" id="exampleDropdownFormPassword1" placeholder="请输入密码"> </div> <script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script> </div>
abstract: -

这里将 template 里面风格改成了 bootstrap4 的模式。

Image Assets

普通引用

图片除了可以放在统一的 images 文件夹中, 还可以放在文章自己的目录中. 文章的目录可以通过配置_config.yml 来生成.

_config.yml

1
post_asset_folder: true

将_config.yml 文件中的配置项 post_asset_folder 设为 true 后, 执行命令 $ hexo new post_name, 在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name. 将图片资源放在 post_name 中, 文章就可以使用相对路径引用图片资源了.

1
![](image.jpg)

上述是 markdown 的引用方式, 图片只能在文章中显示, 但无法在首页中正常显示.

如果希望图片在文章和首页中同时显示, 可以使用标签插件语法 (见下文)

Hexo 文章引用 post_link

TL’DR

1
2
3
4
5
6
7
8
9
10
# notebook 站点使用了文件夹功能,所以还是要写上相对 `_Post` 的相对路径
{% post_link Dev/Hexo/Hexo-持续集成 %}
{% post_link Dev/Hexo/Hexo-持续集成 这里是别名 %}

# 需要注意的是,如果文件名里面有空格,那么需要用引号将其括起来。
{% post_link 'Projects/Main Blog/Blog-Main' %}

# 格式
{% post_path filename %}
{% post_link filename [title] [escape] %}

asset_img 引用图片资源

TL’DR

1
{% asset_img slug [abc.jpg] %}

相关文档

相关文档 ]

创建一个文件夹和 MD 的文件同名:

XXX. MD 就要创建一个 XXX 的文件夹

1
2
3
4
HelloWorld
├── abc2.jpg
└── abc.jpg
HelloWorld-Publish.md

图片放在里面

然后使用以下语句引用

1
{% asset_img slug [abc.jpg] %}

Hexo Deploy

Hexo 具有一键部署的功能.

首先需要安装 hexo-deployer-git.

1
$ npm install hexo-deployer-git --save

修改配置:

1
2
3
4
5
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
  • repo
    • 库 (Repository) 地址
  • branch
    • 分支名称
    • 比如: gh-pages 或者 master 或者 coding-pages
  • message
    • Site updated: now('YYYY-MM-DD HH:mm:ss') )
  • token
    • Optional
    • 如果希望通过 PAT 访问的话就需要设置
    • token value to authenticate with the repo. Prefix with $ to read token from environment variable

多语言国际化

在 language 文件夹下面新建几个 yml 或者 json

en.yml

1
2
3
4
5
6
7
index:
title: Home
add: Add
video:
zero: No videos
one: One video
other: %d videos

然后在实际的模板文件里面使用这样的语法:

1
2
3
4
5
<%= __('index.title') %>
// Home

<%= _p('index.video', 3) %>
// 3 videos

最后在 _config.yml 中调整 language 设定, 这代表的是预设语言

1
2
3
4
5
6
language: zh-tw

language:

* zh-tw
* en

参考文献