# vocus 編輯器使用秘笈

編輯器是 vocus 創作者最常接觸的功能之一，也是創作內容的必備工具，透過這篇文章，格編將會帶你認識 vocus 編輯器的所有功能，一起來看看吧！

此篇教學將介紹文章、貼文編輯器使用方式。

## 文章編輯器使用方式

vocus 文章編輯器主要包含以下使用範圍：

* **上方功能列**：包含了創作內容時，會使用到的大部分功能，例如：標題大小、文字對齊、插入多媒體、復原……等等
* **圖片功能列**：改變圖片樣式的功能
* **反白功能列**：改變文字樣式的功能，如粗體、斜體、建立超連結等**反白功能列**：改變文字樣式的功能，如粗體、斜體、建立超連結等
* **拖曳按鈕**
* **即時儲存功能**

接下來，就讓格編一一為你介紹！

## 一、**上方功能列**

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FDVT0iSnhOyiHQ85xNJJg%2F%E7%B7%A8%E8%BC%AF%E5%99%A8%E9%81%B8%E5%96%AE.png?alt=media#x26;token=fd5eceef-41d4-477f-8461-8580bd89c19d" alt=""><figcaption></figcaption></figure>

上方功能列一共包含了 12 種豐富的功能，可供創作者依照自身需求、內容類型而靈活運用。各個功能由左至右詳述如下：

### **目錄**

為內容設定標題後，編輯器將可顯示目錄，若點擊目錄當中的標題，可以直接跳轉至對應的內容段落。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FF3JXlGoCvnNWcKQttYNC%2F%E7%9B%AE%E9%8C%84.gif?alt=media#x26;token=3cac1246-bc78-4afe-8fc6-770961e6d3ef" alt=""><figcaption></figcaption></figure>

### **插入多媒體**

按下 Enter 鍵開啟新段落後，插入多媒體的按鈕即會啟用。點擊後，將另外展開多媒體功能列，並支援以下功能：

* **上傳圖片**：從自己的裝置中上傳圖片，可點選「選取檔案」上傳，或是直接將圖片拖曳至上傳區，上傳後，各個圖片將獨立顯示。

{% hint style="info" %}
建議上傳圖片格式：.png 檔案
{% endhint %}

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FXhC9hDqpyrCoW9dqkkJo%2F%E4%B8%8A%E5%82%B3%E5%9C%96%E7%89%87.gif?alt=media#x26;token=6ce5d50d-57b4-4136-9acc-438ebe200765" alt=""><figcaption></figcaption></figure>

* **插入多圖輪播**：從自己的裝置中上傳圖片，並在一個區塊中多個可點選「選取檔案」上傳，或是直接將圖片拖曳至上傳區，上傳後，圖片即可以輪播圖卡的方式呈現，並可左右滑動。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FtuLyD4AZMtYJqQq6cjna%2F%E8%BC%AA%E6%92%AD.gif?alt=media#x26;token=84b20c46-ed04-494b-bded-1ea6fbb17a7f" alt=""><figcaption></figcaption></figure>

* **拖曳上傳：**&#x4F60;也可以直接將電腦中的多張檔案，拖曳到編輯器中，即可完成上傳。圖片最多為 10 張，格式僅接受 jpg, png, gif。

<figure><img src="/files/oHJTRrB5rCUiEx2K5KZl" alt=""><figcaption></figcaption></figure>

* **複製本機圖片後貼上到編輯器**：可以從本機複製圖片後，貼上到編輯器上傳。

<figure><img src="/files/sPpkUUdfQXJVsv1aLLFq" alt=""><figcaption></figcaption></figure>

> 💡 貼心提醒：此功能也可以使用鍵盤的快捷鍵來進行唷！\
> PC：按下 Ctrl + C 鍵即可複製，按下 Ctrl + V 鍵即可貼上 \
> Mac：按下⌘ + C 鍵即可複製，按下⌘ + V 鍵即可貼上

* **插入圖庫圖片**：如果你想要在創作中附上精美的配圖，可以使用此功能，從圖庫插入精美的圖片素材，或是與你的內容相符的 GIF 圖片，只要輸入對應的關鍵字，即可搜尋到相關的圖片。

> （實際服務以編輯器內顯示為主）

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FEPTrVJfQ2NWXJhhUXIQP%2F%E5%9C%96%E5%BA%AB.gif?alt=media#x26;token=a0deb344-3aae-4238-9327-569bf4779a82" alt=""><figcaption></figcaption></figure>

