---
title: 文件編輯風格
tags: Style
---
# TWCC 文件編輯風格
## 1. 文字網頁連結
- 在顏色框裡的文件加底線，更清楚看到是連結，例：
:::info
[<ins>價目表</ins>](https://www.twcc.ai/doc?page=price#%E9%AB%98%E9%80%9F%E6%AA%94%E6%A1%88%E7%B3%BB%E7%B5%B1-Hyper-File-System-HFS)
:::
## 2. 備註分類
### 2-1. 重要 | Important
- 意義： 重要事項、警告
:::danger
<i class="fa fa-exclamation-triangle fa-20" aria-hidden="true"></i> **重要：**
:::
:::danger
<i class="fa fa-exclamation-triangle fa-20" aria-hidden="true"></i> **Important:**
:::
:::spoiler Reference
:::
- Usage：將以下內容內嵌 hackmd
```
:::danger
{%hackmd @docsharedstyle/important-zh %}
YOUR_CONTENT
:::
:::danger
{%hackmd @docsharedstyle/important-en %}
YOUR_CONTENT
:::
```
### 2-2. 提示 | Tip
- 意義： 更方便快速的操作方式
:::warning
<i class="fa fa-lightbulb-o fa-20" aria-hidden="true"></i> **提示：**
:::
:::warning
<i class="fa fa-lightbulb-o fa-20" aria-hidden="true"></i> **Tip:**
:::
:::spoiler Reference
:::
- Usage：將以下內容內嵌 hackmd
```
:::warning
{%hackmd @docsharedstyle/tip-zh %}
YOUR_CONTENT
:::
:::warning
{%hackmd @docsharedstyle/tip-en %}
YOUR_CONTENT
:::
```
### 2-3. 附註 | Note
- 意義： 參考資料、提醒
:::info
<i class="fa fa-paperclip fa-20" aria-hidden="true"></i> **附註：**
:::
:::info
<i class="fa fa-paperclip fa-20" aria-hidden="true"></i> **Note:**
:::
:::spoiler Reference
:::
- Usage：將以下內容內嵌 hackmd
```
:::info
{%hackmd @docsharedstyle/note-zh %}
YOUR_CONTENT
:::
:::info
{%hackmd @docsharedstyle/note-en %}
YOUR_CONTENT
:::
```
### 2-4. 案例情境
- 意義： 舉例 tutorial 適用的情境，放在文件最上方，先擊中 user 問題~可一目瞭然 tutorial 用意
:::success
<i class="fa fa-star" aria-hidden="true"></i> **案例情境： <情境>**
<br>
*您是否也有相同的困擾？讓我們手把手帶您組合 TWCC 雲端服務架構，輕鬆解決您的問題！*
:::
:::info
E.g.,
:::
### 2-4. 相關文章
:::info
<i class="fa fa-book fa-20" aria-hidden="true"></i> **相關文章：**
:::
## 3. 其他 icon
- 參考：https://fontawesome.com/v4.7.0/icons/
<i class="fa fa-ellipsis-v fa-20" aria-hidden="true"></i>
<i class="fa fa-exclamation-triangle fa-20" aria-hidden="true"></i>
<i class="fa fa-paperclip fa-20" aria-hidden="true"></i>
<i class="fa fa-lightbulb-o fa-20" aria-hidden="true"></i>
<i class="fa fa-gratipay fa-20" aria-hidden="true"></i>
<i class="fa fa-pencil" aria-hidden="true"></i>
- 鍵盤圖示：參考 HTML kbd tag:
<kbd>Enter</kbd>
<kbd>Esc</kbd>