在博文中嵌入各类文件

在使用Hexo写博客时,我们经常会需要在文章中嵌入各种类型的文件,比如图片、视频、音频、PDF文档等。下面我就详细介绍Hexo博客中如何插入这些文件。

1. 嵌入图片

在Hexo中嵌入图片主要有两种方式。
(1)使用Markdown语法直接插入

![图片alt](图片地址 ''图片title'')

测试：

(2)将图片放在博客的source/images目录下,然后通过类似![](/images/example.jpg)的方式插入。
需要注意的是,无论是使用网络图片还是本地图片,为了加快页面加载速度,都推荐将图片压缩后再插入文章中。

2. 嵌入视频

和图片类似,视频也可以直接使用HTML语法嵌入,或者将视频文件放在源文件中引用。

<video src="video.mp4"></video>

{% raw %}
<video src="{{ site.baseurl }}/videos/example.mp4"></video>
{% endraw %}

测试：
Pass
同时,很多第三方视频网站也提供了嵌入代码,直接复制使用<iframe>即可。

测试：(版权属于：Cyril
本文链接：https://www.cyrilstudio.top/archives/331/
转载时须注明出处及本声明)

代码：

<iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

代码讲解：

BILIBILI 地址PC端参数
    &high_quality=1   (1=最高画质 0=最低画质)  #2023.10已失效
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)  
iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

3. 嵌入音频

音频的嵌入方式和图片视频类似:

<audio src="audio.mp3"></audio> 

{% raw %}
<audio src="{{ site.baseurl }}/audios/example.mp3"></audio>
{% endraw %}

也可以直接嵌入网络音频:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=478259179&auto=0&height=66"></iframe>

- frameborder="no" 移除iframe的边框
- border="0" 边框宽度为0
- marginwidth="0" 和 marginheight="0" iframe的外边距为0
- width和height 设置iframe的宽高
- src="//music.163.com/outchain/player..." 指定iframe嵌入的网页地址,这里是网易云音乐的外链播放器
- type=2 设定播放器模式为小尺寸播放器
- id=478259179 设置播放的音乐id
- auto=0 设置不自动播放
- height=66 设置播放器高度
所以这个iframe代码的作用就是在页面内嵌入一个网易云音乐小尺寸播放器,播放指定音乐,宽度330像素,高度66像素。
通过嵌入这段代码,可以很方便地在博客等页面内添加音乐播放功能。网页会显示成一个可以播放音乐的小部件。

测试：(网易云音乐网页版音频下方生成外链)

4. 嵌入PDF文件

对于PDF文件,可以通过Google Drive或一些文档分享服务生成在线预览的共享链接,直接使用<iframe>嵌入。

<iframe src="https://example.com/example.pdf"></iframe>

也可以将PDF文件放在博客的source目录下,然后通过Hexo的标签插件来插入:

{% pdf /pdfs/example.pdf %}

需要安装hexo-tag-pdf插件。

5. 嵌入代码段

插入代码段需要用到Markdown的语法和Hexo的标签插件highlight。
用三个反引号包裹代码,并指定语言:

`
```js
console.log("Hello World");

以上就是Hexo博客中插入各类文件的详细方法,包括图片、视频、音频、PDF文档以及代码片段。