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. 脚注示例 ↩︎

分享到