首页 Hexo hexo 教程

# Hexo 的使用技巧

# 文章头设置

首先为了新建文章方便，建议将 /scaffolds/post.md 修改为如下代码：

---
title: <!--swig0-->
date: <!--swig1-->
top: false 
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
---

这样新建文章后不用你自己补充了，修改信息就行。

  • summary: 指定了文章的摘要内容。当使用 Hexo 生成静态网站时，如果没有指定摘要，Hexo 会自动截取文章的前几行作为摘要。但是，有些文章的开头并不适合作为摘要，或者需要自定义摘要的长度和内容，这时就可以在文章的 Front-matter 中指定 summary，以覆盖自动生成的摘要。在 Hexo
    的主题中，一般会使用 summary 来展示文章列表和归档页面中的文章摘要。

  • password 是用于设置网站的访问密码的选项。当启用了密码选项后，用户在访问网站时需要输入正确的密码才能访问网站内容。这个选项通常用于限制网站的访问权限，比如私人博客或内部网站。用户可以在 Hexo 的配置文件中设置访问密码，也可以通过插件来实现更复杂的密码保护机制。

  • top 是用于设置网站的置顶文章的选项。当启用了 top 选项后，用户可以将指定的文章固定在网站的首页或其他页面的顶部，以便更好地展示这些文章。用户可以在 Hexo 的文章 Front-matter 中设置 top 选项的值为 true 或 false，来决定是否将该文章置顶。同时，用户也可以通过修改 Hexo 主题的模板文件来自定义置顶文章的样式和展示方式。

  • cover 选项用于设置文章页面的封面图片。用户可以在 Hexo 的文章 Front-matter 中设置 cover 选项的值为图片的 URL 地址，来为文章页面添加封面图片。一些 Hexo 主题会在文章页面中展示封面图片，以提升文章的可视性和美观度。

  • toc 选项用于设置文章页面的目录。当启用了 toc 选项后，Hexo 会自动为文章生成目录，并在文章页面的侧边栏中展示目录。用户可以在 Hexo 的文章 Front-matter 中设置 toc 选项的值为 true 或 false，来决定是否启用目录。同时，用户也可以通过修改 Hexo 主题的模板文件来自定义目录的样式和展示方式。

  • mathjax 是用于启用数学公式渲染的选项。

当启用了 mathjax 选项后，Hexo 会自动加载 MathJax 库，并在文章页面中渲染数学公式。用户可以在 Hexo 的文章中使用 LaTeX 语法编写数学公式，MathJax 会自动将其渲染为美观的数学公式。

# 添加 404 页面

首先在 /source/ 目录下新建一个 404.md ，内容如下：

---
title: 404
date: 2022-07-19 16:41:10
type: "404"
layout: "404"
description: "你来到了没有知识的荒原 :("
---

然后在 /themes/matery/layout/ 目录下新建一个 404.ejs 文件，内容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
# 图片添加水印
为了防止别人抄袭你文章，可以把所有的图片都加上水印，方法很简单。
首先在博客根目录下新建一个 watermark.py ，代码如下：
# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
def watermark(post_name):
    if post_name == 'all':
        post_name = '*'
    dir_name = 'source/_posts/' + post_name + '/*'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        draw.text((im.size[0] / 2, im.size[1] / 2),
                  u'@yourname', fill=(0, 0, 0), font=font)
        im.save(files)
if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')
字体也放根目录下，自己找字体。然后每次写完一篇文章可以运行 python3 watermark.py postname 添加水印，如果第一次运行要给所有文章添加水印，可以运行 python3 watermark.py all 。
本功能参考 NexT，基于 Hexo Tag 功能，用来建立友链或其他网址链接功能。
文章中的使用格式：
  1. 使用 links 标签块，包围 yml 语法书写的内容，字段包括