* **嵌入網站**：如果你想把某個網址內容直接嵌入在文章中，可以使用這個功能。不只是 vocus 站上的內容，如果透過此功能嵌入 YouTube、Spotify、SoundCloud 等影音平台的內容，即可直接在內容的閱讀頁點選播放。因為各平台的網址有限制的 URL 格式，如果網站本身自己有設定的話，建議使用各平台提供的嵌入功能內的連結，才能正確使用。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2Fb8sr217JIXml7LTrl3p7%2F%E5%B5%8C%E5%85%A5%E7%B6%B2%E7%AB%99.gif?alt=media#x26;token=e07495e4-83cd-44df-afa8-0e63325eaa86" alt=""><figcaption></figcaption></figure>

目前支援嵌入的服務如下（實際以功能內顯示的為主）：

<figure><img src="/files/HV70dQe91sBHY9DeesZq" alt=""><figcaption></figcaption></figure>

### **插入分隔線**

在內容適時地插入分隔線，可以讓段落更加分明。

### **標題**

設定清楚的大小標（H2、H3），不只可以讓更清晰地傳達內容脈絡，還可以提升文章 SEO 價值。連續點擊即可切換大小標題，而系統也會自動擷取標題作為此篇內容的「章節目錄」。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FeWBWwBeXlHf1W9O2oApM%2F%E6%A8%99%E9%A1%8C.gif?alt=media#x26;token=54686215-fe73-4ca9-ab42-403dc2d5e65a" alt=""><figcaption></figcaption></figure>

### **引用**

提供兩種引言格式，連續點擊即可自由切換。善用引言來凸顯創作內容裡面的重點語句，也能讓讀者更瞭解內容亮點。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FxXh9c1ckaFuCTYQqh9i2%2F%E5%BC%95%E7%94%A8.gif?alt=media#x26;token=5470df6e-18c6-4e56-807c-91f60f4099eb" alt=""><figcaption></figcaption></figure>

### **程式碼區塊**

工程師與開發者的福音！不僅開放多種技術語言供你自由選擇，更有複製程式碼，以及 Prettier 程式碼自動排版功能，以及多采的語法突顯，讓程式碼看起來更加漂亮美觀。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FILmcY399sk1F6KQogCmA%2Fcode%20block.gif?alt=media#x26;token=e1c78e35-06eb-4d0e-8eb8-e080c0ebfeef" alt=""><figcaption></figcaption></figure>

### **變更對齊**

可依照創作情境，變更文字擺放位置，預設置左，連續點擊即可調整為置中、置右，或是恢復置左。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FBrQS7yrOOTQ9yXzMRLOf%2F%E8%AE%8A%E6%9B%B4%E5%B0%8D%E9%BD%8A.gif?alt=media#x26;token=e58075ec-3a11-476d-9db1-884b639dbd3e" alt=""><figcaption></figcaption></figure>

### **圓點項目符號、數字項目符號**

圓點項目符號可用於「條列式」說明，羅列內容；而數字項目符號可用於「步驟」說明，更好地強調內容的順序。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2F269F3xDGxpKJ7djVJHjP%2Fimage.png?alt=media#x26;token=d0df0ee0-aabc-4b6e-8f32-f8e8ce39bd12" alt=""><figcaption></figcaption></figure>

### **提及**

可提及 vocus 的會員或文章，被提及的對象將即時收到小鈴鐺通知。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FfxvjtEG1uf4ZMsVE7IG5%2F%E6%8F%90%E5%8F%8A.gif?alt=media#x26;token=d1c877e9-efec-483e-b07b-cd04281ca63d" alt=""><figcaption></figcaption></figure>

除了點選此按鈕之外，直接在編輯器輸入 @ 符號，也可以直接使用提及功能。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FCZzXvBVP8k9TPcljp1LB%2F%E6%8F%90%E5%8F%8A%E7%9B%B4%E6%8E%A5%E8%BC%B8%E5%85%A5.gif?alt=media#x26;token=5bff1659-17fa-4bbd-bff8-795910028be5" alt=""><figcaption></figcaption></figure>

### **復原**

復原上一步輸入的內容。

### **取消復原**

取消已進行的復原。

### **夜間模式**

長時間創作時，可以讓眼睛更舒適，減少螢幕光害。點擊一次將進入夜間模式，點擊第二次，將恢復開燈模式。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FDJvseKc7jqVUy7IM0dW8%2F%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F.gif?alt=media#x26;token=aa792b75-b0d7-4bf5-8039-3127aac71318" alt=""><figcaption></figcaption></figure>

