🇨🇳 DiscoTOC 自動コンテンツテーブル

コミュニティWiki 管理者
1

|||
-|-|-|
:information_source: | 概要 | DiscoTOC は、トピックの目次をワンクリックで作成できます。
| :eyeglasses: | プレビュー | Beginner's guide to using Discourse Themes （新しいタブで開いてください） |
:hammer_and_wrench: | リポジトリリンク | \u003chttps://github.com/discourse/DiscoTOC\u003e
:open_book: |Discourse テーマについて詳しくないですか？ | 公式ウェブサイトの Beginner’s guide to using Discourse Themes を参照してください。

例

デスクトップ

517×323 28.1 KB

モバイル

1554×3199 274 KB

特徴

toc = table of contents（目次）

  • メニューの上の設定ボタンから、現在のコンテンツの状況に応じて目次リストをワンクリックで生成します。
  • 目次は常にページに表示され、スクロールするコンテンツとトピックのリンクは同期します。
  • ページ内のトピックをスクロールすると、対応するトピックの目次がハイライト表示されます（緑色で表示）。
  • タイトルに属性を追加します（他のトピック/投稿から特定のコンテンツにリンクできます）。
  • 目次のトピックリンクをクリックすると、ブラウザは本文コンテンツの対応する位置に移動します（同期スクロール）。
  • 各タイトルにコピー可能なリンクを追加します（必要に応じて）。
  • RTLサポート
  • カラースキームは、現在使用しているカラースキームに基づいています。

仕組み

デフォルトでは、現在のコンテンツのタイトルは目次としてマークされます（コンポーザーボタンで上記操作を実行）。現在のテーマがマークされている場合、これも目次に変換されます（これは現在のタイトルの階層に関係します）。すべてのコンテンツタイトルが目次に変換されます — つまり、MDファイルのタイトル設定が正しい必要があります。タイトル設定の階層が間違っていると、変換結果も間違ったものになります。。

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

階層は自由に調整できますが、階層の正しさを保証する必要があります。

# heading 2
## heading 3
## heading 3
### heading 4
## heading 3
# heading 2

etc...

リンクが正しく機能するためには、すべてのタイトルにId属性が必要です。

このコンポーネントはタイトルのIdを自動的に検証します。タイトルが存在する場合、コンポーネントはより効果的に実行できます。Idは、手動でトピックを作成する場合にも役立ちます。

タイトルにIdがない場合、コンポーネントはタイトルの内容に基づいて自動的にIdを作成します（不要な文字は自動的に無視されます）。

上記の内容がすべて完了すると、TOCはタイトルに基づいて本文へのリンクを作成します。以下の図を参照してください。

設定

このコンポーネントには設定が1つしかありません。それは目次のアイコンです（この画像は後続の設定で使用されます。公式ではこのアイコンの変更は推奨されていません）。

翻訳とローカライゼーション

このコンポーネントで翻訳が必要な内容は非常に少なく、以下の3つのフィールドのみ翻訳が必要です。

table_of_contents: "table of contents（目次）"

これはモバイル端末でTOCを開いたときに表示されます。

242×500 28.3 KB

insert_table_of_contents: "Insert table of contents（目次を挿入）"

これは目次がトピックページに挿入されたときに表示されます。

517×305 11.3 KB

topic_will_contain_a_table_of_contents: "This topic will contain a table of contents（このトピックには目次が含まれます）"

これは、トピックコンテンツを編集する際に、右側のプレビューでプレビューページに表示されます。

690×316 9.27 KB

タイトルを作成する方法

  1. コンテンツのタイトルは、作成時に正しい構文で作成する必要があります。
  2. ページ内のメニューオプションをクリックします（これは通常のトピックと投稿にのみ表示されます。返信やプライベートメッセージの場合は表示されません）。
  3. トピックページに挿入します。

TOCを使用すると、読書進捗コンポーネントはどうなりますか？

ご存知かもしれませんが、ページ上で読書進捗とTOCを同時に表示することはできません。

公式の解決策は、最初の投稿を読む際にTOCが存在する場合、ページにはTOCのみが表示され、読書進捗コンポーネントは無視されて表示されないということです。

最初の投稿を過ぎてスクロールすると、TOCは表示されなくなり、代わりにコンテンツ全体の読書進捗バーが表示されます。

簡単に言うと、TOCは最初の投稿にのみ有効で、後続の投稿には読書進捗バーが使用されます。

モバイル端末とデスクトップアプリケーションの表示は同じです。

このコンポーネントを使用する際の問題

著者と公式の見解では、このコンポーネントの使用に関して現在問題は発生していません。

すべてのコンテンツ表示はクライアント側で行われます。専門用語で言えば、すべてのコンテンツはフロントエンドで行われるため、バックエンドのデータ提供には影響がありません。

このコンポーネントを無効にすると、すべてのコンテンツは元に戻ります。

使用上の制限

このコンポーネントは標準のテーマレイアウトを使用します。

レイアウトでタイトルの使用が変更されている場合、このTOCコンポーネントは正常に機能しません。

例えば、Vincent theme が使用されている場合、このコンポーネントは正常に機能しないことが知られています。

非常に人気のあるテーマのサポートは、公式プラグインにとって次の考慮事項および反転です。

開発者

公式の著者は、Greg Franko’s tocify.js ライブラリに基づいて開発しました。

しかし、残念ながら、このライブラリは長期間更新されていないため、著者は不要なコンテンツ、不要な機能、コードを削除し、関連機能をDiscourseに統合しました。

コンポーネント全体のサイズは約4KBです（gzip圧縮の場合）。

著者は、@erlend_sh による多くの良い提案と、@david による翻訳作業の完了に感謝しています。

改善が必要な点（TODO）

  • 編集時にリアルタイムでTOCを表示（リソース消費が非常に大きい可能性がある）
  • 主要なテーマのTOC表示をサポート
  • タイトルリンクボタンをクリックすると同時にクリップボードにコピー。

このバージョンのリリースについて、著者は、これは比較的初期のリリースであり、このコンポーネントに関する問題や改善点があれば、直接作者に連絡することを推奨しています。

このコンポーネントに関する公式の説明、リンク、およびディスカッションについては、DiscoTOC - automatic table of contents を参照してください。

技術サポート（中国語）

その他の質問やヘルプが必要な場合は、当社のウェブサイト（中国語）をご覧ください：iSharkFly - 飞鲨

「いいね！」 1