---
tags: blog, post
---

{%hackmd @hackmd/blog-article-base-layout %}

# HackMD 新部落格開幕

<div class="author-info flex justify-start items-center">
<img src="https://scontent.frmq3-1.fna.fbcdn.net/v/t1.18169-9/12289643_1113213255364958_7452493247279485019_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=BIaIWTGvXgcAX9-t3EB&tn=4FOMR3wjqlN4F3-M&_nc_ht=scontent.frmq3-1.fna&oh=20ad972d39dca75e1f76151eee55b360&oe=60F44082" class="img-circle" height="50">
<div>
<b><a href="https://hackmd.io/@yukai"> Yukai</a></b>
<br>
Developer, Co-founder of HackMD.
</div>
</div>

###

嗨！歡迎來到 HackMD 的新部落格 🤗

HackMD 的新功能，除了能在站上的公告欄看到外，你也可以在 HackMD 的社群帳號，[Twitter](https://twitter.com/hackmdio) 帳號以及 [Facebook](https://www.facebook.com/hackmdio) 粉絲專頁上看到。

不過社群網站的貼文容易被淹沒，我們需要一個地方能妥善整理所有關於 HackMD 的新資訊，讓所有 HackMD 的新朋友能夠清楚的看到我們的軌跡。這些資訊到底該放在哪裡呢？聽說有個服務名字 Hack 開頭 MD 結尾，拿來寫 Markdown 超方便，又支援多人共同協作，不如就來試試看吧！🤩

**▲ HackMD 的臉書粉絲專頁**

**▲ HackMD 的官方 Twitter 帳號**

**▲ HackMD 的公告欄**

## HackMD 的書本模式

如你所見，我們的部落格就在這裡誕生囉，而且可能會讓你有點驚訝的是，這個部落格是用 HackMD 的「[書本模式][book-mode]」做的！

書本模式是什麼呢？書本模式是在 HackMD 裡**整理多篇筆記**的功能，它可以將多篇 HackMD 「整理成一本書」，透過側邊欄來瀏覽、切換多頁筆記內容。我們該如何使用呢？

1. 開一篇新的筆記，並使用無序清單來整理多篇筆記的連結

    - [連結 1](https://hackmd.io/link-to-note-a)
    - [連結 2](https://hackmd.io/link-to-note-b)

2. 設定筆記共享模式為書本模式，並按下預覽

一本簡單的小書就完成了！

**▲ 書本模式完成圖**

我們把每篇部落格文寫在 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 畫月亮的程式碼如下

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

讓我們把這段程式碼貼進 HackMD 的筆記裡：

## Title

<div id="moon"></div>

<style>
#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}
</style>

就能在 HackMD 筆記中成功畫出月亮了！

**▲ 在 HackMD 使用自訂 CSS 畫月亮**

透過 CSS，我們甚至可以大幅度的改造 HackMD 發佈樣式，下面兩個主題分別為直書排版和閱讀器主題。自訂 CSS 有著無限的可能性，歡迎大家來玩玩！

**日文直式排版範例 ([連結](https://hackmd.io/@yukai/BJlXYPEcr))**

**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，我們把它複製起來


接著到另一篇筆記，輸入內嵌筆記的語法：

:::info
&#x7B;%hackmd IZkuNzoQSjCNfEGOd0bESA %}
:::


可以看到剛剛在另一篇筆記的內容被嵌進來了，只需要一行引用的語法。利用[內嵌筆記][embed-note]功能，我們可以將筆記的共用內容提取出去，提取的內容當然也包含樣式表，以中文直書主題為例，在你的筆記加上以下語法：

:::info
&#x7B;%hackmd @yukai/vertical-writing %}
:::

就可以讓筆記的發表模式以直書排版顯示囉！


## 成果

在組合了「書本模式」、「自訂樣式表」、「內嵌筆記」這幾個 HackMD 功能，我們的部落格終於完成了！


經過本文的介紹後，各位是否對 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

---

{%hackmd Bf1L2utoQm6ys8U-0bY7Tw %}