 |
概要 | DiscoTOC を使用すると、ワンクリックでトピックにインタラクティブな目次を生成できます！ |
 |
プレビュー | Discourse Theme Creator でのプレビュー |
 |
リポジトリへのリンク | https://github.com/discourse/DiscoTOC |
 |
Discourse テーマは初めてですか？ | Discourse テーマの使用に関する初心者ガイド |
このテーマコンポーネントをインストール
サンプル
デスクトップ
モバイル
機能
toc = table of contents（目次）
-
コンポーザーのギアメニューにあるボタンで、目次全体を自動的に生成します
-
目次は常に画面上に表示されます。トピックの進捗ウィジェットのようにコンテンツに合わせてスクロールします
-
トピック内のセクションをスクロールすると、目次のアクティブな要素がアクティブ状態（青色のハイライト）になります
-
目次の各エントリは見出しのアンカーにリンクしているため、他のトピックや投稿から特定のセクションへのリンクも作成できます
-
目次内のリンクをクリックすると、ブラウザが関連セクションに移動します（スムーズスクロール）
-
返信があるトピックでは、目次 / タイムライン ボタンで、目次と通常のトピックタイムラインを切り替えることができます。選択内容はブラウザに記憶されます
-
Discourse Docs プラグインと互換性があります
-
最初の投稿だけでなく、返信にも目次を追加するオプションサポート
-
RTL（右から左への表記）対応
動作原理
簡潔に言うと、目次を生成するようにマークされた（コンポーザーボタンを介して）トピック内の見出しを探し、現在のトピックがマークされていると判断されると、すべての見出しを取得して目次に配置します（見出しレベルの順序でネストされます）。つまり、マークダウンが構文的に正しい必要があります。
# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
見出しレベルの前後移動は自由ですが、順序は正しくなければなりません
# 見出し 2
## 見出し 3
## 見出し 3
### 見出し 4
## 見出し 3
# 見出し 2
など...
互換性のある見出しに関するいくつかのポイント
h1からh5が含まれます。h6は含まれません- 引用内の見出しは無視されるため、引用が目次を汚染することはありません
- 目次は、投稿の見出し数が TOC 最小見出し数 設定（デフォルトは 3）以上の場合にのみ表示されます
目次内のリンクはどのように動作しますか？
調理済み（cooked）投稿の各見出しには、p-<投稿 ID>-<見出しスラッグ>-<番号> の形式のアンカーが割り当てられます。これは見出しの背後にあるターゲットです。DiscoTOC は独自のアンカーを作成するのではなく、これらのアンカーにリンクします。
これらのアンカーには見出しの投稿内での位置が含まれているため、見出しの順序を変更したりタイトルを変更したりすると変化します。他の場所からセクションへのリンクを作成する場合は、見出しの上に安定した名前付きアンカーを追加できます。
<div><a name="my-section"></a></div>
## マイセクション
その後、/t/your-topic-slug/1234#my-section にリンクします。Discourse は投稿内で <a name="..."> を許可しています。DiscoTOC の独自のエントリは引き続きコアの見出しアンカーを使用しますが、あなたのアンカーは編集に関係なく動作し続けます。
設定
| 名前 | 説明 |
|---|---|
| TOC 作成の最小信頼レベル | コンポーザーで TOC ボタンを表示するために必要なレベル |
| コンポーザー TOC テキスト | トピックに目次が含まれることを示すためにコンポーザーの上部に表示されるテキスト |
| 自動 TOC カテゴリ | カテゴリで自動的に有効化 |
| 自動 TOC タグ | これらのタグを持つトピックで TOC を自動的に有効化 |
| 返信での TOC を有効化 | 返信での TOC を許可します。返信の TOC は 自動 TOC タグ および 自動 TOC カテゴリ 設定の影響を受けず、手動で挿入する必要があります |
| TOC 最小見出し数 | 目次を表示するためのトピック内の最小見出し数 |
コンポーザー TOC テキスト は、目次が生成されることを示すためにコンポーザープレビューに表示されるものです：
翻訳
| 翻訳 | デフォルト |
|---|---|
| table_of_contents | table of contents |
| insert_table_of_contents | Insert table of contents |
| jump_bottom | Jump to end |
| toggle_toc.show_timeline | Timeline |
| toggle_toc.show_toc | Contents |
table_of_contents: "table of contents"
これはモバイルで目次を開くボタンに使用されます
insert_table_of_contents: "Insert table of contents"
これはコンポーザーのギアメニューにある目次ボタンのテキストとして使用されます
toggle_toc.show_toc: "Contents"
toggle_toc.show_timeline: "Timeline"
これらは目次とトピックタイムラインを切り替えるボタンのラベルです
目次を作成するには？
- 構文的に正しい見出しを含むトピックを作成します
- コンポーザーのギアメニューにある目次ボタンをクリックします。デフォルトではトピックの最初の投稿にのみ表示されます。返信での TOC を有効化 設定を有効にすると、返信でも使用できます
- 完了。
トピックに目次がある場合、トピックの進捗ウィジェットはどうなりますか？
両方を同時に表示するスペースがないため、目次があるトピックでは、最初の投稿にいる間、トピックの進捗ウィジェットは非表示になり、代わりに目次が表示されます。最初の投稿をスクロールして過ぎると、返信を読みながら目次は通常のトピックの進捗ウィジェットに置き換えられます。（返信での TOC を有効化 がオンになっている場合、独自の目次を持つ返信はその目次を表示します。）
投稿が複数あるトピックでは、目次 / タイムライン ボタンで両方を切り替えることができ、その設定はブラウザに記憶されます。
狭い画面では、目次はトピック進捗領域のボタンを介してオーバーレイとして開きます。
このコンポーネントを使用するデメリットはありますか？
ほぼすべてがクライアント側で処理されるため、いつでもコンポーネントを削除でき、投稿は以前と同じようにレンダリングされます。コンテンツに直接影響する唯一のものはコンポーザーボタンです：投稿を <div data-theme-toc="true"> マーカーでラップし、これによってコンポーネントは投稿に目次が必要であることを認識します。コンポーネントをアンインストールした場合、このラッパーは投稿に残りますが、目に見える影響はありません。
制限事項
h6 見出しおよび引用内の見出しは目次に含まれません。
謝辞
これは Greg Franko の tocify.js ライブラリのハードフォークとして始まり、その後ネイティブ Ember コンポーネントとして書き直されました。外部依存関係やリクエストはありません。
多くの貴重なフィードバックをいただいた @erlend_sh と、翻訳を手伝ってくれた @david に大きな感謝を。