Pages

搜尋此網誌

2013年12月26日 星期四

stackedit:寫部落格的新利器

stackedit:寫部落格的新利器

最近經朋友介紹使用同樣是以 markdown 為書寫規則的線上編輯服務 stackedit 又讓我回到了 blogspot 了,本來本人是使用 octopress 將文章 push 到 github 發佈文章,因為自從使用 makedown 書寫文章以後就沒辦法接受用一般的編輯器來進行文章撰寫,之前會放棄 blogspot 也是因為沒有很好的 markdown 的支援。

使用 octopress 最大的好處就是可以利用 markdown 書寫,且可以自己調整 blog 的外觀,不過就是麻煩了點,每次發佈都要下指令,且文章的檔名沒辦法隨心所欲的顯示,其他還算不錯,另外如果寫的文章數變多了以後發佈時間也會比較慢,雖然我的文章還沒有那麼多就是了…

另外,畢竟 octopress 幾乎是自己架設,所以對於 SEO 還是必須自己下功夫,但在 bolgspot 就不用太花力器,google 都已幫做了很多了。

當然要回到 blogspot 最重要的就是 markdown 的撰寫風格,雖然 blogspot 尚未有這樣的功能,幸好有 stackedit 幫這個忙,所以我又回來 blogspot 繼續撰寫往後的 blog 這邊就介紹主要的功能:

你可以在 stackedit chrome 的官方套件下載,安裝在 chrome,下載之後,你可以到 google drive 新增 stackedit 的檔案:

enter image description here

一旦點選新增後,就會建立一個 document,就可以開始使用 stackedit 編輯文章,文章撰寫的過程中,有時候會需要插入圖片stackedit 也提供了很方便的圖片插入的功能,點選上方的圖片圖示:

enter image description here

跳出下面的視窗

enter image description here

你可以選擇外部的圖片網址,也可以選擇自己上傳照片,點選上圖下方的 import from google + 就可以用拖拉的方式來把照片上傳,同時就會自動產生連結。

一旦文章寫好或是隨時都可以用 command + S or 在 windows 底下用 ctrl + S 來進行儲存,他會把更新的內容寫入 google drive 的檔案內。

如果你寫的文章是要發佈到 blog 或是其他地方 stackedit 也提供了很方便的 publish 功能:

enter image description here

舉凡上述的對象都可以進行發佈,一旦設定完成,可以在左上角看到發佈的對象,

enter image description here

第一個圖示表示檔案儲存的對像,第二個表示你發佈得對象,只要文章有更新你就可以很方便的發佈到目標位置,且發佈對象可以多個,大大的節省發佈的時間。

除此之外,還可以給你自己選擇文章轉換的類型,有 HTML、pdf 以及原始的 markdown 檔案,其中還可以自定 templete,這邊推薦我在網路上找到的範本,來源網站:markdown templete

只要將下列的程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B33VkLLKzd0aYWxSaUhvQjR2SUU">

<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert">
</script>
<!--
To use highlight.js uncomment this part and comment the previous script
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.5/styles/github.min.css">
<script src="http://yandex.st/highlightjs/7.5/highlight.min.js"></script>
-->

</head>
<body><%= documentHTML %></body>
</html>

複製到 stackEdit 中 setting 的:

enter image description here

default templete 中,在發佈或存檔時在點選以 templete 輸出,就可以產出不錯的文件內容:

enter image description here

可說是一舉數得喔!

另外因為 StackEdit 綁定檔案是根據 id 來做對應,所以一旦檔案建立之後隨你放置在任何位置,連結都會一直都在,所以也不影響文件得整理,真的很方便,個人覺得與之前使用 octopress 的經驗來看,方便度大概有提昇寫作速度 30 % 左右,有興趣的可以體驗看看囉!這篇文章就是用 StackEdit,所撰寫的,給大家參考囉,我也把我本的網誌 蹤影 octopress + github 的文章也都轉到利用 stackedit 輸入到 blogspot,今後就在 blogspot 蹤影 blogspot 繼續與大家分享囉!

張貼留言