Hexo 部落格速查表

實用連結
我的部落格資訊
設計
常用表情符號
CSS
Markdown（含外掛）
Github 卡片
Mermaid JS

此頁面也用於測試文章和頁面中使用的元件。

實用連結

我的部落格資訊

檢查我的網域是否在中國大陸被封鎖

設計

Font Awesome

常用表情符號


😄 `:D`(快捷鍵)
😄 `:smile:`	😊 `:blush:`	😍 `:heart_eyes:`
😓 `:sweat:`	👍 `:thumbsup:`	😋 `:yum:`
😰 `:cold_sweat:`	😱 `:scream:`	😭 `:sob:`
😜 `:stuck_out_tongue_winking_eye:`	😗 `:kissing:`	😪 `:sleepy:`
💩 `:poop:`	✌️ `:v:`	💯 `:100:`
🙈 `:see_no_evil:`	🙉 `:hear_no_evil:`	🙊 `:speak_no_evil:`
💋 `:kiss:`	💀 `:skull:`	💧 `:droplet:`
🎆 `:fireworks:`	📢 `:loudspeaker:`	⚠️ `:warning:`
🚫 `:no_entry_sign:`	✅ `:white_check_mark:`	❌ `:x:`
㊙️ `:secret:`	⁉️ `:interrobang:`	‼️ `:bangbang:`

更多請參考 Emoji Cheatsheet

CSS

按鍵

Control <kbd>Contro</kbd>
Shift ⇧ <kbd>Shift ⇧</kbd> - 使用 Unicode 字元

Markdown（含外掛）

++Inserted++ Inserted
註腳 [^1] 用於標記^[1]，[^1]: 用於註解
如果 markdown 在 {{}} 或 {%%} 上造成問題，請使用 {% raw %}{% endraw %}
Youtube 影片 {% youtube [youtube id] %}

動作	Markdown	範例
下標	`H~2~0`	H₂0
上標	`x^2^`	x²
粗體	`bold`	bold
斜體	`italic`	italic
粗體和斜體	`*bold and italic*`	bold and italic
標記	`==marked==`	marked
刪除線	`~~strikethrough~~`	~~strikethrough~~
行內程式碼	`inline code`	`inline code`
連結	`[link text](https://neo01.com)`	link text
圖片	`![alt text](https://neo01.com/image.jpg)`

使用樣式類別的屬性，例如：

# header {.style-me}
paragraph {data-toggle=modal}
paragraph *style me*{.red} more text

輸出

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
<p>paragraph <em class="red">style me</em> more text</p>

表格欄位對齊

程式碼：

| 預設 | 左對齊 | 置中 | 右對齊 |
| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |

結果：

預設	左對齊	置中	右對齊
1	1	1	1
22	22	22	22
333	333	333	333

引用區塊

程式碼：

> 一些引用文字

結果：

一些引用文字

有序清單

程式碼：

1. 項目 1
2. 項目 2

結果：

項目 1
項目 2

無序清單

程式碼：

- 項目 1
- 項目 2

結果：

項目 1
項目 2

水平線

程式碼：
---

結果：

程式碼區塊

結果：

程式碼區塊

程式碼：

~~~
程式碼區塊
~~~

Github 卡片

使用者

程式碼：

{% githubCard user:neoalienson %}

neo.alienson

@neoalienson

📍 Hong Kong

🔗 https://01man.com

📁 45

Repositories

⭐ 22

Stars

📈 62

Commits

👥 13

Followers

🔄 5

Pull Requests

❗ 7

Issues

JavaScript 55.0% Swift 10.0% TypeScript 7.5% Dart 5.0% C++ 5.0% Other 17.5%

儲存庫

程式碼：

{% githubCard user:neoalienson repo:pachinko %}

結果：

📖

neoalienson/pachinko

An iOS 'pinball' game using SpriteKit and Swift with physics engine

⭐ 7 Stars 🍴 1 Forks Language: C++

Mermaid JS

預先渲染。

程式碼：

```MERMAID_BASE64_1236
YmxvY2stYmV0YQpjb2x1bW5zIDEKICBkYigoIkRCIikpCiAgYmxvY2tBcnJvd0lkNjxbIiZuYnNwOyZuYnNwOyZuYnNwOyJdPihkb3duKQogIGJsb2NrOklECiAgICBBCiAgICBCWyJBIHdpZGUgb25lIGluIHRoZSBtaWRkbGUiXQogICAgQwogIGVuZAogIHNwYWNlCiAgRAogIElEIC0tPiBECiAgQyAtLT4gRAogIHN0eWxlIEIgZmlsbDojOTY5LHN0cm9rZTojMzMzLHN0cm9rZS13aWR0aDo0cHg=
endraw %}
{% endcodeblock %}

結果：
```MERMAID_BASE64_1237
YmxvY2stYmV0YQpjb2x1bW5zIDEKICBkYigoIkRCIikpCiAgYmxvY2tBcnJvd0lkNjxbIiZuYnNwOyZuYnNwOyZuYnNwOyJdPihkb3duKQogIGJsb2NrOklECiAgICBBCiAgICBCWyJBIHdpZGUgb25lIGluIHRoZSBtaWRkbGUiXQogICAgQwogIGVuZAogIHNwYWNlCiAgRAogIElEIC0tPiBECiAgQyAtLT4gRAogIHN0eWxlIEIgZmlsbDojOTY5LHN0cm9rZTojMzMzLHN0cm9rZS13aWR0aDo0cHg=

即時渲染

<pre class="mermaid">
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
</pre>

## 長條圖

結果：
{% echarts %}
{
  "title": {
    "text": "各作業系統的臨時埠範圍"
  },
  "tooltip": {},
  "xAxis": {
    "type": "category",
    "data": ["Linux (舊)", "Linux (新)", "Windows", "FreeBSD", "macOS"]
  },
  "yAxis": {
    "type": "value",
    "name": "埠數量"
  },
  "series": [{
    "type": "bar",
    "data": [28233, 28232, 16384, 55536, 16384],
    "itemStyle": {
      "color": "#1976d2"
    }
  }]
}
{% endecharts %}

程式碼：
{% codeblock %}
{% raw %}{% echarts %}
{
  "title": {
    "text": "各作業系統的臨時埠範圍"
  },
  "tooltip": {},
  "xAxis": {
    "type": "category",
    "data": ["Linux (舊)", "Linux (新)", "Windows", "FreeBSD", "macOS"]
  },
  "yAxis": {
    "type": "value",
    "name": "埠數量"
  },
  "series": [{
    "type": "bar",
    "data": [28233, 28232, 16384, 55536, 16384],
    "itemStyle": {
      "color": "#1976d2"
    }
  }]
}
{% endecharts %}{% endraw %}

註腳範例 ↩︎