site站点名称必填
owner管理员名字可选，默认为 site 的值
url站点链接必填
desc站点描述可选，默认为 url 的值
image站点图片可选，默认为 images/404.png
color方块颜色可选，默认为 #666
{% links %}
- site: #站点名称
  owner: #管理员名字
  url: #站点网址
  desc: #简短描述
  image: #一张图片
  color: #颜色代码
{% endlinks %}
举个栗子：
{% links %}
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  image: images/avatar.jpg
- site: 優萌初華
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  color: "#9d5b8b"
{% endlinks %}
優萌初華
琉璃的医学 & 编程笔记
優萌初華
https://shoka.lostyu.me
優萌初華
琉璃的医学 & 编程笔记
  1. 以上标签块里的内容，还可以保存到一个 yml 文件中，然后使用 linksfile 标签。
    其中， path 位于 <root>/source 目录下。
{% linksfile [path] %}
举个栗子：
{% linksfile friends/_data.yml %}`
# code 代码块
使用 markdown-it-prism 进行代码高亮，支持显示行号、行高亮 mark 、命令行提示符 command 、代码块标题。
基本格式： [language] [title] [url] [link text] [mark] [command]
选项描述默认值
language- 支持的语言戳此null \
- 如果不需要代码高亮，但希望显示代码块样式，则设为 raw\
- 留空或设为 info ，将不显示代码高亮和代码块样式
title代码块的标题文字null
url代码块标题右侧显示的链接null
link text上述链接显示的标题link
mark行高亮显示，格式为 mark:行号,行号开始-行号结束,其他行号 。null \
例如 mark:1,4-7,10 ，将高亮显示第 1、4、5、6、7、10 行
command命令行提示符，格式为 command:("提示内容":行号,行号||"提示内容":行号开始-行号结束)null \
例如 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7
import java.util.Scanner;
...
Scanner in = new Scanner (System.in);
// 输入 Scan 之后，按下键盘 Alt + “/” 键，Eclipse 下自动补全。
System.out.println (in.nextLine ());
System.out.println ("Hello" + "world.");
```
```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push
```
行高亮参考链接
import java.util.Scanner;
...
Scanner in = new Scanner(System.in);
// 输入 Scan 之后，按下键盘 Alt + “/” 键，Eclipse 下自动补全。
System.out.println(in.nextLine());
System.out.println("Hello" + " world.");
命令行提示符
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push
# quiz 练习题与答案
这个功能是用来显示练习题的。
需要在 Front Matter 中添加 quiz: true ，以正确显示题型标签。
几个例子
---
title: 练习题与答案
quiz: true
---
1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}
2. 有基类 `SHAPE`，派生类 `CIRCLE`，声明如下变量：  {.quiz .multi}
    ```cpp
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    ```
    下列哪些项是 “派生类对象替换基类对象”。
    - `p1=&circle1;` {.correct}
    - `q1=&shape1;`
    - `shape1=circle1;` {.correct}
    - `circle1=shape1;`
{.options}
    > - :heavy_check_mark: 令基类对象的指针指向派生类对象
    > - :x: 派生类指针指向基类的引用
    > - :heavy_check_mark: 派生类对象给基类对象赋值
    > - :x: 基类对象给派生类对象赋值
    > {.options}
