我的Hexo博客搭好了10 - 怎么插入图片和视频

文章系列导航

本文目录

- [1 插入图片](#1 插入图片)
- - [1.1 使用本地相对路径（适合本地图片）使用图床](#1.1 使用本地相对路径（适合本地图片）使用图床)
  - [1.2 使用图床与绝对路径（推荐，提升加载速度）](#1.2 使用图床与绝对路径（推荐，提升加载速度）)
  - - [3. **使用 Hexo 标签插件（功能更丰富）**](#3. 使用 Hexo 标签插件（功能更丰富）)
- [2 插入视屏](#2 插入视屏)
- - [2.1 使用 HTML `<video>` 标签（最通用可靠）](#2.1 使用 HTML <video> 标签（最通用可靠）)
  - [2.2 嵌入在线视频平台链接（最推荐）](#2.2 嵌入在线视频平台链接（最推荐）)

1 插入图片

1.1 使用本地相对路径（适合本地图片）使用图床

这是最直接的方式，但需要注意路径。

步骤：

在Hexo项目根目录的 source 文件夹下，创建一个专门存放图片的文件夹，例如 images。
将你的图片（如 my-photo.jpg）放入 source/images/ 文件夹。

在文章的 Markdown 文件中，使用以下语法插入：

markdown 复制代码

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%2Fimages%2Fmy-photo.jpg&pos_id=img-F9CU8N9B-1768494963498)

注：开头的 / 表示从 Hexo项目根目录开始查找。

测试图片：

优点：管理简单，所有资源都在本地。另一个优点是，数据在自己手里，可控。

缺点：如果图片过多，会增加项目体积。博客部署后，图片加载速度取决于你的站点服务器。

1.2 使用图床与绝对路径（推荐，提升加载速度）

图床是一个专业的在线图片存储服务。将图片上传到图床后，你会获得一个可以直接访问的图片链接（URL）。

步骤：
1. 将图片上传到图床。
2. 复制图床提供的图片直链（通常以 .jpg、.png 等结尾）。
3. 在文章中插入：
  markdown 复制代码
```
![图片描述文字](https://你的图床域名/图片路径.jpg)
```
优点：
- 加载更快：专业图床有全球CDN加速。
- 减轻服务器负担：不占用你博客主机的流量和存储空间。
- 管理方便：可以随时在图床管理所有图片。
缺点：
- 不可控：如果图床网站倒闭了，或发生了数据丢失的情况，自己的图片就找不到了。

3. 使用 Hexo 标签插件（功能更丰富）

Hexo 提供了 {% asset_img %} 和 {% asset_path %} 等标签插件。使用资源文件夹（Asset Folder）需要先在 _config.yml 中启用 post_asset_folder: true。

优点：与文章关联性更强，某些主题可能会针对此做优化。
缺点：语法稍复杂，且路径处理可能对新手不直观。

这个以后有空再研究吧。

2 插入视屏

由于标准 Markdown 不支持直接插入视频，通常需要借助其他方法。

2.1 使用 HTML `<video>` 标签（最通用可靠）

你可以直接在 Markdown 文件中写入 HTML 代码，浏览器可以完美渲染。

html 复制代码

<video src="你的视频地址.mp4" controls width="100%"></video>

常用属性 ：
- controls：显示播放控件（播放/暂停、音量、进度条等）。
- width：设置视频显示宽度，"100%" 表示自适应容器宽度。
- poster="封面图地址.jpg"：设置视频播放前的封面图。
- autoplay：自动播放（很多浏览器已禁止）。

2.2 嵌入在线视频平台链接（最推荐）

对于B站、YouTube、腾讯视频等平台的视频，最佳做法是使用其提供的"嵌入代码"。

步骤：
1. 在视频页面找到"分享"或"嵌入"按钮。
2. 复制提供的 <iframe> 代码片段。
3. 直接将这段代码粘贴到你的 Markdown 文章中即可。
优点：
- 不消耗自身流量和存储。
- 播放体验好，直接使用平台成熟的播放器。
- 支持弹幕、清晰度切换等高级功能。