1. 程式人生 > >【轉】hexo博客圖片問題

【轉】hexo博客圖片問題

fall strip rule logo 一段 ML width png 分享圖片

1.首先確認_config.yml 中有 post_asset_folder:true
Hexo 提供了一種更方便管理 Asset 的設定:post_asset_folder
當您設置post_asset_foldertrue參數後,在建立文件時,Hexo
會自動建立一個與文章同名的文件夾,您可以把與該文章相關的所有資源都放到那個文件夾,如此一來,您便可以更方便的使用資源。

2.在hexo的目錄下執行npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段時間)。

3.完成安裝後用hexo新建文章的時候會發現_posts

目錄下面會多出一個和文章名字一樣的文件夾。圖片就可以放在文件夾下面。結構如下:

本地圖片測試
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
本地圖片測試.md

這樣的目錄結構(目錄名和文章名一致),只要使用 ![logo](本地圖片測試/logo.jpg) 就可以插入圖片。其中[]裏面不寫文字則沒有圖片標題。
生成的結構為

public/2016/3/9/本地圖片測試
├── apppicker.jpg
├── index.html
├── logo.jpg
└── rules.jpg

同時,生成的 html 是

<img src="/2016/3/9/本地圖片測試/logo.jpg" alt="logo">

而不是愚蠢的

<img src="本地圖片測試/logo.jpg" alt="logo">

註意:
通過常規的 markdown 語法和相對路徑來引用圖片和其它資源可能會導致它們在存檔頁或者主頁上顯示不正確。在Hexo2時代,社區創建了很多插件來解決這個問題。但是,隨著Hexo3的發布,許多新的標簽插件被加入到了核心代碼中。這使得你可以更簡單地在文章中引用你的資源。

技術分享圖片

比如說:當你打開文章資源文件夾功能後,你把一個 example.jpg圖片放在了你的資源文件夾中,如果通過使用相對路徑的常規 markdown 語法 [](/example.jpg),它將 不會 出現在首頁上。(但是它會在文章中按你期待的方式工作)

正確的引用圖片方式是使用下列的標簽插件而不是markdown

技術分享圖片

地址:https://www.jianshu.com/p/c2ba9533088a

【轉】hexo博客圖片問題