 |
概要 | DiscoTOCを使えば、ワンクリックでトピックのインタラクティブな目次を生成できます！ |
 |
プレビュー | Discourse Theme Creator でプレビュー |
 |
リポジトリリンク | https://github.com/discourse/DiscoTOC |
 |
Discourse テーマは初めて？ | Discourse テーマの使い方入門ガイド |
このテーマコンポーネントをインストール
サンプル
デスクトップ
モバイル
機能
toc = 目次
-
コンポーザーのギアメニューにあるボタンで、すべての toc を自動的に生成
-
toc は常に画面に表示されます。トピック進行度ウィジェットのようにコンテンツに合わせてスクロールします
-
トピック内でセクションをスクロールすると、目次内のアクティブな要素がアクティブに設定されます（青いハイライト）
-
見出しに id 属性が追加されます（他のトピック/投稿から特定セクションにリンク可能）
-
toc のリンクをクリックすると、ブラウザが関連セクションに移動します（スムーズスクロール）
-
各見出しの横にコピー可能なリンクが追加されます（リンクしたい場合）
-
RTL 対応
-
色は現在アクティブなカラーパレットに基づいています
仕組みは？
簡単に言うと、コンポーザーボタンを通じて toc を持つようにマークされたトピックの見出しを検索します。現在のトピックがマークされている場合、すべての見出しを取得し、見出しレベルの順序でネストして toc に配置します。つまり、Markdown は構文的に正しい必要があります。
# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
###### 見出し 6
見出しレベルを行ったり来たりしても構いませんが、順序は正しくなければなりません。
# 見出し 2
## 見出し 3
## 見出し 3
### 見出し 4
## 見出し 3
# 見出し 2
など...
toc のリンクが機能するためには、見出しに id 属性が必要です。コンポーネントは見出しにすでに id があるか確認し、あればそれを尊重します。これは、手動で toc を作成した場合に便利です。
見出しに id がない場合、テキストに基づいて各見出しに id を生成します（不要な文字は削除されます）
すべて完了すると、各ボタンの横にそのセクションに直接リンクするリンクも追加されます。
設定
| 名前 | 説明 |
|---|---|
| TOC 作成に必要な最小信頼レベル | コンポーザーで TOC ボタンを表示するためにユーザーが持つ必要がある最小信頼レベル |
| コンポーザー TOC テキスト | トピックに目次が含まれることを示すために、コンポーザーのプレビューペインの上部に表示されるテキスト |
| 自動 TOC カテゴリー | これらのカテゴリーのトピックで TOC を自動的に有効にする |
| 自動 TOC タグ | これらのタグを持つトピックで TOC を自動的に有効にする |
| TOC 最小見出し数 | 目次を表示するためのトピック内の最小見出し数 |
翻訳
| 翻訳 | デフォルト |
|---|---|
| table_of_contents | 目次 |
| insert_table_of_contents | 目次を挿入 |
| jump_bottom | 末尾へジャンプ |
| toggle_toc.show_timeline | タイムライン |
| toggle_toc.show_toc | 目次 |
このテーマには、翻訳または変更可能な 3 つの文字列が含まれています。
table_of_contents: "目次"
これは、モバイルで toc を開くボタンに使用されます。
insert_table_of_contents: "目次を挿入"
これは、コンポーザーのギアメニューにある toc ボタンのテキストとして使用されます。
topic_will_contain_a_table_of_contents: "このトピックには目次が含まれます"
これは、トピックに toc が生成されることを示すためにコンポーザーのプレビューに表示されるテキストです。
目次 (toc) の作成方法？
- 構文的に正しい見出しを含むトピックを作成
- ギアメニューの toc ボタンをクリック（通常のトピック作成時のみ表示され、返信や PM は無視されます）
- おしまい
トピックに toc がある場合、トピック進行度ウィジェットはどうなりますか？
おそらく予想がつく通り、両方を同時に表示するスペースはありません。そのため、このコンポーネントの動作は以下の通りです。
toc があるトピックでは、最初の投稿が表示されている間はトピック進行度ウィジェットが非表示になり、代わりに toc が表示されます。
最初の投稿をスクロールして過ぎると、toc はスクロールに追従せず、返信を読む間、トピック進行度が表示されます。
つまり、最初の投稿には toc が、その後の投稿には通常のトピック進行度ウィジェットが表示されます。
これはデスクトップとモバイルの両方で発生します。
このコンポーネントを使用するデメリットはありますか？
私には知られていません。すべての変更はクライアントサイドで行われます。したがって、コンポーネントを簡単に削除でき、投稿はインストール前の状態に戻ります。
制限事項
このコンポーネントは標準的なトピックレイアウトを前提としています。そのため、Vincent テーマのようにレイアウトを変更するテーマでは機能しません。レイアウトを変更する人気のあるテーマへのサポートは、後段階でコンポーネント設定の形で提供される予定です。
クレジット
私は Greg Franko の tocify.js ライブラリから始めました。しかし、しばらく更新されていないようなので、これは多くの不要な機能を削除し、Discourse 向けに統合・スタイルを適用したハードフォークです。
したがって、外部リクエストはなく、合計サイズは gzip 圧縮で約 4kb です。
多くの貴重なフィードバックをくれた @erlend_sh と、翻訳のサポートをしてくれた @david に大きな感謝を。
当方でホストされていますか？ テーマコンポーネントは、Pro、Business、Enterprise プランで利用可能です。