Hexo 大结局

发表于 分类于 阅读次数： 本文字数： 4.2k 阅读时长 ≈ 4 分钟
默认

Hexo 大结局 —— 本篇作为折腾 hexo 的最后一篇，本文写完就再也不折腾 hexo 了。（不过可以折腾一下 Typecho,Hugo,WordPress）

如何跳过 hexo 的渲染

查看官方文档页面跳过 hexo 的渲染主要有两种方式：

Front matter

  • 新建页面，然后将你的代码直接写入 index.md 中

  • 在 Front matter 中添加 layout: false，例如我的 Sakura 樱花雨页面，此方法适用于单一的纯 HTML
    css 页面。

    1
    2
    3
    4
    5
    6
    ---
    title: sakura
    date: 2019-11-29 16:59:51
    type: "sakura"
    layout: false
    ---

    c

skip_render

  • 如果页面含有复杂的 js，layout 的方式可能容易报错，因此利用 hexo 自带的 skip_render
  • 在根目录【根目录】的_config.yml，你可以看到 skip_render，大致在 32 行。写入你想要的跳过渲染的路径，例如我的烟花 - CodePen 页面：
1
Yamlskip_render:    - 'fireworks/*'    - 'fireworks/**'

  • 注意缩进和空格，解释一下：'fireworks/*' 表示在目录 source/fireworks 下的文件全部跳过渲染，'fireworks/**' 表示在目录 source/fireworks/文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。这里有点重复了，只为了你能看明白。

  • Hexo 最终是把 md 渲染为 HTML 页面，所以既然跳过渲染，那页面就只写入 HTML。如图，将新建页面的 index.md 直接改为 HTML（注意调整 css）
    文件示例图

    文件示例图

可以混用

  • 都是跳过渲染，当然可以混用

  • 例如我的小圆点页面，两种方法混用

  • 修改 md 为 HTML，直接写入 HTML，并在 Front matter 中利用 layout: false
    跳过渲染
    小圆点页面示例图

    小圆点页面示例图

  • 若采用第二种方法，在根目录【根目录】的_config.yml 添加

    1
    2
    3
    4
    Yaml
    skip_render:
        - 'dot/*'
        - 'dot/**'

文章中直接嵌入 HTML

  • 既然 md 最终会被渲染为 HTML，那直接写 HTML 当然是可以的，但只能以文章形式展示，而不是新的页面

  • 例如我在这嵌入一个颜色表，HTML 代码完整，前后换行留空即可

    颜色名 十六进制颜色值 颜色
    SteelBlue #4682B4 rgb(70, 130, 180)
    Tan #D2B48C rgb(210, 180, 140)
    Teal #008080 rgb(0, 128, 128)
    Thistle #D8BFD8 rgb(216, 191, 216)
    Tomato #FF6347 rgb(255, 99, 71)
    Turquoise #40E0D0 rgb(64, 224, 208)
    Violet #EE82EE rgb(238, 130, 238)
    VioletRed #D02090 rgb(208, 32, 144)
    Wheat #F5DEB3 rgb(245, 222, 179)
    White #FFFFFF rgb(255, 255, 255)
    WhiteSmoke #F5F5F5 rgb(245, 245, 245)
    Yellow #FFFF00 rgb(255, 255, 0)
    YellowGreen #9ACD32 rgb(154, 205, 50)

永久链接

默认链接

默认的链接格式为

1
2
Yaml
year/:month/:day/:title/

如果文章名是中文，由于编码生成的链接会很长，况且不利于 SEO

利用字段替换链接

根据官方文档 hexo.io/docs，可以利用一个字段定义永久链接

变量 描述
:year 文章的发表年份（4 位数）
:month 文章的发表月份（2 位数）
:i_month 文章的发表月份（去掉开头的零）
:day 文章的发表日期 (2 位数)
:i_day 文章的发表日期（去掉开头的零）
:hour 文章发表时的小时 (2 位数)
:minute 文章发表时的分钟 (2 位数)
:title 文件名称
:post_title 文章标题
:id 文章 ID (not persistent across cache reset)
:category 分类。如果文章没有分类，则是 default_category 配置信息。

