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

- 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

:::

- 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



:::

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

語法如下

<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