Hexo 部落格速查表

Hexo 部落格速查表

  1. 實用連結
  2. 我的部落格資訊
  3. 設計
  4. 常用表情符號
  5. CSS
  6. Markdown（含外掛）
  7. Github 卡片
  8. Mermaid JS
  9. 長條圖

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

實用連結

我的部落格資訊

設計

常用表情符號
😄 :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 &#x21E7;</kbd> - 使用 Unicode 字元

Markdown（含外掛）

  • ++Inserted++ Inserted
  • 註腳 [^1] 用於標記[1]，[^1]: 用於註解
  • 如果 markdown 在 {{}} 或 {%%} 上造成問題，請使用 {% raw %}{% endraw %}
  • Youtube 影片 {% youtube [youtube id] %}
動作 Markdown 範例
下標 H~2~0 H20
上標 x^2^ x2
粗體 **bold** bold
斜體 *italic* italic
粗體和斜體 ***bold and italic*** bold and italic
標記 ==marked== marked
刪除線 ~~strikethrough~~ strikethrough
行內程式碼 `inline code` inline code
連結 [link text](https://example.com) link text
圖片 ![alt text](https://example.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. 項目 1
  2. 項目 2

無序清單

程式碼：

- 項目 1
- 項目 2

結果：

  • 項目 1
  • 項目 2

水平線

程式碼：
---

結果：

程式碼區塊

結果：

程式碼區塊

程式碼：

~~~
程式碼區塊
~~~

Github 卡片

使用者

程式碼：

{% githubCard user:neoalienson %}

neo.alienson

@neoalienson

📍 Hong Kong

🔗 https://01man.com

📁 42
Repositories
⭐ 22
Stars
📈 45
Commits
👥 14
Followers
🔄 28
Pull Requests
❗ 0
Issues
JavaScript 42.9% Swift 11.4% Dart 8.6% Python 8.6% TypeScript 8.6% Other 20.0%

儲存庫

程式碼：

{% 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 %}
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
{% endmermaid %}

結果：

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

即時渲染

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

長條圖

結果：

程式碼：

{% 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 %}

  1. 註腳範例 ↩︎

分享到