May 7, 2015

用 StackEdit 與 Dropbox 優化 Blogger 部落格文章寫作流程

去年暑假開始尋找一個最適合我工作流程的部落格,嘗試了許多工具後,最終選擇了 StackEdit、 Blogger 與 Dropbox 的組合。其優點如下:

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..)


目錄


(一) 理想中的部落格工具

我常隨手用 Sublime Text 將各種筆記用 markdown 格式記錄起來,存在 dropbox 內,並在適當的時間整理,因此最基本的需求是:

  • 支援 Markdown
  • 支援 YAML
  • 支援離線編輯。
  • 支援與 Dropbox 同步。

以前寫部落格最麻煩的地方在於,每當要修改文章內容時,總是會被部落格的 content management system (CMS) 給綁死,只是改一點內容就得大費周章,更不用說更換圖片或照片了。所以我希望能:

  • 能夠快速發佈/更新文章。
  • 文章不受限於 CMS,可儲存於本地端。
  • 圖片不受限於 CMS,可儲存於本地端,且圖床速度要快。

能達成上述目標就能符合我的 workflow 了,但能自訂的東西越多越能創造出自己理想的版面,因此可以的話也希望能有下列特色:

  • 免費空間
  • 內鍵 Google CDN,速度快
  • 自訂 Domain
  • 自訂版面
  • 自訂 CSS
  • 自訂 javascript
  • 自訂 widget
  • 自訂選單
  • 支援第三方外掛(Disqus, google analysis..)

我嘗試了許多部落格工具,除了國民用的 PixnetXuite 以外,也試過 WordpressTumblrGhostGithub Pages 等等,但最後真正能符合我需求的是 StackEditBloggerDropbox 的組合。

註: 我曾堅持用 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 圖床

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 SpansCode 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 高手,怎麼設計出好看的版型呢?

解決方法也很簡單:拿別人做好的來版型套用就好了。

我直接拿 Bootstraptable 部分 來做修改,並擷取出自己需要的部分。

修改後的 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'>
  $(&quot;table&quot;).each(function(){
      $(this).addClass(&#39;table&#39;);
      $(this).addClass(&#39;table-bordered&#39;);
  });
  </script>
<!-- bootstrapTable javascript ends -->

插入 CSS 之前的 <table> 長這個樣子:

插入 CSS (bootstrap table-striped-bordered)之後的 <table> 好看多了:

6. 其他版面元素

其他元素如字體、背景、等等也都可以自行設定。

body{
  font-family: &#39;Helvetica&#39;, &#39;Microsoft YaHei&#39;,
  &#39;Arial&#39;, 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,改網址
    • 修正圖片長寬大小

為什麼不從最一開始就直接在 StackEdit 編輯?

因為我已經習慣了 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 #158

Chrome 的 Disconnect extension 會擋住 google 認證的步驟,停用就可以了。

4. 用 firefox 時,code 不會自動 wrap 到下一行

請參閱這篇文章:MDN > CSS > word-wrap

將 CSS 的 word-wrap 修改成 word-wrap 即可。

{word-wrap: break-word;}

假設某文章 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 URLs

Blogger 頁面的話需要先到 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>

# 如果不行的話改用這個折衷的方法
[![name of pic](http://i1.ytimg.com/vi/Kk-ne7We1bE/0.jpg)](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) 長門時計 II

C. 修改 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
$(&quot;.post-body.entry-content a&quot;).attr(&#39;target&#39;, &#39;_blank&#39;);
// 但是目錄 TOC 的連結不要
$(&quot;.toc a&quot;).attr(&#39;target&#39;, &#39;&#39;);
</script>
<!-- Set markdown link target=“_blank” javascript ends -->