插入圖片與視頻方法如何在博客上傳視頻 _經驗分享

博客插入圖片與視頻方法
在博客中插入視頻和圖片能讓人通俗易懂，生動形象。下面是我找到的一些方法。
圖片插入
Hexo有多種圖片插入方式，可以將圖片存放在本地引用或者將圖片放在CDN上引用。
本地引用–絕對路徑
當Hexo項目中只用到少量圖片時，可以將圖片統一放在source/images文件夾中，通過markdown語法訪問它們。
source/images/image.jpg
![(可以寫關于圖片的描述)](/images/image.jpg)
圖片既可以在首頁內容中訪問到，也可以在文章正文中訪問到。
本地引用–相對路徑
圖片除了可以放在統一的images文件夾中，還可以放在文章自己的目錄中。文章的目錄可以通過配置_config.yml來生成。
_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中，文章就可以使用相對路徑引用圖片資源了。
_posts/post_name/image.jpg
![](image.jpg)
上述是markdown的引用方式，圖片只能在文章中顯示，但無法在首頁中正常顯示。
如果希望圖片在文章和首頁中同時顯示，可以使用標簽插件語法。
_posts/post_name/image.jpg
{% asset_img image.jpg This is an image %}
CDN引用
除了在本地存儲圖片，還可以將圖片上傳到一些免費的CDN服務中。
比如Cloudinary （梯子訪問）提供的圖片CDN服務，在Cloudinary中上傳圖片后，會生成對應的url地址，將地址直接拿來引用即可。或者上傳到路過圖床（不用梯子）。
視頻插入
插入視頻與圖片不同，這里以b站的視頻為例

文章插圖
這樣直接插入的代碼手機端不能自適應，效果不完美。
最好這樣
<div style=”position: relative; width: 100%; height: 0; padding-bottom: 75%;”><iframe

文章插圖
frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”position: absolute; width: 100%;
height: 100%; left: 0; top: 0;”> </iframe></div>

文章插圖

<div style=”position: relative; width: 100%; height: 0; padding-bottom: 75%;”><iframe
【插入圖片與視頻方法如何在博客上傳視頻】

文章插圖
frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”position: absolute; width: 100%;
height: 100%; left: 0; top: 0;”> </iframe></div>

插入圖片與視頻方法 如何在博客上傳視頻

插入圖片與視頻方法如何在博客上傳視頻