0%

hexo食用指南

发表于 分类于 阅读次数： Valine：
本文字数： 1.2k 阅读时长 ≈ 2 分钟

对一些hexo常见有效操作的记录。

对图片左对齐

有效的格式：

1
<img src="/imgs/Screenshot 2024-07-06 at 12.25.42 AM.png" alt="" width="700px" style="display: block; margin-left: 0;">

使用标签页加锚点

如：
<h4 id="概述11">概述</h4>
显示为：

概述

加载视频

1
2
3
<video controls width="640" height="360">
  <source src="/imgs/61e229b6-64f4-11ea-866a-4e8934bfbff0.mp4 " type="video/mp4">
</video>

使图片并排显示

在Hexo的CSS文件（例如custom.css）中定义一个类，然后在Markdown文件中使用该类。
在custom.css中定义类：

1
2
3
4
5
6
7
8
.image-row {
  display: flex;
  gap: 10px; /* 图片之间的间隔 */
}

.image-row img {
  max-width: 100%; /* 确保图片不会超出容器宽度 */
}

在Markdown文件中使用：

1
2
3
4
<div class="image-row">
  <img src="/imgs/Pasted image 20230905084929.png" alt="" width="300px">
  <img src="/imgs/Pasted image 20230905085024.png" alt="" width="375px">
</div>

跳转多级标题时多个标题名字相同

你可以在 Markdown 文件中为每个二级标题添加 ID，这样在引用时可以通过这个唯一 ID 来区分它们。
假设你有如下标题：

1
2
3
4
5
6
7
8
9
10

# Segment-level prediction


## Example Title
Some content here...


## Example Title
Some different content here...

你可以修改为：

1
2
3
4
5
6
7
8
9
10

# Segment-level prediction


## Example Title {#example-title-1}
Some content here...


## Example Title {#example-title-2}
Some different content here...

然后，你可以在引用时使用这些唯一的 ID：

1
2
[First Example Title](#example-title-1)
[Second Example Title](#example-title-2)