📚 文档目录

🚀 快速开始

你可以通过右下角的 繁 按钮切换为繁体显示 

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note green 'fas fa-rocket' %}

 📚  文档目录

{% post_link 博客文档配置教程 '🚀 快速开始 ' %}

{% endnote %}

{% note orange 'fas fa-magic' %}

你可以通过右下角的 繁 按钮切换为繁体显示 

{% endnote %}

前置格式（Front-matter）

某文档的前置格式: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: Butterfly 安装文档(二) 主题页面
date: 2020-05-28 22:34:41
tags:
  - 教程
  - Hexo
  - 主题
  - butterfly
categories: 
  - Docs文档
keywords: 'hexo,butterfly,主题,doc,教程,文档'
description: Butterfly安装文档-主题页面
cover: https://jsd.012700.xyz/gh/jerryc127/CDN/img/Butterfly-docs-02-cover.png
abbrlink: dc584b87
comments: false
---

Page 页面格式

可以设置的字段格式如下:

字段 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块 (默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax
katex 【可选】显示katex
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css，参考音乐配置
highlight_shrink 【可选】配置代码框是否展开 (true/false)
random 【可选】配置友情链接是否随机排序（默认为 false)
sticky 【可选】sticky: true既可实现文章置顶效果

常用可选字段:

字段 值
updated 2024-6-22 17:00:16
description 描述的文字
keywords ‘hexo,butterfly,主題,关键词’
comments true
top_img 图片地址
aside true
highlight_shrink true
random false
sticky false

Post 文章格式

可以设置的字段格式如下: （已经存在的字段就不重复显示）

字段 解释
tags 【可选】文章标签
categories 【可选】文章分类
cover 【可选】文章缩略图
toc 【可选】显示目录
toc_number 【可选】显示目录序号
toc_style_simple 【可选】显示目录简洁模式
copyright 【可选】显示文章版权模块
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者连接
copyright_url 【可选】文章版权模块的文章连接连接
copyright_info 【可选】文章版权模块的版权声明文字
abcjs 【可选】加载abcjs（默认false）
abbrlink 【可选】文章路径重定向【Abbrlink】

常用可选字段:

字段 值
tags - 教程
- Hexo
categories - Docs文档
- 教程
cover 图片地址
toc true
toc_number true
toc_style_simple false
copyright true
copyright_author 作者名
copyright_author_href 作者链接
copyright_url 文章链接
copyright_info 版权信息

Front-matter 示例

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
title: 前置格式（Front-matter）
date: 2024-6-22 19:08:11
updated: 2024-6-22 20:51:30
tags:
  - 帮助文档
  - Hexo
categories: 
  - 教程
keywords: 'hexo,front-matter,教程,前置'
description: 相关Front-matter配置内容，Post书写内容格式教程
cover: https://jsd.012700.xyz/gh/jerryc127/CDN/img/Butterfly-docs-02-cover.png
top_img: https://yuanxiapi.cn/api/img/photo/42246923.jpg
abbrlink: d03f5ca5
comments: false
aside: true
highlight_shrink: true
random: false
toc: true
toc_number: 3
toc_style_simple: true
copyright: true
copyright_author: Bencky
copyright_author_href: https://github.com/bencky
copyright_url: https://www.baidu.com
copyright_info: 版权文字

常用格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
title: 前置格式（Front-matter）
date: 2024-6-22 19:08:11
updated: 2024-6-22 20:51:30
tags:
  - 帮助文档
  - Hexo
categories: 
  - 教程
keywords: 'hexo,front-matter,教程,前置'
description: 相关Front-matter配置内容，Post书写内容格式教程
cover: https://yuanxiapi.cn/api/img/photo/42246923.jpg
top_img: https://yuanxiapi.cn/api/img/photo/42246923.jpg
abbrlink: d03f5ca5
comments: false
aside: true

右下角按钮 (Bottom right button)

可选项有：readmode,translate,darkmode,hideAside,toc,chat,comment

自定义顺序

可以在配置文件中设置按钮顺序，以及显示和隐藏的按钮：

