Hexo 博客搭建与美化导航

特别说明
欢迎来到我的网站，此博客由【Hexo + Butterfly】来进行搭建。
本站所有内容仅供学习交流使用，不构成任何商业用途。内容因版本差异导致的问题，博主将尽力修正但不承担法律责任。
Hexo 博客版本：7.3.0
Butterfly 主题版本：5.3.5

引言

在博客中插入视频和图片能让人通俗易懂，生动形象。

图片插入

Hexo 有多种图片插入方式，可以将图片存放在本地引用或者将图片放在 CDN 上引用。

本地引用–绝对路径

当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 markdown 语法访问它们。

1	source/images/image.jpg

图片既可以在首页内容中访问到，也可以在文章正文中访问到。

本地引用–相对路径

图片除了可以放在统一的 images 文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml 来生成。

1 2	# _config.yml post_asset_folder: true

将_config.yml 文件中的配置项 post_asset_folder 设为 true 后，执行命令 hexo new post_name，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name。将图片资源放在 post_name 中，文章就可以使用相对路径引用图片资源了。

1	_posts/post_name/image.jpg

上述是 markdown 的引用方式，图片只能在文章中显示，但无法在首页中正常显示。

如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

1	_posts/post_name/image.jpg

CDN 引用

除了在本地存储图片，还可以将图片上传到一些免费的 CDN 服务中。

视频插入

插入视频与图片不同，这里以 B 站的视频为例

1	<iframe src="（视频网址）" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="580" quality="high"></iframe>

这样直接插入的代码手机端不能自适应，效果不完美。最好采用下面的方法：

1
2
3

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe src="//player.bilibili.com/player.html?aid=xxx&cid=yyy&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>