辛辛苦苦記錄下自己的筆記，在Typora上完美符合自己期望的排版部署到博客後問題一堆時真的很奔潰。
不是全部圖片都無法顯示，就是Markdown或HTML代碼不兼容導致沒有展示預期中的效果。
代碼起碼還能找其他語法來代替，圖片這一環真是花了我一個通宵的時間才解決 （不虧是半桶水） 。
首先描述一下我的操作環境和情況：
- 使用Typora編輯器來編寫博客。
- 比起圖床，更偏向使用本地圖片。
- 在Typora完美顯示的圖片無法在部署後的博客顯示可見。
Google了一番後發現不少人都遇到這個問題，大家也給予了不少解決方式。比較熱門的有“標籤插件”法、“相對路徑”法和“HTML插入”法。
試過了各種各樣的教程，有些很複雜，要裝插件和改動各種代碼；有些很簡單，只需要簡單的操作。但是不管我怎麼試，不是只成功一半就是都失敗。
最後成功的只有兩個方法：“相對路徑”法和“HTML插入”。
HTML插入十分簡單，只需要一句代碼，無須多餘的操作。但它有個致命點，就是無法在Typora上即時顯示圖片。像我這類喜歡備份的人就無法把弄好的筆記導出成PDF。
於是花了很多時間去研究“相對路徑”法，因為即使失敗了很多次，感覺理論上它是可以成功的，我只是還沒做對。
最後結合各種“相對路徑”法的教程和不斷折騰Typora後，成功讓本地圖片同時在Typora和博客上顯示。
步驟：（1-2步教程參考^1）
-
通过配置 _config.yml 来生成文章目录:
1 | # _config.yml |
-
将 _config.yml 文件中的配置项 post_asset_folder 设为 true 后，执行命令
$ hexo new post_name，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name。将图片资源放在 post_name 中，文章就可以使用相对路径引用图片资源了。
1 |  |
如果完成上述步驟後並不能顯示圖片或者只有Typora能夠顯示而博客不能的話可以繼續往下做。
- 在“偏好設置”中把“圖像”的“優先使用相對路徑”勾上。
- 在文章頂部添加代碼 →
typora-root-url: ..\_posts\跟文章同名的文件夾
*這裡要注意，最好用Git寫代碼來新建文章，這樣才會產生第2步驟中的“生成同名文件夾”。當然也可以後期自己添加同名文件夾，但能夠省一點時間。
*還有雖然這裡的title跟typora-root-url中的名字不一樣，但實際的.md文件仍然是“Test”，這樣才能讓Typora知道要去哪裡讀取圖片。
5.圖片插入代碼 → 或者(./想插入的圖片名稱.jpg)
*這裡圖片的路徑加不加"./"都可以，只要能顯示圖片就行。
6.確定圖片有顯示後，hexo g和hexo s確保圖片能夠顯示在博客上。
1 | $ hexo g |
7.如果博客頁面上也能夠顯示圖片的話就可以進行部署了。
1 | $ hexo d |
這個方法的缺點是系統會自動把你同名文件夾下的圖片全部複製一份到public文件夾下，等於是分了兩個部分去讀取圖片：第一步是Typora讀取本地圖片，第二步是博客讀取要展示在網頁的圖片。但有得必有失，如果不想壓縮圖片的話就準備個大一點的硬盤吧。
（2020.01.11更新）後面仔細想一想，既然都是要在public讀取的話，那麼當public生成博客文件後就可以把圖片們轉移過去，然後直接更改路徑為。果然Typora也能顯示，但是當我刪除了source的文件後，public的也刪除了，看來不管怎樣都還是要讀取source的文件夾。硬盤不能省啊…..\..\public\2020\01\10\Test就好了
看來真的不能亂動路徑，做完上面的動作後圖片都變成空白了，弄了好久才弄回來，哭死。
最後附上HTML插入圖片的教程作為後備方法 ↓
1 | <img src="/images/myImage.png" width=50% height=50% align=center/> |
教程參考^2