---
# System prepended metadata

title: HackMD 新部落格開幕
tags: [' tech', zh]

---

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

---