例如：在 front matter 中加入 id：xxxx

1
2
3
4
5
6
7
Yaml
---
title: title
categories:
tags:
id: xxxx
---

在 hexo 根目录加入或修改 permalink

1
2
3
Yaml
permalink: posts/:id.html/
permalink_defaults:

这样文章地址就会变为 https://xxx.com/posts/id.html，无需插件也能设置永久链接。

  • 项目地址：hexo-abbrlink
  • 安装插件
1
2
Bash
npm install hexo-abbrlink --save
  • 在根目录 blog\scaffolds\post.md 中添加 abbrlink 字段（不加也行）
  • 根目录 config.yml 下设置
1
2
3
4
5
6
Yaml
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32  # crc16(default) and crc32
rep: hex    # dec(default) and hex
permalink_defaults:

hexo clean 之后本地预览时便可重新生成永久链接，文章 front matter 会多一个 abbrlink 字段

永久链接格式为 https://xxx.com/posts/abbrlink.html

  • 插件参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Code
abbrlink:
alg: crc32  #support crc16(default) and crc32
rep: hex    #support dec(default) and hex

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

使用技巧

  • 虽然 abbrlink 是自动生成的，可以在文章的 front matter 自定义修改。
  • 以前用了 hexo 默认链接 year/:month/:day/:title/，安装插件插件后所有文章链接都会发生变化，那么评论怎么办？

对于我这样的小破站，好不容易才有几条评论，就这样丢失了心有不甘啊

想到了几个解决方案：

  1. 既然可以自定义 abbrlink，那只要将根目录配置改为

    1
    2
    3
    Yaml
    permalink: :abbrlink
    permalink_defaults:

    这样的话再把需要留下评论的页面 front matter 改回原来的链接格式 year/:month/:day/:title/，不仅仅是格式，日期名称也必须和原来保持一致

  2. 群友提示，如果像我一样用的 valine 评论，可以直接在 leancloud 后台修改 URL，valine 绑定的相对路径，哪怕更换域名，只要保证文章链接一致，评论便可保留。
    leancloud

    leancloud

常用链接格式

permalink 格式预览
:abbrlink/ xxx.com/xxx
:abbrlink.html/ xxx.com/xxx.html
posts/:abbrlink.html/ xxx.com/posts/xxx.html
article/:abbrlink.html/ xxx.com/article/xxx.html

pinyin 插件

  • 将中文链接转拼音，安装插件

    1
    2
    Bash
    npm i hexo-permalink-pinyin --save

  • 在 Hexo 根目录下的 _config.yml 文件中，修改以下的配置项：

    1
    2
    3
    4
    5
    6
    Yaml
    permalink: article/:title.html
    permalink_pinyin:
    enable: true
    separator: '-'  # default: '-'
    permalink_defaults:

    永久链接格式为

    1
    https://xxx.com/posts/wen-zhang-ming.html

  • 实用性不是很好，如果标题文字很多，链接依然会很长。

如何在页脚养鱼

效果就在页脚，是不是很想要？这里简述 butterfly 主题的引入方法，其他主题类似，实在不行建议更换 butterfly 主题

！！！不要修改源码，若已修改请恢复原样
在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js 即可

1
2
Yaml
- <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>

调整页脚阴影透明度 themes\butterfly\source\css\_layout\footer.styl

1
2
Code
background-color: alpha($dark-black, .1)

文章页页脚宽度多余导致出现横向滚动条，新建 xxx.css，添加以下 css 引入 inject 即可（若设置了全局背景去掉固定高度 height: 160px 引入即可）

1
2
3
4
5
6
7
8
Code
/* 鱼塘固定宽度 */
canvas:not(#ribbon-canvas), #web_bg {
    margin-bottom: -0.5rem;
    display: block;
    width: 100%;
    height: 160px
}
 

修改源码实现方法（其它主题可参考此处）

参考

https://xiabor.com/714f.html