StackEdit 的優點:
- 免費
- Open Source
- 支援 Markdown
- 支援 YAML
- 可輸出成 HTML
- 支援離線編輯
- 支援多種雲端儲存同步 (Dropbox, Google Drive..)
- 支援一鍵發佈/更新文章 (Blogger, Gist, Github, Tumblr, Wordpress..)
- 支援目錄(Table of Contents)
- 支援線上對話
- …
Dropbox 的優點:
- 編輯圖片後不須重新上傳,blogger 的圖片也會自動更新。
- URL 固定,用 markdown 寫文章時,只需要修改最後面的檔名,加快寫作效率。
- 圖床使用 dropbox 的高速 CDN,讀取速度飛快。
- 可以建立資料夾將圖片分門別類,整理起來更有序。
Blogger 的優點:
- 免費空間
- 內鍵 Google CDN,速度快
- 自訂 Domain
- 自訂版面
- 自訂 CSS
- 自訂 javascript
- 自訂 widget
- 自訂選單
- 支援第三方外掛(discuss, google analysis..)
目錄:
- (一) 理想中的部落格工具
- (二) 事前準備
- (三) 自定 Blogger 版面
- (四) 範例發文 workflow
- (五) 簡易 Q & A
- 1. 要怎麼在 StackEdit 創建目錄(Table of Contents)
- 2. 讓文章在首頁只顯示部分內容,不要顯示全部內容
- 3. StackEdit 連結不了 Google 或 Blogger 帳號
- 4. 用 firefox 時,code 不會自動 wrap 到下一行
- 5. 修改文章的 permalink URL
- 6. 在文章中嵌入 Youtube 影片、Flash 元件
- 7. 跳脫 HTML tags
- 8. Blogger 預設用 br tag 取代掉 p tag,導致文章排版走樣
- 9. Dropbox 的圖片不會在 popular post widget 出現 thumbnail
- 10. 加入 Disqus 留言板
- 11. 設定 google analysis
- 12. 在新分頁開啟超連結
(一) 理想中的部落格工具
我常隨手用 Sublime Text 將各種筆記用 markdown 格式記錄起來,存在 dropbox 內,並在適當的時間整理,因此最基本的需求是:以前寫部落格最麻煩的地方在於,每當要修改文章內容時,總是會被部落格的 content management system (CMS) 給綁死,只是改一點內容就得大費周章,更不用說更換圖片或照片了。所以我希望能:
- 能夠快速發佈/更新文章。
- 文章不受限於 CMS,可儲存於本地端。
- 圖片不受限於 CMS,可儲存於本地端,且圖床速度要快。
- 免費空間
- 內鍵 Google CDN,速度快
- 自訂 Domain
- 自訂版面
- 自訂 CSS
- 自訂 javascript
- 自訂 widget
- 自訂選單
- 支援第三方外掛(Disqus, google analysis..)
註: 我曾堅持用 Github Pages + jekyll 寫了兩個月的部落格,最後覺得我為什麼要這樣搞自己..= =。
註2: 更多關於 Stackedit 的介紹請參閱這篇文章:Logdown 的啓發 - StackEdit
(二) 事前準備
1. 申請 Blogger
到 Blogger 申請一個帳號就可以了,(you may need to edit your google+ profile on the way, since google wants to bind them together.)2. 申請 Domain
基本上跟著官方教學:如何在網誌使用自訂網域名稱 的步驟做就可以了。要注意的是,如果你的 Host Domain 的 DNS 內已經有某名稱(e.g. blogger)的紀錄了(e.g.
A record
),則新增同名稱的 CNAME
會失敗,要先把相關的 A record
刪除才行。3. 使用 StackEdit
使用 StackEdit 不須註冊,但依照使用的需求可能會需要連結 Google 帳戶、Dropbox 帳戶與 Blogger 帳戶。StackEdit 的使用方式相當簡單,看官方的展示影片應該很快就能學起來了。
幾個重要的工具都在左上角的選單中:
- 連結 Dropbox 文章:
Synchronize -> Open from Dropbox -> 授權 Dropbox -> 選取文章(markdown) -> 開啟
- 發佈至 Blogger:
Publish -> Blogger -> 授權 Blogger -> 輸入網址(自訂 Domain 也可)
右上角的資料夾則可以整理目前匯入這台電腦的 StackEdit 的文件(markdown)。4. Dropbox 圖床
2017/9/1 更新:Dropbox 已經關閉 Public Folder 功能,故以下方法已經不再適用!請另尋其他圖床。StackEdit 只是個介面,並沒有提供空間給我們放圖,但提供 markdown 語法插入圖片 URL。
我們的其中一個需求是:
圖片不受限於 CMS,可儲存於本地端,且圖床速度要快
。但是如果使用 Blogger 內建圖床的話,圖片會需要上傳至 Picasa,這對旅遊、美食類部落格來說或許很方便。但對我這種懶得上傳圖片,且可能需要常修改圖片的人而言,實在太過麻煩,我希望能夠在修改完圖片的同時,就已經自動完成上傳的動作。
世界上有這麼方便的事情?
有,使用 Dropbox 的 Public Folder 即可。
若你的 dropbox 帳號是在 2012/12 之後建立的,那你的資料夾預設是沒有 public folder 的,解決方法很簡單,到你的 Dropbox 資料夾最上層建立一個叫做 “Public” 的資料夾即可,建立完成後,該資料夾會有顆地球的 icon。
放在 Public Folder 的檔案會被視為「公開」的檔案,與一般 Dropbox 檔案不同的地方如下。
A. 一般的 Dropbox 檔案
一般 Dropbox 檔案按右鍵後會是分享 Dropbox 連結
。一般 Dropbox 的檔案的 Dropbox 連結是獨立的,例如:
https://www.dropbox.com/s/b4vk2d3yaljlzb2/run1.png
https://www.dropbox.com/s/vusefbcg59u9nte/eat4.png
上傳到 picasa 的圖片網址也是獨立的,例如:
https://lh6.googleusercontent.com/eXRsawqkbjg3QPxQ57lRN
https://lh5.googleusercontent.com/xdret56V2b-_7ghrwGK9e
B. Public Folder 內的 Dropbox 檔案
Public Folder 內的檔案按右鍵後會是複製公開連結
。Public Folder 的檔案的 Dropbox 連結是可推敲的,例如:
假設 Dropbox/Public/2015/dogs/run1.png 的網址是
https://dl.dropboxusercontent.com/u/XXXXXXX/2015/dogs/run1.png
則 Dropbox/Public/2013/cats/eat4.png 的網址會是
https://dl.dropboxusercontent.com/u/XXXXXXX/2013/cats/eat4.png
對想要用 markdown 快速插入圖片的我們來說,Dropbox 的 Public Folder 非常方便。
更大的誘因在於,當 Public Folder 內的圖片有變更時,Dropbox 會自動更新圖片,而網址依然不變!
圖片放在 Dropbox public folder 的優點:
- 編輯圖片後不須重新上傳,blogger 的圖片也會自動更新。
- URL 固定,用 markdown 寫文章時,只需要修改最後面的檔名,加快寫作效率。
- 圖床使用 dropbox 的高速 CDN,讀取速度飛快。
- 可以把整個資料夾的圖片透過 TinyPNG 等方式一次壓縮。
- 可以建立資料夾將圖片分門別類,整理起來更有序。
- 圖片 URL 是公開的,表示任何人都可以隨意讀取。但是寫 blog 本來就是要給大家看得,所以沒什麼差。
- 無法做到 thumbnail (純 markdown 做不到,必須透過 StackEdit 或 Blogger 的後端來做)。
- 不適合大量照片,例如旅遊、美食等等,大量照片最好還是用 picasa/Facebook/wordpress 等相簿尤佳。
(三) 自定 Blogger 版面
我的 Blogger 版面放在 Github,可供參考:https://github.com/johnyluyte/blogger-theme-picturewindow-with-tabs。
1. Syntax highlighter
我本身沒有用這個,不過列出來給大家參考。https://github.com/syntaxhighlighter/syntaxhighlighter
安裝方式請參考:How to Format Code and Syntax Highlighting to Blogger
- 從 Github 下載 syntaxhighlighter 的 release 版本。
- Use Dropbox to host the files. Simply add the unzipped files to your Dropbox Public folder. dropbox CDN is very fast.
2. Google Code Prettify
參考這篇文章:在Blogger內加入程式碼高亮-使用Google Code Prettify從 官方網站 下載下來後即可自己編輯 CSS,之後將編輯好的 CSS 放在 Dropbox public folder 即可。
CSS 的編輯與預期效果可參考 預設的範例。
預設好像只支援
Code Blocks
,我依自己的需求將其修改成可套用在 Code Spans
裡面。$("code").each(function(){
if(!$(this).closest("pre").length){
$(this).addClass('prettyprintinline');
}
});
由於 Stackedit 會自動將 Code Spans
與 Code Blocks
編譯成 HTML 的 <code>
與 <pre>
TAG,因此我們只要在 Blogger 用 javascript 抓出這些 TAG 並套上 Google Code Prettify 的 Class 即可達到全自動 code highlight 的效果。3. 自訂選單 Tabs
我的版面使用 Blogger 官方 template 的 Picture View,我喜歡其簡潔明瞭的設計,但它似乎缺少了預設的選單。參考這個網頁:How to Add Neat CSS3 Dropdown Menu in Blogger 擷取出簡單的 HTML Menu 選單。
將此 HTML 插入 layout 的 javascript 中,並加入適當的 CSS 調整版型。
<div id='contact-links'>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='linkToSomeAwesomePage'>My Page</a></li>
<li><a>Dropdown lists ▼</a>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</li>
<li><a href='#'>Another Page</a></li>
</ul>
</nav>
</div>
</div>
順帶一提,linkToSomeAwesomePage
最好使用 Absolute Path,要用相對路徑當然也可以,但要注意網域問題。4. 相關文章推薦
參考這篇文章: [小工具]Blogger 相關文章 V2__安裝懶人包 並自行做修改。5. 自訂其他版型 CSS
我的版面使用 Blogger 官方 template 的 Picture View,其<Table>
的預設版型並不好看,我們可以自行編輯 CSS 來調整其版型,但是我們又不是 CSS 高手,怎麼設計出好看的版型呢?解決方法也很簡單:拿別人做好的來版型套用就好了。
我直接拿 Bootstrap 的 table 部分 來做修改,並擷取出自己需要的部分。
修改後的 CSS 大概長得像這個樣子:bootstrap-table.css。
接著再到 layout 去插入 javascript。
<!-- bootstrapTable javascript starts -->
<link href="https://dl.dropboxusercontent.com/u/PATH_TO_YOUR_PUBLIC_LINK/
css/bootstrap-table.css" rel="stylesheet" type="text/css"></link>
<script type='text/javascript'>
$("table").each(function(){
$(this).addClass('table');
$(this).addClass('table-bordered');
});
</script>
<!-- bootstrapTable javascript ends -->
插入 CSS 之前的 <table>
長這個樣子:插入 CSS (bootstrap table-striped-bordered)之後的
<table>
好看多了:6. 其他版面元素
其他元素如字體、背景、等等也都可以自行設定。body{
font-family: 'Helvetica', 'Microsoft YaHei',
'Arial', sans-serif !important;
}
更多內容可以參考我的 Blogger 版面:https://github.com/johnyluyte/blogger-theme-picturewindow-with-tabs。
(四) 範例發文 workflow
- 編輯 markdown 文章
- 編輯本文
- 編輯 YAML
- 修正圖片,使用 https://tinypng.com/ 壓縮圖片
- 從 Dropbox public folder 取得公開連結,插入圖片
- 用 StackEdit 上傳
- 讀取並同步 markdown,看看有沒有明顯缺失,同步修改
- 檢查 TOC 是否正確
- 用 StackEdit 上傳至 Blogger
- 複製 postid 到 markdown,方便之後更新文章
- 檢查網址是否正確,有需要的話就 revert to draft,改網址
- 修正圖片長寬大小
因為我已經習慣了 Sublime Text 的各種快捷鍵,在自己熟悉的編輯器內寫文章/Coding 的效率會是用其他工具的好幾倍!
(五) 簡易 Q & A
1. 要怎麼在 StackEdit 創建目錄(Table of Contents)
在 Markdown 文章中輸入[toc]
即可。2. 讓文章在首頁只顯示部分內容,不要顯示全部內容
使用<!--more-->
來標示要部份顯示的內容(在該行之後的內容要點進文章內才會顯示)。推 mouth5566:有一次 我在衣蝶遇到郭采潔 他人超好的 跟他要簽名然後
<!-- 以上內容會顯示在首頁 -->
<!--more-->
<!-- 以下內容要點開本文才會顯示 -->
推 aray81205:就射了
推 huntersp:就射了
推 thousandgold:就射了
→ huntersp:靠杯一次三個人射喔
3. StackEdit 連結不了 Google 或 Blogger 帳號
請參閱這篇討論:Can’t sync with Google Drive after Upgrade #158Chrome 的 Disconnect extension 會擋住 google 認證的步驟,停用就可以了。
4. 用 firefox 時,code 不會自動 wrap 到下一行
請參閱這篇文章:MDN > CSS > word-wrap將 CSS 的
word-wrap
修改成 word-wrap
即可。{word-wrap: break-word;}
5. 修改文章的 permalink URL
假設某文章 md 檔名為2015-01-02-google-sheet-accounting.md
title 標題為
用 Google 試算表做免費實用的雲端記帳
用 StackEdit 發佈文章後,文章 URL 會是
http://your_domain/2015/01/google.html
而不是理想中的
http://your_domain/2015/01/google-sheet-accounting.html
因為 StackEdit 抓取的 URL 是 title 標題,而不是 md 檔名。
A. Blogger Page
解決方法:Custom Permalink Blogger Pages | Change Blogger Static Page URLsBlogger 頁面的話需要先到 Blogger 後台建立一篇文章,建立時的文章標題名稱就會自動設定成 permalink,先藉由輸入文章標題指定 URL,建立完成後再複製 postID 到 StackEdit ,從 StackEdit 更新真正的文章標題即可。
註: 由於 URL 不能含有中文字,要作為 URL 的文章標題只能包含英文、數字和底線。
B. Blogger Post
解決方法:Changing blogger post URL – Change the permalink URL of published Post普通部落格文章的話,就先用 StackEdit 發文,到 Blogger 後台將文章改回 draft,此時即可更改 permalink,再發佈即可。
6. 在文章中嵌入 Youtube 影片、Flash 元件
A. 嵌入 Youtube 影片
# Blogger 基本上用 iframe 就可以嵌入 youtube 了
<iframe title="YouTube video player" width="480" height="390"
src="http://youtube.com/v/iJ1tl20YDj0?html5=1" frameborder="0"
allowfullscreen></iframe>
# 如果不行的話改用這個折衷的方法
[](https://www.
youtube.com/watch?v=iJ1tl20YDj0)
# 再不行的話就只能這樣惹
[https://www.youtube.com/watch?v=iJ1tl20YDj0](https://www.youtube.
com/watch?v=iJ1tl20YDj0)
Youtube 影片嵌入效果請參考我的這篇文章:製作艦隊收藏(艦これ)外掛 (一) 事前準備更多資訊請參閱這篇討論:Is it possible to embed Youtube/Vimeo videos in Markdown using a C# Markdown library
以及這篇討論:How do I get a YouTube video thumbnail from the YouTube API?
B. 嵌入 Flash 元件
<iframe title="Flash player" width="200" height="290"
src=" http://chunnorris.cc/public/blog-sticker/yuki_clock_II_v10.swf"></iframe>
Flash 元件嵌入範例請參考我的這篇文章: (Blog Sticker) 長門時計 IIC. 修改 CSS
我們之所以使用<iframe>
而不用 <embed>
的原因在於:StackEdit 將 <iframe>
視為特殊 Tag,並且會用我們期待的方式處理 <iframe>
,反之 <embed>
則會當作一般文字而不予處理。有些瀏覽器預設會對 iFrame 做樣式處理,例如增加 border, inset 等等,如果覺得這樣不好看的話,記得到 CSS template 裡面加上
iframe {border: None}
。7. 跳脫 HTML tags
請參閱這篇討論:superscript in markdown (Github flavored)?依此類推,可直接在文章內刻上各種 HTML tags。反之,當在文章內出現
<p>
等符號時,記得用 code span 跳脫,否則會被視為 html tag。8. Blogger 預設用 br tag 取代掉 p tag,導致文章排版走樣
解決方法:參閱我之前寫的 這篇文章。9. Dropbox 的圖片不會在 popular post widget 出現 thumbnail
請參考下列討論:Re: Thumbnails Not Showing on Popular Post Widget原因在於
The Popular Posts widget will only display images that are uploaded to Blogger
。我們沒有上傳圖片到 blogger,而是使用 dropbox 的 Public folder,故 popular post widget 不會出現任何圖片。
解決方法:用自訂的 javascript + CSS 做到 popular post widget 的效果。例如:
<div id="gadget_feature_posts">
<ul>
<li>
<img src="https://dl.dropboxusercontent.com/u/34354811/your_icon.png">
<a href="http://blog.chunnorris.cc/2015/01/google-sheet-accounting.html">
用 Google 試算表做免費實用的雲端記帳
</a>
</li>
</ul></div>
再到 layout 調整 $('#gadget_feature_posts')
的 CSS 即可。10. 加入 Disqus 留言板
登入 blogger 跟 Disqus,到 https://disqus.com/admin/blogger/ 照著上面的指示操作即可。11. 設定 google analysis
- 登入 google analysis 設定 blogger 網址。
- 登入 blogger 後台的 settings -> other 設定 google analysis ID。
12. 在新分頁開啟超連結
Markdown 預設的超連結目標都是目前的分頁,但是我們可以用一些 簡單的 javascript 小技巧,使文章中的超連結可以在新的分頁 (tab) 中顯示,例如:<!-- Set markdown link target=“_blank” javascript starts -->
<script type='text/javascript'>
// 將所有在 .post-body.entry-content 文章內的連結都設定為 target = _blank
$(".post-body.entry-content a").attr('target', '_blank');
// 但是目錄 TOC 的連結不要
$(".toc a").attr('target', '');
</script>
<!-- Set markdown link target=“_blank” javascript ends -->