# 幫文章建立目錄 ㊙

**URL:** <https://vip.studycamp.tw/t/%E5%B9%AB%E6%96%87%E7%AB%A0%E5%BB%BA%E7%AB%8B%E7%9B%AE%E9%8C%84/7713>\
**Category:** Discourse 論壇使用說明\
**Tags:** 自動目錄\
**Created:** [2024年十二月5日 07:06 UTC](https://vip.studycamp.tw/t/%E5%B9%AB%E6%96%87%E7%AB%A0%E5%BB%BA%E7%AB%8B%E7%9B%AE%E9%8C%84/7713 "2024-12-05T07:06:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sky](https://vip.studycamp.tw/user_avatar/vip.studycamp.tw/sky/32/8098_2.png) [@sky](https://vip.studycamp.tw/u/sky)\
**Post date:** [2024年十二月5日 07:06 UTC](https://vip.studycamp.tw/t/%E5%B9%AB%E6%96%87%E7%AB%A0%E5%BB%BA%E7%AB%8B%E7%9B%AE%E9%8C%84/7713/1 "2024-12-05T07:06:18Z")

</div>

最近看到論壇幾篇寫的很棒的文章，因為篇幅有點長，我覺得加上目錄，對讀者會更友善。

> **重要補充** ：每次編輯完文章，存檔後必須再按 F5 重載網頁，右側的選單才可以順利點選。

要建立目錄，其實很簡單，一行指令就可以搞定，而且放在文章任何地方都可以。

```txt
<div data-theme-toc="true"> </div>

```

我的習慣是放在最下方，編輯文章時瀏覽比較順。

* * *

## ▌三種做法

> 先講做法，讓大家可以快速解決問題，後面再來談談我的觀察。

### 1. 自己加上該行指令

以我每天的 Udemy 限免課程分享為例，目前已經 **[可以做到全自動](https://vip.studycamp.tw/t/topic/7704/1)**。

程式完成的文案，最後一行就是該指令 `<div data-theme-toc="true"> </div>` 。

### 2. 從工具列（toolbar）選擇

工具列（toolbar）最右側的下拉式選單 ⚙（dropdown select box）中。

 ![編輯器（composer）〉工具列（toolbar）〉下拉式選單〉建立目錄](https://vip.studycamp.tw/uploads/default/original/2X/a/a03e0922f5fb68707d43da20aa380596a8d80099.png)

### 3. tag [自動選單](https://vip.studycamp.tw/tag/%E8%87%AA%E5%8B%95%E7%9B%AE%E9%8C%84)

我在後台管理員設定中，新增了一個 tag [**自動目錄**](https://vip.studycamp.tw/tag/%E8%87%AA%E5%8B%95%E7%9B%AE%E9%8C%84)，只要選了這個標籤，就會自動替文章加上目錄。

> 新增標籤的地方在編輯器工具列的上方右側（可選標籤），輸入文字就會顯示符合的標籤候選列表。

* * *

## ▌更好用的設定 - user friendly

我推測大家沒有設定目錄的問題是：太難找到這個按鈕。

所以我決定寫兩篇文章來協助大家：幫文章加上目錄（就是這篇文章）、如何在論壇中編輯文章（有空再寫）。

Discourse 的編輯器（composer），有一行工具列（toolbar），最右側的下拉式選單 ⚙（dropdown select box），點擊後、再往下捲動。

看起來很長，但其實編輯器一打開，就可以點擊下拉式選單，往下捲動（請參考前面的示意圖）。

由於 Discourse 目前沒有辦法設定工具列中的位置，所以我把較少用的功能移走（如：模糊化劇透），讓「建立目錄」的順序提前，不用捲動就可以看到。

我給大家的建議是（擇一即可）：

1. 使用標籤（tag）`自動選單`。

2. 從工具列中選擇「建立目錄」，位置不拘，但放在最後比較不會影響文章撰寫。

* * *

## ▌Discourse 官方參考文章

> 這個比較偏 Discourse 管理，而不是一般的編輯了。之後會移到其他文章。

我花了點時間，研究了一下工具列各個 icon 的調整方法。

如我經常提的，記錄下來，方便忘性超好的我，未來可以參考。

### 隱藏不用的 icon

有人在 Discourse 官網問到，要 **[如何客製化文章編輯器的工具列](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577)**。

工作人員的回覆是：

> 目前沒有工具列的相關設定，但可以透過主題和外掛來達成這個目的。
> 
> 如果有這個功能就好了，所以我把這個設為功能請求。

發問者希望可以移除或隱藏工具列的 插入日期/時間（Insert date / time）按鈕，做法是 **[在後台設定 CSS](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)**。

以下是隱藏工具列某個按鈕的作法：

> 我沒測試。

```auto
.d-editor-button-bar {
  .local-dates { // hides the date button
    display: none;
  }
}

```

如果要隱藏下拉式選單 ⚙ 中的按鈕，範例如下：

> 這個方法我試了，沒有用。（調整 ⚙ 選單順序也不行）

```auto
.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

```

### 調整 ⚙ 選單順序

如果想調整各按鈕的順序，CSS 語法範例如下：

> 我沒測試。

```auto
.d-editor-button-bar {
  .local-dates { // moves the date button to the beginning
    order: -1;
  }
}

```

以下 CSS 語法，可順利將「建立目錄」調整至 ⚙ 選單最上方。

```auto
.select-kit-collection {
  display: flex; /* 確保父容器是 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子項目 */
}

.select-kit-row[data-name="建立目錄"] {
  order: -1; /* 提前此項目 */
}

```

### 進階調整

但如果想要把下拉式選單中的按鈕，加到工具列中，或者倒過來，那就有點難度了，建議找有經驗的工程師協助。

以下範例是將 [**Discourse Gifs**](https://meta.discourse.org/t/discourse-gifs/158738) 這個按鈕，從下拉式選單中，移到工具列中。

> <https://github.com/discourse/discourse-gifs/blob/b0431b26143809f7a952cd98c2249db9e976bbfc/javascripts/discourse/initializers/gif-integration.js#L11C1-L23C12>

參考文章來源：

> **[How to customize the composer toolbar?](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577)**
>
> I’m wondering if there is any way to customize which buttons are displayed (and in which order) on the New Topic toolbar. Specifically, I want to replace the Date/Time button with the Add Event button. The Date/Time just causes confusion for new...

### 中文翻譯

Discourse 的多語言化，架構設定的很好，你可以載入預設的繁中（如果有的話），也可以自己設定。

這裡是自行設定的位置：客製化 \> 佈景主題 \> 元件 \> DiscoTOC

 ![Discourse TOC 目錄翻譯](https://vip.studycamp.tw/uploads/default/original/2X/9/910261b845327a699ca48bd8bf7cf76402bf3b38.png)