## 二、**圖片功能列**

匯入一般圖片後，點選圖片即可再做其他設定。其中，圖片置中、滿版、置左的功能僅供一般圖片使用，在多圖輪播格式尚不支援。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2Ft5k2KH159CQagqsbfAyp%2F%E5%9C%96%E7%89%87%E5%B7%A5%E5%85%B7%E5%88%972.png?alt=media#x26;token=86d55a27-dfba-4d18-8c1a-adfd277c2b00" alt=""><figcaption></figcaption></figure>

## 三、**反白功能列**

如果你想對某些文字進行更細微的編輯，只要選取（也就是反白）目標文字，就能看到反白功能列出現，裡頭有以下功能：

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FYffQrmig0CFA6NZ5uwpk%2F%E5%8F%8D%E7%99%BD%E5%B7%A5%E5%85%B7%E5%88%97.png?alt=media#x26;token=97066cda-020a-4f6f-8e8f-bd0b5e0411c3" alt=""><figcaption></figcaption></figure>

* **粗體、斜體、刪除線、底線**：可適時地強調欲凸顯的內容重點。
* **程式碼功能**：清楚區別程式碼與一般文字，提升易讀性。
* **上標／下標**：可做為註腳、數學公式、化學方程式使用。
* **超連結**：當你需要在文章內放入連結時，建議選取文字、建立超連結（成功建立後，該段文字會變成藍色）；或選擇使用「插入功能列」裡頭的嵌入網站，文章的排版看起來會較清爽。

> 💡 貼心提醒：如果要使用「超連結」功能，**可以選取文字後直接貼上網址**就可帶入！不必點選超連結按鈕！

## 四、拖曳按鈕

如果使用桌機進行編輯，當游標移動到對應區塊時，將自動顯示「拖曳按鈕」。按住此按鈕並移動游標後，即可移動內容區塊，在想要調換內容順序時，更加方便。所有編輯器內的區塊（例如：圖片、文字、程式碼、嵌入網址…⁢…等等）都可以拖曳喔！

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FJlUTBb8Cd6amZNyMEjMi%2F%E6%8B%96%E6%9B%B3.gif?alt=media#x26;token=c6de80b9-503b-4ae0-8000-49242c27b6b5" alt=""><figcaption></figcaption></figure>

## 五、**即時儲存功能**

vocus 的編輯器提供即時儲存的功能，每當編輯器的內容有所更動，編輯器便會每 5 秒自動儲存一次，並在儲存完成後，於編輯器的左上方顯示綠燈與「已自動儲存」的字樣。**隨手創作、自動儲存，讓創作變成一件更加舒服的事。**

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FrMSpp9SZUqTVUDkdqagN%2F%E7%B7%A8%E8%BC%AF%E7%B4%80%E9%8C%84.png?alt=media#x26;token=9b097d5b-3dd5-4368-abbe-3e7008a9d0eb" alt=""><figcaption></figcaption></figure>

希望查詢過往最新幾筆的自動儲存紀錄時，也可以透過右上角的「…」，查看編輯紀錄。如果想要進一步瞭解編輯紀錄，歡迎前往查看「[如何查看編輯紀錄？](https://vocus.cc/help_center/waXeikq0HiG07olTcoqI)」。

***

## 貼文編輯器使用方式

貼文是一種更輕巧、凸顯圖像的創作形式，在畫面上會優先呈現圖片，不同於文章圖文穿插的方式。&#x20;

貼文編輯器的字數上限為 2,000 字、10 張圖片，若超過此上限，建議轉為文章形式發佈。

貼文支援上傳圖片、提及、與超連結功能：

**上傳圖片**：可選取檔案，或是拖曳多張圖片上傳，也可以選擇圖庫內容

**提及文章或會員**：輸入 ＠ 符號即可使用提及功能，提及指定文章或會員

**超連結**：反白文字後，直接貼上網址就可帶入連結

***

以上就是 vocus 編輯器的使用說明，期待你透過 vocus 編輯器提供的各式功能盡情揮灑創意，玩轉出不同的創作火花！


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://creator.vocus.cc/sha-long-shi-shen-mo-wei-shen-mo-chuang-zuo-zhe-shi-he-shi-yong-vocus-sha-long/vocus-bian-ji-qi-shi-yong-mi-ji.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