1
2
3
4
5
6
7
# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# 选择: readmode,translate,darkmode,hideAside,toc,chat,comment
# 不要重复
rightside_item_order:
  enable: true
  hide: readmode,translate,darkmode # readmode,translate,darkmode,hideAside
  show: hideAside,toc,chat,comment # toc,chat,comment

标签外挂（Tag Plugins）

提示标签（note）

标签外挂使用：{% 标签名称 %}来实现外挂效果

标签外挂是Hexo独有的功能，并不是标准的Markdown格式。

格式如下：

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class/color 【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
（ default / blue / pink / red / purple / orange / green ）
no-icon/icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

效果如下：

默认样式效果：simple/modern/flat/disabled

success 提示块标签，disabled样式

success 提示块标签，simple样式

success 提示块标签，modern样式

success 提示块标签，flat样式

自定义icon效果（v3.2.0以上）

小心开车 安全至上，disabled样式

小心开车 安全至上，simple样式

小心开车 安全至上，modern样式

小心开车 安全至上，flat样式

图库外挂（gallery）

详细内容跳转：图库外挂标签

切换标签（tabs）

添加文档中的切换标签，需要使用指定标签外挂：

开始标签 结束标签
标签组 {\% tabs unique_name,[index] \%} {% endtabs %}
子标签 <!-- tab [Tab caption] [@icon] --> <!-- endtab --> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
任何内容（也支持内联标记）
<!-- endtab -->
{% endtabs %}

Unique name   : 唯一名称，不带逗号的块标记
                将在#id中用作每个选项卡及其索引号的前缀
                如果名称中有空格，则对于生成的'#id'，所有空格都将被短划线替换
                仅针对当前文章/页面的url必须是唯一的
[index]       : 激活的标签索引
                如果未指定，默认选择第一个选项卡（1）
                如果索引为-1，则不会选择任何选项卡
                可选参数
                
------------------------------------------------------------------------------------

[Tab caption] : 当前标签的标题
                如果未指定标题，则带有标签索引后缀的唯一名称将用作选项卡的标题
                如果未指定标题，而是指定了图标，则标题将为空
                可选参数
[@icon]       : FontAwesome的图标名称（全名，类似“fas fa-font”）
                可以指定有空格或没有空格；例如“Tab caption @icon”类似于“Tab caption@icon'
                可选参数

片段代码如下：

1
2
3
4
5
6
7
8
9
10
11
{% tabs test-tab,2 %}
<!-- tab 标签一 -->
标签一自定义名称
<!-- endtab -->
<!-- tab @fab fa-apple-pay -->
标签二没有名称，仅有icon
<!-- endtab -->
<!-- tab 标签三@fas fa-bomb -->
标签三有名称+icon
<!-- endtab -->
{% endtabs %}

效果如下：

标签一自定义名称

标签二没有名称，仅有icon

标签三有名称+icon

隐藏标签（tag-hide）

v2.2.0以上

使用时候，tag-hide的内容不能包含h1~h6，因为Toc会把隐藏内容标题显示出来

通过这个外挂，可以隐藏文字、内容，并提供按钮给用户点击

有几种不同的格式：inline、block、toggle

inline：行内样式，可以与其他文字在同一行中

1
{% hideInline content,display,bg,color %}

参数：

  • content：文本内容（不能包含英文逗号，可以使用&sbquo;代替）
  • display：【可选】按钮显示的文字，默认click
  • bg：【可选】按钮的背景颜色，默认主题色
  • color：【可选】按钮文字的颜色，默认主题色

block：块模式，内容独占一个模块，不与前后元素同行

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

参数：

  • content：文本内容
  • display：【可选】按钮显示的文字，默认click
  • bg：【可选】按钮的背景颜色，默认主题色
  • color：【可选】按钮文字的颜色，默认主题色

toggle：切换模式，可以显示隐藏点击切换

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

参数：

  • content：文本内容
  • display：【可选】按钮显示的文字，默认click（不能包含英文逗号，可以使用&sbquo;代替）
  • bg：【可选】按钮的背景颜色，默认主题色
  • color：【可选】按钮文字的颜色，默认主题色

