||||
-|-|
| 概要 | DiscoTOC を使えば、ワンクリックでトピックの目次を自動生成できます！
| 
| プレビュー | Discourse Theme Creator でのプレビュー |
| リポジトリリンク | https://github.com/discourse/DiscoTOC
|Discourse テーマ初心者の方へ | Discourse テーマの使い方に関する初心者ガイド
このテーマコンポーネントをインストール
サンプル
デスクトップ
モバイル
機能
toc = 目次 (table of contents)
-
コマンドメニューのギアアイコン内にあるボタンで、目次全体を自動生成します
-
目次は常に画面上に表示され、トピックの進行状況ウィジェットのようにコンテンツと一緒にスクロールします
-
トピック内のセクションをスクロールして見ると、目次の該当要素がアクティブ（青色ハイライト）に切り替わります
-
見出しに ID 属性を追加します（他のトピックや投稿から特定のセクションへのリンクを貼ることができます）
-
目次内のリンクをクリックすると、ブラウザが該当セクションへスムーズにスクロールして移動します
-
各見出しの隣にコピー可能なリンクを追加します（その見出しへのリンクを貼りたい場合に便利です）
-
RTL（右から左へ書かれる言語）対応
-
色は現在アクティブなカラーパレットに基づいて設定されます
動作原理
簡単に言うと、このコンポーネントは、コマンドボタンによって目次を生成するようマークされたトピックの見出しを探します。そして、現在のトピックがマークされている場合、すべての見出しを取得し、見出しレベルの順序に従って階層化された目次を作成します。つまり、マークダウン記法が構文として正しく記述されている必要があります。
# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
###### 見出し 6
見出しレベルを上下に移動することは自由ですが、順序は正しくなければなりません。
# 見出し 2
## 見出し 3
## 見出し 3
### 見出し 4
## 見出し 3
# 見出し 2
など...
目次内のリンクが機能するためには、見出しに ID 属性が必要です。コンポーネントは見出しにすでに ID があるかチェックし、ある場合はその ID を尊重します。これは、手動で目次を作成した場合などに便利です。
見出しに ID がない場合、コンポーネントはそのテキストに基づいて各見出しの ID を生成します（不要な文字は除去されます）。
これらすべてが完了すると、各セクションへ直接リンクするボタン（実際は見出し）の隣にリンクが追加されます：
設定
| 名前 | 説明 |
|---|---|
| 目次を作成するための最低信頼レベル | コマンドメニューで目次ボタンを表示するためにユーザーが持つ必要がある最低信頼レベル |
| コマンドメニューの目次テキスト | 目次が生成されることを示すために、コマンドメニューのプレビューペインの上部に表示されるテキスト |
| 自動目次カテゴリ | 指定されたカテゴリのトピックで目次を自動的に有効化 |
| 自動目次タグ | 指定されたタグを持つトピックで目次を自動的に有効化 |
| 目次の最小見出し数 | 目次を表示するためにトピック内に存在する必要がある最小の見出し数 |
翻訳
| 翻訳キー | デフォルト値 |
|---|---|
| table_of_contents | 目次 |
| insert_table_of_contents | 目次を挿入 |
| jump_bottom | 末尾へジャンプ |
| toggle_toc.show_timeline | タイムライン |
| toggle_toc.show_toc | 内容 |
このテーマには、翻訳または変更可能な 3 つの文字列が含まれています。
table_of_contents: "目次"
これは、モバイルで目次を開くボタンに使用されます。
insert_table_of_contents: "目次を挿入"
これは、コマンドメニューのギアアイコン内にある目次ボタンのテキストとして使用されます。
topic_will_contain_a_table_of_contents: "このトピックには目次が含まれます"
これは、コマンドメニューのプレビューに表示され、そのトピックに目次が生成されることを示すテキストです。
目次を作成するには？
- 構文が正しい見出しを含むトピックを作成します
- ギアメニューにある目次ボタンをクリックします（通常トピックの作成時のみ表示され、返信やプライベートメッセージでは無視されます）
- 完了です。
目次がある場合、トピックの進行状況ウィジェットはどうなりますか？
おそらく推測できると思いますが、同時に両方を表示するスペースがないため、このコンポーネントの動作は以下のようになります。
目次があるトピックでは、最初の投稿が画面に表示されている間はトピックの進行状況ウィジェットが非表示になり、代わりに目次が表示されます。
最初の投稿をスクロールして過ぎると、目次は一緒にスクロールせず、代わりにトピックの進行状況ウィジェットが表示され、返信を読み進めることができます。
つまり、最初の投稿には目次が、それ以降の投稿には通常のトピックの進行状況ウィジェットが表示されます。
これはデスクトップとモバイルの両方で発生します。
このコンポーネントを使用することによるデメリットはありますか？
現時点では特にありません。すべての変更はクライアントサイドで行われるため、コンポーネントを簡単に削除でき、インストール前の状態に戻すことができます。
制限事項
このコンポーネントは標準的なトピックレイアウトを前提としています。そのため、Vincent テーマのようにレイアウトを変更するテーマでは機能しません。レイアウトを変更する人気のあるテーマへの対応は、後ほどコンポーネント設定の形で提供される予定です。
クレジット
私は Greg Franko の tocify.js ライブラリを基に始めました。しかし、それが長年更新されていないようなので、これは本質的に不要な機能の多くを削除し、残りを Discourse に統合およびスタイル調整したハードフォークです。
そのため、外部へのリクエストはなく、gzip 圧縮後の総サイズは約 4kb です。
@erlend_sh さんには貴重なフィードバックを多数いただき、@david さんには翻訳のサポートをしていただきました。ありがとうございました。
当社でホストされていますか？ テーマコンポーネントは、当社の Pro、Business、Enterprise プランでご利用いただけます。