---
# System prepended metadata

title: 文件編輯風格
tags: [' Style', TWCC]

---

---
title: 文件編輯風格
tags: TWCC, 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:** &nbsp;
:::

:::spoiler Reference
![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_b3d186e3097629786e34c82651200ebd.png)
![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_e3e0eaff57a1998e2288c6fb9435d40e.png)
:::

- 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:** &nbsp;
:::

:::spoiler Reference
![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_5acface05b0d1febff4df51fbe916bf6.png)

![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_d59751030544b34e0a7e819a8666d632.png)
:::

- 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:** &nbsp;
:::

:::spoiler Reference
![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_8311b56caa0e8224ca2e889825dbbb6b.png)

![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_16db4f05163aabada3f9bd4f44ec194f.png)

![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_1262955328b0ac350196e552feb754ca.png)

![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_3bb8065ee1b464739005bf668a1518d7.png)
:::


- 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.,
![](https://cos.twcc.ai/SYS-MANUAL/uploads/upload_5a4ffebf47af1fab254e9ea93873f119.png)
:::

--

### 2-5. 相關文章

:::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>

- 鍵盤圖示：參考 HTML kbd tag: 

<kbd>Enter</kbd>

<kbd>Esc</kbd>

---

## 特殊用法筆記

上面有很多撰寫文件時，可使用的一致性規則與圖示(icon)，  
可以拿來參考。

--

### html 文字凸顯

- [HTML ins tag](https://www.w3schools.com/tags/tag_ins.asp)
- [HTML: HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)

<del>blue</del>
<ins>red</ins>

--

### 其他icon

- 參考：https://fontawesome.com/v4.7.0/icons/
  - 調整大小語法: [Font Awesome Examples](https://fontawesome.com/v4.7.0/examples/)

<i class="fa fa-ellipsis-v fa-20" aria-hidden="true"></i>

語法如下

```{html}
<i class="fa fa-ellipsis-v fa-20" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
```

--

### 鍵盤圖示

- 參考 HTML kbd tag

<kbd>Enter</kbd>  
<kbd>Esc</kbd>

---

## END
