Home

hogen

Follow Excellence. Success will chase you.

Home About Github Email

博客搭建之路-在博客中引用图片、音乐、视频

我们在写博客的过程中,难免会遇到要使用图片的情况,有的时候嘚吧嘚吧说个十句还不如直接上一张图片管用,比如我上篇文章写在前言-我的博客搭建之路就引用了几张图片,效果还是可以的;在博客中放入一首音乐能让人在读博客过程中不失乏味无聊(当然这看个人喜好了);有的时候还会需要引入视频之类的,这篇文章就来总结一下

引入本地图片

在\myblog\source目录下新建文件夹,命名为images或者其他你喜欢的名字,然后编辑你的md博文,插入下面的代码样式(如果图片没出来,说明这个不靠谱,下面还有方法二)

![引入本地图片landscape](/myimage/landscape.png) 

landscape

引入网络图片

![网络图片](http://img1.3lian.com/2015/w7/85/d/21.jpg)

网络图片

引入音乐

这里以网易云音乐举例

注意那段音乐HTML代码粘贴到md里的时候不要有空格,而且你粘贴完md右边预览区显示是错误的,这不用管,切记!!

引入网络视频(以腾讯视频为例)

这是图片

引入本地图片(推荐)

  1. 打开_config.yml 设置 post_asset_folder 属性为 true

  2. 当您设置post_asset_folder为true参数后,在建立文件时,Hexo
    会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。

  3. 在myblog的目录下执行$ npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段时间)。

  4. 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹,你可以把你本篇博文用到的图片放入这个文件夹内

    ![](image/2017-04-23_073929.png)//注意前面这个image你可以随便写,这样写也行:![](博客搭建之路-在博客中引用图片和音乐/2017-04-23_073929.png)
    

  5. 等你的博客发布之后,浏览器->右键查看源代码,你会发现地址是这样的

推荐使用这种方法管理,这样每篇博文都可以分门别类存放图片,互不影响

题外话

我们每次用hexo new "博客名"新建博客的时候这里的博客名最好起英文名,这样你生成的存放图片的文件夹也会是英文的了,而浏览器显示给别人看的博客名改成中文就可以了

改名

参考链接:

Hexo 博客中插入音乐/视频


hogen

2017-04-23
Home About Github Email