# トピックリストHTMLの改良 - テーマ、コンポーネント、プラグインの準備
**URL:** \
**Category:** Announcements\
**Tags:** new-feature\
**Created:** [2021 年 11 月 19 日午後 6:19 UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654 "2021-11-19T18:19:22Z")\
**Posts on this page:** 1\
**Showing post:** 1
**Author:**  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\
**Post date:** [2021 年 11 月 19 日午後 6:19 UTC](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654/1 "2021-11-19T18:19:22Z")
Discourse プロジェクトが開始されて以来、トピックリストのマークアップはほとんど変更されていません。最新の Web テクノロジーを活用するために、トピックリストのテーマ設定の可能性を向上させる変更を計画しています。
移行を可能な限りスムーズにするために、これらの変更は段階的に行われ、移行は 2022 年第 1 四半期中に完了する予定です。
## ✅ ステップ 1: CSS セレクターの更新
移行を開始するために、最近 `.topic-list-header`、`.topic-list-body`、および `.topic-list-data` クラスを追加しました。
- `thead` には `topic-list-header` クラスが付きました。
- `tbody` には、ご想像のとおり `topic-list-body` クラスが付きました。
- `td` 要素にも `topic-list-data` クラスが追加されました。
ほとんどのサイトでは、この変更は完全にシームレスに行われます。ただし、コアテンプレートをオーバーライドする複雑なテーマ/プラグインでは、いくつかの更新が必要になります。
#### 既存のテンプレートオーバーライドの更新
可能であれば、テンプレートのオーバーライドを削除し、カスタマイズには CSS とプラグインのアウトレットを組み合わせて使用することをお勧めします。オーバーライドを削除できない場合は、新しいクラスを含めるようにオーバーライドを手動で更新する必要があります。
クラスが追加されたテンプレートは次のとおりです。
- [`/templates/components/topic-list.hbs`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs)
- [`/templates/list/category-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/category-column.hbr)
- [`/app/templates/list/posters-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr)
- [`/app/templates/list/posts-count-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr)
- [`/app/templates/list/topic-list-item.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr)
- [`/app/templates/topic-list-header-column.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr)
- [`/app/templates/topic-list-header.hbr`](https://github.com/discourse/discourse/blob/0e371d4c6dbd0f3d30e6ac5c17de5ead726ffa5e/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr)
## 🔲 ステップ 2: 要素タイプの変更
このプロセスの次のステップは、既存の `table` 要素を、より適切な要素に変換することです。
#### `table` 要素をターゲットとするカスタムスタイルシートの準備
現時点では、カスタムスタイルシートから `table`、`thead`、`tbody`、`tr`、`td` への参照をすべて削除し、新しいクラスに置き換える必要があります。その後、要素タイプを変更したときに、カスタムテーマ設定が問題なく機能し続けるはずです。
この変更により、テーマおよびプラグイン開発者のコミュニティがどのようなものを構築できるかを見るのが楽しみです！ 🥳
---
_[View the full topic](https://meta.discourse.org/t/modernizing-our-topic-list-html-preparing-themes-components-and-plugins/209654)._