使用 StackEdit 發佈至 Blogger
目前部落格裡新的文章幾乎都是在 StackEdit 上使用 Markdown 來完成撰寫,是一個舒適的撰寫體驗,也更能讓自己專注在文章的撰寫,不用去調整版面上的細節。StackEdit 除了可以將文本直接存在 Google Drive 上,圖形直接嵌入引用 Google+ 相簿,讓整個寫作的流程都是在雲端上完成,另外一個我喜歡的優點,是能夠直接將寫好的文章發佈到自己的部落格上。發佈至 Blogger 部落格
將文章發佈至 Blogger 上的方法非常簡單,在 StackEdit 的左上角開啓左邊的功能列,拉開 Publish 項目並點選 Blogger,如下圖:第一次使用時會導引至 Google 的授權頁,回到彈出的對話視窗,填寫好 Blogger 的 URL 內容。新發佈不用填寫 POST ID,這個是未來若需要更新內容的時候使用的。
按下「OK」後就完成發佈的動作,發佈完成後,在 StackEdit 該篇文章的右上角會出現 Blogger 的 Icon。
部落格的樣本改造
文章發佈至 Blogger 後有的模板會有小小的問題,如果我們使用 Markdown 時沒有寫入圖片的最大寬度,插入的圖片若比較大就會造成圖形突破樣板的驚嚇感。這個可以透過自己改造Blogger 模板內容的 CSS,將圖片最大限制在某個數值。簡單一點的方式,是選擇現在 Blogger 中就已經有限制圖片大小的佈景主題。
程式碼高亮標識
StackEdit 的程式區塊是有支援程式碼高亮標識(Highlight)的功能,預設是使用 Highlight.js 的函式庫,也可以使用 Google prettify。Highlight.js 目前已經支援 118 種的程式語法自動偵測。還有 54 種的 Style 可以選擇。但是發佈至 Blogger 後因模板沒有相關的引入,所以程式碼區塊就和一般的文字一樣,沒有區塊和程式碼標識的區別。我們可以透過修改 Blogger 的樣板的樣式,引入 Highlight.js 的函式庫與樣式。進入 Blogger 的後臺管理頁面,在左方的選單中選擇 範本 ,然後右方選 編輯 HTML,開啓樣板的 HTML 編輯畫面。
我們可以在 Highlight.js 官方下載相關的檔案至自己的伺服器,或是使用官方提供的 CDN,下面例子是使用 cdnjs 的連結引入。將程式碼連結放在
<head>...</head>
之間。<head>
...
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoadundefined);</script>
...
</head>
如果覺得預設的 Style 顏色配置不是很滿意,我們也可以套用其他的 Style,GitHub 上有許多 Style 可以選擇,請參考 Style 資料夾。記得要將名稱加上 min ex: OOO.min.css套用後在程式碼的區段就會有語法的高亮標識了。
留言
不过我有个问题,就是文章的搜索描述该如何在 Stackedit 中添加。每次更新的时候,在 Blogger 编辑器中的设定的搜索描述就会被覆盖掉,如果有谁知道解决,希望能联系我下。