示例如下：

hideInline：

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 谁

hideBlock：

查看答案

傻子，怎么可能有答案

hideToggle：

Butterfly安装方法

在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支，可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

按钮标签（button）

v3.0以上适用

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景颜色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮布局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

标签写法：

1
{% btn 链接，按钮文字，图标，颜色，样式，布局，位置，大小 %}

示例如下：

1
2
3
4
5
6
7
8
9
10
11
普通的按钮：{% btn 'https://butterfly.js.org/',Butterfly %}
带边框按钮：{% btn 'https://butterfly.js.org/',Butterfly,,outline %}
带图标颜色：{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue %}
带边框图标：{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
带图标大图：{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

---------------------------------------------------------------------

{% btn 'https://butterfly.js.org/',块样式,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',居中大图,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',边框大图,far fa-hand-point-right,block right outline larger %}

实际效果：

普通的按钮：Butterfly
带边框按钮：Butterfly
带图标颜色：Butterfly
带边框图标：Butterfly
带图标大图：Butterfly

块样式 居中大图 边框大图

内联图片（inlineImg）

在markdown格式中，图片默认是块级模式，如果要使用内联，可以使用inlineImg外挂

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制px【可选】

示例如下：

1
看看风景：{% inlineImg https://yuanxiapi.cn/api/img/photo/42246923.jpg 100px %}

看看风景：

标记标签（label）

用来高亮显示所需要的文字，格式如下：

1
{% label text color %}
参数 解释
text 文字
color 【可选】背景颜色，默认为 default
default/blue/pink/red/purple/orange/green

示例：

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

实现效果：

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

时间轴（timeline）

v4.0.0版本以上适用

时间轴格式如下：

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

标签外挂：

开始标签 结束标签
标题时间线 {\% timeline title,color \%} {% endtimeline %}
子标签 <!-- timeline title --> <!-- endtimeline -->

参数：

参数 解释
title 标题/时间线
color timeline 颜色
default(留空) / blue / pink / red / purple / orange / green

示例：

1
2
3
4
5
6
{% timeline 2022,blue %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}
……

效果：

2024

01-03

这是测试页面3

2023

01-02

这是测试页面2

01-01

这是测试页面1

友情链接（flink）

v4.1.0版本以上适用

格式：

1
2
3
{% flink %}
content
{% endflink %}

其中，content可以是yml格式内容，与友情链接内容一样

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
{% endflink %}

效果如下：

友情链接
那些人，那些事
JerryC
JerryC
今日事,今日毕
Hexo
Hexo
快速、简单且强大的网志框架

内嵌框架（iframe）

格式：

1
{% iframe url [width] [height] %}

参数：

  • width：设置宽度，可以直接设置100%
  • height：设置区域的高度，指定px，如果使用100%可能没有效果

示例：嵌入个人主页

1
{% iframe https://bencky1017.github.io/ 100% 800px %}

图片链接（img）

除了使用![]()这种Markdown格式的图片链接，也可以使用，标签形式：

1
{% link [url_name] [url_link] [boolean] [alt] %}

其中：

  • url_name：链接名字

  • url_link：链接地址

  • boolean：判断是否使用_blank方式打开链接，true为使用

  • alt：鼠标悬浮显示的文字

示例：

1
{% link 百度网址超链接 https://www.baidu.com/ true 百度 %}

效果：

百度网址超链接

站内超链接（post_link）

格式：

1
2
{% post_path filename %}
{% post_link filename [title] [escape] %}

参数：

  • filename：站内目标文章的标题（精确匹配）
  • title：替代目标文章的标题文字
  • escape：默认true，控制特殊字符转义

示例：

1
{% post_link 博客文档配置教程 '🚀 快速开始 ' %}

效果：

📚 文档目录

🚀 快速开始

图库外挂标签

相册组（galleryGroup）

需要使用galleryGroup标签外挂，设置对应的图库：

1
2
3
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}

参数如下：

  • name：图库名字
  • description：图库描述
  • link：连接到对应相册的地址
  • img-url：图库封面的地址

示例：

1
2
3
4
{% galleryGroup '远程壁纸' '通过远程JSON链接获取的壁纸' '/gallery/bizhi' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup '壁纸' '收藏下载的一些壁纸图片' '/gallery/wallpaper' '/gallery/wallpaper/img(5).jpg' %}
{% galleryGroup '美女图片' '网络中的美女图片' '/gallery/meitu' '/gallery/meitu/31c44182/5479678683_HEe8815Ou_5_005YQaKfgy1g55fpngdnxj34g02yo7wn.jpg' %}

效果：

Group Image Gallery
远程壁纸

通过远程JSON链接获取的壁纸

Group Image Gallery
漫威

关于漫威的图片

Group Image Gallery
壁纸

收藏下载的一些壁纸图片

Group Image Gallery
美女图片

网络中的美女图片

子页面（gallery）

使用标签外挂gallery，里面显示对应的图片，图片会自适应形成一个横向瀑布流

分为本地和远程两种方式：

如果你想要使用 /gallery/wallpaper 这样的链接显示图片

你可以把创建好的 wallpaper 整个文件夹移到 gallery 文件夹里去

嵌入代码（Include Code）

引入格式

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

1
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

示例

嵌入 test.js 文件全文

1
{% include_code lang:javascript test.js %}

只嵌入第 3 行

1
{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

1
{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

1
{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

1
{% include_code lang:javascript to:8 test.js %}

自定义侧边栏（Aside）

可以添加自己喜欢的widget

widget 排序

只需要配置 sort_order就行，配置数字来实现排序，如果不配置，则默认为 0。数字越小，排序越靠前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
aside:
 ...
  card_recent_post:
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    sort_order: # Don't modify the setting unless you know how it works

newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works

添加widget

在Hexo博客目录中的source/_data，创建一个文件widget.yml

格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
top:
  - class_name:
    id_name:
    name:
    icon:
    html:

bottom:
  - class_name:
    id_name:
    name:
    icon:
    order:
    html:

top: 创建的 widget 会出现在 非sticky 区域（即所有页面都会显示)

bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)

参数 解释
class_name 所创建的 widget 父类 class 名 （可选）
id_name 所创建的 widget 父类 id 名（可选）
name 所创建的 widget 标题
icon 所创建的 widget 图标
order 所创建的 widget 排序 （可选）
html 所创建的 widget 相关代码 

1
2
3
4
5
6
7
8
9
<div class="card-widget 所写的 class_name" id="所写的 id_name" style="order: 所写的 order">
    <div class="item-headline">
        <i class="所写的 icon"></i>
        <span>所写的 name</span>
    </div>
    <div class="item-content">
        所写的 html
    </div>
</div>

搜索系统（Search）

使用本地搜索功能，使用依赖hexo-generator-searchdb官网地址：hexo-generator-searchdb

安装依赖

在博客根目录文件夹中运行git，执行指令

1
npm install hexo-generator-searchdb --save

注入配置

在根目录的_config.yml文件中添加以下配置信息：

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

参数说明：

  • path - 文件路径。默认为search.xml。如果文件扩展名是.json，则输出格式为 JSON。否则将导出 XML 格式的文件。
  • field - 您要搜索的搜索范围，您可以选择：
    • post (默认) - 仅涵盖您博客的所有帖子。
    • page - 仅涵盖您博客的所有页面。
    • all - 将涵盖您博客的所有帖子和页面。
  • content - 是否包含每篇文章的全部内容。如果false，生成的结果只包含标题和其他meta信息，不包含正文。默认为true。
  • format - 页面内容的形式，选项有：
    • html (默认) - 被最小化的原始 html 字符串。
    • striptags - 原始 html 字符串被最小化，并删除所有标签。
    • raw - 每个帖子或页面的 markdown 文本。

开启搜索

在主题配置文件_config.butterfly.yml中修改内容：

1
2
3
4
5
6
7
8
9
10
11
# 本地搜索
local_search:
  enable: true
  # 加载页面时预加载搜索数据
  preload: false
  # 显示每篇文章的前n个结果，通过设置为-1显示所有结果
  top_n_per_article: 1
  # 将html字符串解压缩为可读字符串
  unescape: true
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

固定链接（Abbrlink）

Hexo 默认 url 格式是：:year/:month/:day/:title

是按照年、月、日、文章标题来生成固定链接的。如：https://xxxx.github.io/2022/11/23/hello-world

这种方式链接过长，同时中文字符还会被转码，可以使用Abbrlink插件为每篇文章生成一个唯一编号，也不会因为修改文章而改变链接。

安装插件：

1
npm install hexo-abbrlink --save

修改根目录下的_config.yml文件，修改文件中的 permalink: 配置项，并添加一个配置项 abbrlink:，

1
2
3
4
permalink: posts/:abbrlink/  # 默认 :year/:month/:day/:title/
abbrlink:
    alg: crc16   #算法：crc16(默认) 和 crc32
    rep: dec     #进制：dec(十进制，默认) 和 hex

链接形式示例：

1
2
3
4
5
6
7
8
9
crc16 & hex
https://xxxx.github.io/posts/3ab8.html
crc16 & dec
https://xxxx.github.io/posts/28591.html

crc32 & hex
https://xxxx.github.io/posts/23ab1cd3.html
crc32 & dec
https://xxxx.github.io/posts/5471416323.html

文章写作（Post）

运行服务

1
hexo server

打开本地运行的网页：http://localhost:4000/ 实时查看网页

新建发布文章（post）

1
hexo new post "文章名字1"

此操作会在对应的source/_post/中生成一个文件文章名字1.md的文档

此时刷新网页，文章会显示出来

新建草稿（draft）

1
hexo new draft "文章名字2"

新建草稿完成后，_draft文件夹出现该文章，但是刷新页面，没有显示对应的文章文章名字2.md

发布草稿

1
hexo publish "文章名字2"

发布完成后，_draft文件夹里面的文件消失，跑到_post文件夹中，说明发布成功

生成并部署文章

1
2
hexo gengerate
# 缩写 hexo g

执行后生成静态文章

1
2
hexo deploy
# 缩写 hexo d

部署文章

清除缓存

1
hexo clean

此方法主要使用在出现操作不生效，会清除缓存文件db.json和静态文件public

插入豆瓣电影页面（Douban）

安装依赖库：

1
npm install hexo-douban --save

在博客的配置文件中：_config.yml配置豆瓣电影的数据

精简配置

1
2
3
4
5
6
7
8
9
10
douban:
  id: 162448367
  book:
    title: "This is my book title"
  movie:
    title: "This is my movie title"
  game:
    title: "This is my game title"
  song:
    title: "This is my song title"

完整配置

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
38
39
40
41
42
43
44
douban:
  id: 162448367
  builtin: false
  dynamic: false
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  swup: false
  book:
    path: books/index.html
    title: "This is my book title"
    quote: "This is my book quote"
    actions:
      - do
      - wish
      - collect
    option:
  movie:
    path: movies/index.html
    title: "This is my movie title"
    quote: "This is my movie quote"
    actions:
      - do
      - wish
      - collect
    option:
  game:
    path: games/index.html
    title: "This is my game title"
    quote: "This is my game quote"
    actions:
      - do
      - wish
      - collect
    option:
  song:
    path: songs/index.html
    title: "This is my song title"
    quote: "This is my song quote"
    actions:
      - do
      - wish
      - collect
    option:
  • id: 你的豆瓣 ID(纯数字格式，不是自定义的域名)。获取方法可以参考怎样获取豆瓣的数字 ID ？
  • builtin: 是否将hexo douban命令默认嵌入进hexo g、hexo s，使其自动执行hexo douban 命令。默认关闭。
  • dynamic: 豆瓣页面是否在访问时实时请求接口。默认为 false，表示页面信息会在执行 hexo douban 命令时更新，优点是生成的页面不会受到后续接口可用性的影响，缺点是需要手动更新。如果设置为 true ，则会在页面访问时实时调用接口进行渲染，无需执行 hexo douban 命令更新页面，但是代价就是如果接口挂了，页面就会G。
  • item_per_page: 每页展示的条目数，默认 10 。
  • meta_max_line: 每个条目展示的详细信息的最大行数，超过该行数则会以 “…” 省略，默认 4 。
  • customize_layout: 自定义布局文件。默认值为 page 。无特别需要，留空即可。若配置为 abcd，则表示指定 //theme/hexo-theme/layout/abcd.ejs 文件渲染豆瓣页面。
  • swup: 是否兼容 swup 。支持 script 热加载，解决一些 single-page 主题的加载问题，默认 false 。
  • path: 生成页面后的路径，默认生成在 //yourblog/books/index.html 等下面。如需自定义路径，则可以修改这里。
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持 html 语法，可以为空。
  • actions: 一个字符串列表，表示生成的页面中的”已 X”，”想 X”,”X 过”的标签配置，默认会自动聚焦在第一个标签。可选项为: ‘do’,’wish’,’collect’。
  • option: 该页面额外的 Front-matter 配置，参考Hexo 文档。无特别需要，留空即可。

如果只想显示某一个页面(比如 movie)，那就把其他的配置项注释掉即可。

使用

使用帮助文档：

1
2
3
4
5
6
7
8
9
10
11
$ hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only
  -s, --songs   Generate douban songs only

主动生成豆瓣页面：

1
2
3
4
5
6
7
8
9
10
$ hexo douban
INFO  Start processing
INFO  0 (wish), 0 (do),0 (collect) game loaded in 729 ms
INFO  0 (wish), 0 (do),20 (collect) song loaded in 761 ms
INFO  2 (wish), 0 (do),136 (collect) book loaded in 940 ms
INFO  30 (wish), 0 (do),6105 (collect) movie loaded in 4129 ms
INFO  Generated: books/index.html
INFO  Generated: movies/index.html
INFO  Generated: games/index.html
INFO  Generated: songs/index.html

如果不加参数，生成的是四个类型的配置

添加Artitalk说说

Artitalk官网： Artitalk

安装

安装依赖插件：

1
npm install hexo-butterfly-artitalk

配置

LeanCloud 配置 參考 Artitalk 文档 - LeanCloud 的相关准备

添加配置

可以在Hexo配置文件_config.yml或者在主题的配置文件_config.xxxxxx.yml中进行添加

1
2
3
4
5
6
7
8
9
10
# Artitalk
# see https://artitalk.js.org/
artitalk:
  enable: true
  appId:
  appKey:
  path:
  js:
  option:
  front_matter:

参数描述：

参数 解释
appId 【必须】LeanCloud 创建的应用中的 AppID
appKey 【必须】LeanCloud 创建的应用中的 AppKEY
path 【可选】Artitalk 的路径名称（默认为 artitalk，生成的页面为 artitalk/index.html）
js 【可选】更換 Artitalk 的 js CDN（默认为 https://cdn.jsdelivr.net/npm/artitalk）
option 【可选】Artitalk 需要的额外配置，如lang: zh
front_matter 【可选】Artitalk 页面的 front_matter 配置

页面

在博客根目录下面创建目录：/source/shuoshuo/

1
hexo new page shuoshuo

并在页面的Front-matter配置：

1
2
3
4
title: shuoshuo
date: 2024-07-01 22:02:40
updated: 2024-07-01 22:02:40
type: "artitalk"

示例：

1
2
3
4
5
6
7
8
9
10
11
# Artitalk 说说系统
# see https://artitalk.js.org/
artitalk:
  enable: true
  appId: KhuCxxxxxxxxxxxxxxxxxDvg-xxxxxxx
  appKey: ijKxxxxxxxxxxxxxxxxxopgy # 
  path: shuoshuo	# 就这个path，不能写“/”
  js:
  option:
    lang: zh
  front_matter:

功能

配置成功后，会显示系统的默认提示说说内容

删除

登录后，点击右上角的删除按钮可以删除此条说说

修改

点击头像，进入修改界面，保存后可以实现修改

评论回复

点击右下角的评论内容，可以进行评论，输入邮箱可以自动获取头像