3. 下列叙述正确的是 []{.gap} 。 {.quiz}
    - 虚函数只能定义成无参函数
    - 虚函数不能有返回值
    - 能定义虚构造函数
    - A、B、C 都不对 {.correct}
{.options}
10. 如果定义 `int e=8; double f=6.4, g=8.9;`，则表达式 `f+int (e/3*int (f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}
    > 注意运算顺序和数据类型
    > [8.4]{.mistake}
点击选项可以显示答案，以及答案解析。
  1. 下列叙述正确的是  。
    • 虚函数只能定义成无参函数
    • 虚函数不能有返回值
    • 能定义虚构造函数
    • A、B、C 都不对
  2. 有基类 SHAPE ，派生类 CIRCLE ，声明如下变量：
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    下列哪些项是 “派生类对象替换基类对象”。
    • p1=&circle1;
    • q1=&shape1;
    • shape1=circle1;
    • circle1=shape1;
    • ✔️ 令基类对象的指针指向派生类对象
    • ❌ 派生类指针指向基类的引用
    • ✔️ 派生类对象给基类对象赋值
    • ❌ 基类对象给派生类对象赋值
  3. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。
  4. 如果定义 int e=8; double f=6.4, g=8.9; ，则表达式 f+int(e/3*int(f+g)/2)%4 的值为 9.4。
    注意运算顺序和数据类型
    8.4
# 使用说明
本功能基于 markdown-it-bracketed-spans 和 markdown-it-attrs
标签含义
{.quiz}选择题
{.quiz .multi}多选题
{.quiz .true}正确的判断题
{.quiz .false}错误的判断题
{.quiz .fill}填空题
[]{.gap}空白下划线
[答案内容]{.gap}答案内容带下划线
{.options}ABCDE 选项
{.correct}选择题的正确选项
>答案解析
[8.4]{.mistake}错题备注
# emoji 绘文字
本功能基于 markdown-it-emoji ，所有标签参考戳此
:kissing_heart:
:ring:
:notes:
😘 💍 🎶
# effects 文字特效
本功能基于 markdown-it-ins 、 markdown-it-bracketed-spans 和 markdown-it-attrs
本主题风格颜色通用样式：default、primary、success、info、warning、danger
++ 下划线 ++
++ 波浪线 ++{.wavy}
++ 着重点 ++{.dot}
++ 紫色下划线 ++{.primary}
++ 绿色波浪线 ++{.wavy .success}
++ 黄色着重点 ++{.dot .warning}
~~ 删除线～～
~~ 红色删除线～～{.danger}
== 荧光高亮 ==
[赤橙黄绿青蓝紫]{.rainbow}
[红色]{.red}
[粉色]{.pink}
[橙色]{.orange}
[黄色]{.yellow}
[绿色]{.green}
[靛青]{.aqua}
[蓝色]{.blue}
[紫色]{.purple}
[灰色]{.grey}
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
H~2~0
29^th^
这段代码因为自动被 pangu.js 处理了一下，加了几个空格，导致直接复制代码不能正常显示。
正确的代码是 ++下划线++ ~~删除线~~ ==荧光高亮== ，不能有空格哦。
下划线
波浪线
着重点
紫色下划线
绿色波浪线
黄色着重点
删除线
红色删除线
荧光高亮
赤橙黄绿青蓝紫
红色
粉色
橙色
黄色
绿色
靛青
蓝色
紫色
灰色
快捷键 Ctrl + C
H20
29th
# spoiler 隐藏文字
本功能基于 markdown-it-spoiler 和 markdown-it-attrs
!! 黑幕黑幕黑幕黑幕黑幕黑幕！！： 鼠标滑过显示内容
!! 模糊模糊模糊模糊模糊模糊！！{.bulr} ： 选中文字显示内容
黑幕黑幕黑幕黑幕黑幕黑幕 ： 鼠标滑过显示内容
模糊模糊模糊模糊模糊模糊 ： 选中文字显示内容
# label 标签块
本功能基于 markdown-it-bracketed-spans 和 markdown-it-attrs
有以下颜色可选
[default]{.label}
[primary]{.label .primary}
[info]{.label .info}
[:heavy_check_mark:success]{.label .success}
[warning]{.label .warning}
[:broken_heart:danger]{.label .danger}
default
primary
info
✔️success
warning
💔danger
# note 提醒块
本功能基于 markdown-it-container
标签为：
开始行:::[风格颜色]
结束行:::
:::default
默认默认
:::
:::primary
基本基本
:::
:::info
提示提示
:::
:::success
成功成功
:::
:::warning
警告警告
:::
:::danger
危险危险
:::
:::danger no-icon
危险危险
:::
默认默认
基本基本
提示提示
成功成功
警告警告
危险危险
危险危险
# tab 标签卡
本功能基于 markdown-it-container
标签为：
开始行;;;[同一ID] [标签名称]
结束行`;;;
;;;id1 卡片 1
这里是卡片 1 的内容
** 加粗 **
[success]{.label .success}
{% links %}
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"
{% endlinks %}
;;;
;;;id1 卡片 2
这里是卡片 2 的内容
:::danger
危险危险
:::
- 第一行
- 第二行
;;;
;;;id2 ②号标签卡片 1
这里是卡片 1 的内容
;;;
;;;id2 ②号标签卡片 2
这里是卡片 2 的内容
;;;
这里是卡片 1 的内容
加粗
success
  • site: 優萌初華
    owner: 霜月琉璃
    url: https://shoka.lostyu.me
    desc: 琉璃的医学 & 编程笔记
    image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
    color: "#e9546b"
