0%

Hexo 玩不转

玩转玩不转的Hexo

官方指导, 是最具有权威的指导, 但是我依然要写这篇文章, 是为了让你能快速开发, 并且给出一些个人建议, 更多细节请参考官网

本文即是在 Next 主题下实现, 而其中的某些配置也是配合该主题使用的, 本人也会在配置上说明

准备工作

这儿是配置必要的环境, 已经配置好的请跳过

Node

  • Windows 下直接去官网 下载

  • 安装完成后使用命令 node -v 检测是否安装成功

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

  • 在node 装好后, 使用命令 npm install hexo-cli -g 安装 hexo脚手架工具
  • 更多指导跳官网

文章链接永久化

  • 安装依赖

    1
    npm i hexo-abbrlink -S
  • 配置Permalink

    1
    permalink: blog/:abbrlink/  - 此处的blog可换成任意你喜欢的目录
  • 添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # abbrlink config
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
    可选择的算法:
    crc16 & hex
    crc16 & dec
    crc32 & hex
    crc32 & dec

Next 主题

本人仅选择一个主题作为介绍, 其他主题的用法或者功能或有不同, 不过可以参考和类推 自制主题 Next 主题

Quick Start

1
2
cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

next主题集成gitment评论系统

当然Next主题中也包含了很多主题, 习惯了github的邮箱推送, 可能其他评论系统也有, 请自行发掘
这个评论主要是把评论放到github的issues系统里.

注册Oauth

点击注册 Authorization callback URL 就是你要申请登录的网站

修改配置

  • next 主题配置 _config.yml 添加
1
2
3
4
5
6
7
8
9
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
githubID: yourid
repo: yourrepo
ClientID: yourid
ClientSecret: yoursecret
lazy: true
  • 主题next目录下 languages/en.yml 添加
1
gitmentbutton: Show comments from Gitment
  • 主题next目录下 languages/zh-Hans.yml增加:
1
gitmentbutton: 显示 Gitment 评论

添加gitment评论判断

layout/_partials/comments.swig

1
2
{% elseif theme.changyan.appid and theme.changyan.appkey %}
<div id="SOHUCS"></div>

下新增

1
2
3
4
5
6
7
{% elseif theme.gitment.enable %}
{% if theme.gitment.lazy %}
<div onclick="ShowGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
<div id="gitment-container" style="display:none"></div>
{% else %}
<div id="gitment-container"></div>
{% endif %}

添加gitment显示文件

layout/_third-party/comments/目录下中添加文件gitment.swig
并且引入在layout/_third-party/comments/index.swig文件中引入 include 'gitment.swig'

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
{% if theme.gitment.enable %}
{% set owner = theme.gitment.githubID %}
{% set repo = theme.gitment.repo %}
{% set cid = theme.gitment.ClientID %}
{% set cs = theme.gitment.ClientSecret %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
{% if not theme.gitment.lazy %}
<script type="text/javascript">
var gitment = new Gitment({
id: window.location.pathname,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
</script>
{% else %}
<script type="text/javascript">
function ShowGitment(){
document.getElementById("gitment-display-button").style.display = "none";
document.getElementById("gitment-container").style.display = "block";
var gitment = new Gitment({
id: document.location.href,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
}
</script>
{% endif %}
{% endif %}

添加gitment样式

在主题目录下 source/css/_common/components/third-party/ 下添加gitment.styl文件
并且在 source/css/_common/components/third-party/third-party.styl 下引入 @import "gitment";

1
2
3
4
5
6
7
8
9
10
11
12
13
#gitment-display-button{
display: inline-block;
padding: 0 15px;
color: #0a9caf;
cursor: pointer;
font-size: 14px;
border: 1px solid #0a9caf;
border-radius: 4px;
}
#gitment-display-button:hover{
color: #fff;
background: #0a9caf;
}

迁移

迁移操作很简单, 更多详见 官方指南

  • 目标: Jekyll
  • 操作: 把 _posts 文件夹内的所有文件复制到 source/_posts 文件夹,并在 _config.yml 中修改 new_post_name 参数。
    new_post_name: :year-:month-:day-:title.md

标签与分类

创建页面

标签与分类, 是为了更好的规整文档, 本段是配合next主题使用的

1
2
3
cd your-hexo-site 
hexo new page tags # 创建标签页面
hexo new page categories # 创建分类页面

修改页面类型

分别在刚才添加的分类和标签页面 添加type 以及 comments 评论功能关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: categories
date: 2017-12-05 11:38:23
type: "categories"
comments: false
---

---
title: categories
date: 2017-12-05 11:38:23
type: "tags"
comments: false
---

修改配置文件

修改菜单显示 在主题的配置文件 _config.yml 中添加标签和分类

1
2
3
4
5
menu:
home: /
archives: /archives/
tags: /tags/
categories: /categories/

使用标签和分类

在新建的文章中,添加tags 以及 categories即可. 示例:

1
2
3
4
5
6
7
8
9
---
title: Hexo 玩不转
abbrlink: 4fce4897
date: 2017-12-02 14:14:06
tags:
- 玩不转
category:
- 实践先锋
---

Tag Plugins 标签插件

标签插件是用于在文章中快速插入特定内容的插件。

Quote 引用块

这儿只做简单示例, 更多使用请查看官网

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

例如:

1
2
3
{% blockquote Hexo https://hexo.io/news/ Hexo 3.2 Released %}
It has been a long time that Hexo is poor at handling large website. (#710, #1124, #283, #1187, #550, #1769, etc.) We tried hard to solve this problem and there’re several improvements in Hexo 3.2.
{% endblockquote %}

显示效果

It has been a long time that Hexo is poor at handling large website. (#710, #1124, #283, #1187, #550, #1769, etc.) We tried hard to solve this problem and there’re several improvements in Hexo 3.2.

资源与数据

这段主要讨论的是如何合理的使用资源和数据, 我会列出 Hexo 官方的做法, 以及个人的想法

资源文件夹

基本加载方式

最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

相对路径引用的标签插件

  1. 修改配置文件_config.yml
    post_asset_folder: true

  2. 相对路径引用标签

    1
    正确的引用图片方式是使用标签插件而不是 markdown

    以上是官网给的回答, 个人认为Markdown的比较简单好用, 而且学习一个新的标签语法用来写博客也会增加学习成本. (毕竟就只是写个博客而已^_^)

数据文件夹

Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件.

举例来说,在 source/_data 文件夹中新建 menu.yml 文件:

1
2
3
Home: /
Tags: /tags/
Archives: /archives/

您就能在模板中使用这些资料:
1
2
3
<% for (var link in site.data.menu) { %>
<a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :
1
2
3
<a href="/"> Home </a>
<a href="/tags/"> Tags </a>
<a href="/archives/"> Archives </a>

草稿与推送

Hexo 的一种特殊布局 Draft 草稿, 是保存在 source/_drafts 目录下, 草稿默认不会显示在页面中, 这就方便了我们编写, 不会把半成品推上去 ^_^

操作指令

新建草稿文本

1
hexo new draft <title>

发布草稿文本

1
hexo publish [layout] <title>

预览设置

为了方便调试, 你可以修改该配置来预览草稿

1
render_drafts: true