--- author: yukai date: "2019-12-09" description: HackMD 的新部落格竟然是用 HackMD 做的? summary: | HackMD 的新部落格竟然是用 HackMD 做的? 「書本模式」、「自訂樣式表」、「內嵌筆記」這幾個功能是什麼,又該如何使用? 本篇將一一介紹這次 HackMD 建立新部落格的過程。 tags: zh, tech --- # HackMD 新部落格開幕 嗨!歡迎來到 HackMD 的新部落格 🤗 HackMD 的新功能,除了能在站上的公告欄看到外,你也可以在 HackMD 的社群帳號,[Twitter](https://twitter.com/hackmdio) 帳號以及 [Facebook](https://www.facebook.com/hackmdio) 粉絲專頁上看到。 不過社群網站的貼文容易被淹沒,我們需要一個地方能妥善整理所有關於 HackMD 的新資訊,讓所有 HackMD 的新朋友能夠清楚的看到我們的軌跡。這些資訊到底該放在哪裡呢?聽說有個服務名字 Hack 開頭 MD 結尾,拿來寫 Markdown 超方便,又支援多人共同協作,不如就來試試看吧!🤩 ![](https://i.imgur.com/zI2vgHp.png =500x) **▲ HackMD 的臉書粉絲專頁** ![](https://i.imgur.com/1p3zD3w.png =500x) **▲ HackMD 的官方 Twitter 帳號** ![](https://i.imgur.com/lNwP1ej.png =500x) **▲ HackMD 的公告欄** ## HackMD 的書本模式 如你所見,我們的部落格就在這裡誕生囉,而且可能會讓你有點驚訝的是,這個部落格是用 HackMD 的「[書本模式][book-mode]」做的! 書本模式是什麼呢?書本模式是在 HackMD 裡**整理多篇筆記**的功能,它可以將多篇 HackMD 「整理成一本書」,透過側邊欄來瀏覽、切換多頁筆記內容。我們該如何使用呢? 1. 開一篇新的筆記,並使用無序清單來整理多篇筆記的連結 ```md - [連結 1](https://hackmd.io/link-to-note-a) - [連結 2](https://hackmd.io/link-to-note-b) ``` 2. 設定筆記共享模式為書本模式,並按下預覽 ![](https://i.imgur.com/TzU0tA2.png =300x) 一本簡單的小書就完成了! ![](https://i.imgur.com/fKoIb1f.png) **▲ 書本模式完成圖** 我們把每篇部落格文寫在 HackMD 上,再使用書本模式來整理文章,部落格文章的首頁即是以書本模式發佈的 HackMD 筆記。 不過看到這裡你可能會想:「騙誰啊!書本模式明明跟我現在看到的部落格長得完全不一樣啊!!」 確實,要完成現在你看到的 HackMD 部落格,還需要一點點的 *hack*! ## 在 HackMD 自訂筆記樣式表 這 **一點點的 hack** 指的就是 CSS!CSS (Cascading Style Sheets) 是網頁製作中不可或缺的要素之一,筆記的字體、顏色、粗細、排列方式都交給 CSS 定義,而且有一點很重要: **HackMD 是可以自訂筆記的 CSS 的!** 只要在 Markdown 的編輯區輸入 `<style>` 標籤,HackMD 會自動把裡面的樣式套用到筆記,你甚至可以像寫網頁一樣自訂自己的元素或各種內容喔! 拿 CSS Tricks 的 [The Shapes of CSS](https://css-tricks.com/the-shapes-of-css/) 當做例子,裡面有一段用 CSS 畫月亮的程式碼如下 ```css #moon { width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 red; } ``` 讓我們把這段程式碼貼進 HackMD 的筆記裡: ```md ## Title <div id="moon"></div> <style> #moon { width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 red; } </style> ``` 就能在 HackMD 筆記中成功畫出月亮了! ![](https://i.imgur.com/JF8lLu0.png) **▲ 在 HackMD 使用自訂 CSS 畫月亮** 透過 CSS,我們甚至可以大幅度的改造 HackMD 發佈樣式,下面兩個主題分別為直書排版和閱讀器主題。自訂 CSS 有著無限的可能性,歡迎大家來玩玩! ![](https://i.imgur.com/b3ICfHq.png) **日文直式排版範例 ([連結](https://hackmd.io/@yukai/BJlXYPEcr))** ![](https://i.imgur.com/MbbgzVV.png) **Reader 主題 ([連結](https://hackmd.io/@yukai/BkQM8MNmS))** ## 使用內嵌筆記功能共用筆記樣式表 當多份筆記中有許多共通內容時,身為一個軟體開發者,根據 **Don't repeat yourself** (DRY,不要重複你自己) 原則,我們應該共通的部分拆分出去。 程式碼可以用模組的方式共用,那筆記內容呢?這種「提出共用內容」的功能,在 HackMD 我們把它稱為「[內嵌筆記][embed-note]」,內嵌筆記的用法分成三個步驟: 1. 建立一篇共同內容的筆記 2. 複製筆記的 ID 3. 使用內嵌筆記的語法,在想要使用共同內容的筆記,內嵌該筆記內容 :::info &#x7B;%hackmd 筆記ID %&#x7D; ::: <style> .alert.alert-info { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; background-color: #f7f7f7; border: none; color: #333; font-size: 85%; } </style> 讓我們看個實際例子吧!首先我們先建立一份準備裡面有共用內容的筆記,在網址列後面的部分就是這篇筆記的 ID,我們把它複製起來 ![](https://i.imgur.com/LHO51pN.png) 接著到另一篇筆記,輸入內嵌筆記的語法: :::info &#x7B;%hackmd IZkuNzoQSjCNfEGOd0bESA %} ::: ![](https://i.imgur.com/OV40hze.png) 可以看到剛剛在另一篇筆記的內容被嵌進來了,只需要一行引用的語法。利用[內嵌筆記][embed-note]功能,我們可以將筆記的共用內容提取出去,提取的內容當然也包含樣式表,以中文直書主題為例,在你的筆記加上以下語法: :::info &#x7B;%hackmd @yukai/vertical-writing %} ::: 就可以讓筆記的發表模式以直書排版顯示囉! ![](https://i.imgur.com/b3ICfHq.png) ## 成果 在組合了「書本模式」、「自訂樣式表」、「內嵌筆記」這幾個 HackMD 功能,我們的部落格終於完成了! ![](https://i.imgur.com/FdzHM3p.png) 經過本文的介紹後,各位是否對 HackMD 的這幾個功能有了更深的理解呢?更多關於這幾個功能用法,可以參考 HackMD 的使用教學: - [書本模式][book-mode] - [內嵌筆記][embed-note] **Happy Hacking!** [book-mode]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-book-tw [embed-note]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-embed-note-tw ---