---
# System prepended metadata

title: 超級樣板的設計範例

---

# 超級樣板的設計範例 
![image.png](https://hackmd.io/_uploads/HkZ29pUQT.png)


## 使用範例參數
![image.png](https://hackmd.io/_uploads/S1QMLTU7a.png)

```
輸入 {{}} 可產生一個輸入框

輸入 {{ 欄位名稱 }} 可產生一個具有欄位名稱的輸入框

輸入 {{ 欄位名稱 || 預設值 }} 可產生一個具有欄位名稱的輸入框，且有預設值

輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 || s}} 可產生一個具有欄位名稱的下拉選單，且預設值為第一個選項

輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || c ||選項三 , 選項五}} 可產生一個具有欄位名稱的複選框，且有預設值

輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || r || 選項六 }} 可產生一個具有欄位名稱的單選框，且有預設值
```

```
c 和 r 的撰寫公式 => {{ 欄位名稱 || 選項 || 類型 || 預設值 }}
```

> s：下拉選單 select 、 c：多選框 checkbox 、 r：單選框 radio button

### 產生欄位的識別
![image.png](https://hackmd.io/_uploads/HkPgu6Lmp.png)

> 產生欄位的判斷方式，會以整個 {{ xx }} 當做識別，所以即使文字都一樣，但多一個空格，也會被視為不一樣的欄位喔 !

## 常見的欄位填充
![image.png](https://hackmd.io/_uploads/SJSbdmHQp.png)

```
你現在是一位 {{ 角色 || 行銷人員 }} ，幫我想出介紹 {{ 物品 }} 的宣傳文，字數限制 {{ 字數 || 300 }} 字。
```

## 下拉選單的設計
![image.png](https://hackmd.io/_uploads/Bk8a_XHXT.png)

```
請幫我把以下的程式碼
{{附上程式碼}}
從 {{ 程式語言 || Jquery, Javascript, Angular, ReactJs, VueJs || s }}  轉換成  {{ 轉換的程式語言  || Javascript, Angular, ReactJs, VueJs, Jquery || s  }} ，
請不要直接模仿 {{ 程式語言 || Jquery, Javascript, Angular, ReactJs, VueJs || s }}  實現方式，
請參考 {{ 轉換的程式語言  || Javascript, Angular, ReactJs, VueJs, Jquery || s  }} 的 官方 API 文件 和 開發者社群 的 撰寫規範與風格，
盡量使用 {{ 轉換的程式語言  || Javascript, Angular, ReactJs, VueJs, Jquery || s  }} 官方的範例當參考來源。
```

## 單選框的設計
![image.png](https://hackmd.io/_uploads/Bke1F7S76.png)

```
我正在撰寫 {{ 語言 || javascript, c# || r  || javascript }}，
我有一個 {{ 函式或變數 ||  函式, 變數 || r  || 函式 }} 需要命名，功能如下
{{ 內容 }}
請根據 {{ 語言 || javascript, c# || r  || javascript }} 命名風格，推薦我幾個的命名，與簡單說明原因。
```

## 多選框的設計
![image.png](https://hackmd.io/_uploads/rJglYXBma.png)

```
從以下不同的角度來思考這段話，至少提供30個字。
{{
 思考方向 
||
從正向的角度來思考這段話,
從逆向的角度來思考這段話,
用類比的方式思考這段話,
通過看它的影響來思考這段話,
從利益得失的角度來思考這段話
||
c
}}

這段話如下：
{{ 這段話 }}
```

> PS：快速回覆的拖拉改變順序功能，預計會在 1.1.5 版推出，此外目前單選框與多選框，選項太多會有跑版問題，也將會於 1.1.5 版進行修正。