这里是卡片 2 的内容
危险危险
  • 第一行
  • 第二行
这里是卡片 1 的内容
这里是卡片 2 的内容
# collapse 折叠块
本功能基于 markdown-it-container
标签为：
开始行+++[风格颜色] [标题文字]
结束行+++
+++ 默认默认 这里是一段文字
++ 下划线 ++
+++
+++primary 紫色
:::info
参考信息
:::
- 第一行
- 第二行
+++
+++info  蓝色
;;;id3 卡片 1
这里是卡片 1 的内容
;;;
;;;id3 卡片 2
这里是卡片 2 的内容
;;;
+++
+++success 绿色
{% links %}
- site: 優萌初華
  url: https://shoka.lostyu.me
  color: "#e9546b"
{% endlinks %}
+++
+++warning 黄色
!! 警告警告警告警告警告！！{.bulr}
[label]{.label .success}
+++
+++danger 红色
[danger]{.label .danger}
+++
默认默认 这里是一段文字
下划线
紫色
参考信息
  • 第一行
  • 第二行
蓝色
这里是卡片 1 的内容
这里是卡片 2 的内容
绿色
  • site: 優萌初華
    url: https://shoka.lostyu.me
    color: "#e9546b"
黄色
警告警告警告警告警告
label
红色
danger
# taskList 待办事项
本功能基于 markdown-it-task-checkbox 。
可以利用 markdown-it-attrs 添加风格颜色，只可以给 ul 标签添加，需要新建两行。
- [ ] 这是一个小叉叉
- [x] 这是一个红色勾勾
{.danger}
- [ ] 未完成
- [x] 完成
{.primary}
- [ ] 未完成
- [x] 默认颜色
# furigana 文字注音
原本用于日语汉字假名注音，但别的注音也可以。
为了兼容性，采用 markdown-it-ruby 的基本格式： {文字^注音} ，并且为了兼容表格，将分隔符由 | 换成了 ^ 。
注音分隔基于 furigana-markdown-it 显示说明看这里
{取り返す^とりかえす}取(と) り返(かえ) す
{可愛い犬^か+わい・い・いぬ}可愛(かわい) い犬(いぬ)
{可愛い犬^か・わい・いいぬ}可(か) 愛(わい) い犬(いぬ)
{アクセラレータ^accelerator}アクセラレータ(accelerator)
{accelerator^アクセラレータ}accelerator(アクセラレータ)
{食べる^たべる}食(た) べる
{食べる^=たべる}食べる(たべる)
{あいうえお^*}あ●い●う●え●お●
{あいうえお^*❤}あ❤い❤う❤え❤お❤
{常用账号^contact}常用账号(contact)
# 给你的文章添加密码
  • 在 hexo 目录下 npm install hexo-blog-encrypt
  • 在 /Hexo/_config.yml 文件中添加内容:
    encrypt:
    	enable:true
使用:
文章头
---
title: Hexo 加密功能
date: 2019-09-04 23:20:00   
tags: [学习笔记，Hexo]
categories: Hexo      
password: smile   
abstract: Welcome to my blog, enter password to read. 
message: 密码输入框上描述性内容
---
其中：
  • password: 该 Blog 使用的密码
  • abstract: Blog 摘要文字（少量）
  • message: 密码框上的描述性文字
 更新于   阅读次数  次
请我喝[茶]~(￣▽￣)~*
Davaded 微信支付
微信支付
Davaded 支付宝
支付宝
Davaded 贝宝
贝宝