トピックリストHTMLの改良 - テーマ、コンポーネント、プラグインの準備

お知らせ
1

Discourse プロジェクトが開始されて以来、トピックリストのマークアップはほとんど変更されていません。最新の Web テクノロジーを活用するために、トピックリストのテーマ設定の可能性を向上させる変更を計画しています。

移行を可能な限りスムーズにするために、これらの変更は段階的に行われ、移行は 2022 年第 1 四半期中に完了する予定です。

:white_check_mark: ステップ 1: CSS セレクターの更新

移行を開始するために、最近 .topic-list-header、.topic-list-body、および .topic-list-data クラスを追加しました。

  • thead には topic-list-header クラスが付きました。
  • tbody には、ご想像のとおり topic-list-body クラスが付きました。
  • td 要素にも topic-list-data クラスが追加されました。

ほとんどのサイトでは、この変更は完全にシームレスに行われます。ただし、コアテンプレートをオーバーライドする複雑なテーマ/プラグインでは、いくつかの更新が必要になります。

既存のテンプレートオーバーライドの更新

可能であれば、テンプレートのオーバーライドを削除し、カスタマイズには CSS とプラグインのアウトレットを組み合わせて使用することをお勧めします。オーバーライドを削除できない場合は、新しいクラスを含めるようにオーバーライドを手動で更新する必要があります。

クラスが追加されたテンプレートは次のとおりです。

:black_square_button: ステップ 2: 要素タイプの変更

このプロセスの次のステップは、既存の table 要素を、より適切な要素に変換することです。

table 要素をターゲットとするカスタムスタイルシートの準備

現時点では、カスタムスタイルシートから table、thead、tbody、tr、td への参照をすべて削除し、新しいクラスに置き換える必要があります。その後、要素タイプを変更したときに、カスタムテーマ設定が問題なく機能し続けるはずです。

この変更により、テーマおよびプラグイン開発者のコミュニティがどのようなものを構築できるかを見るのが楽しみです！ :partying_face:

「いいね！」 38
6

ここで何が起こっているのか、もう少し詳しく教えていただけますか？

「いいね！」 4
7

tl;dr は、トピックリストに HTML の table 要素を使用しなくなるということです。CSS で大幅な変更を加えたい場合に、いくつかの奇妙な動作があり、あまり良くありません。

「いいね！」 16
8

これはすごいことです。テーブルから移行できることにとても興奮しています。これにより、トピックリスト全体で、より柔軟でシンプルなテーマ設定が可能になります。:heart_eyes:

「いいね！」 9
9

これは素晴らしい変更です。なぜなら、Emberではクラスとは異なり、バインディングを使用してタグ（例：<table>または<tr>）を<div>に動的にスワップアウトすることは（私の知る限り）許可されていません。これはありがたいことに可能です！

これは、コンポーネントテンプレートのルートに<table>がある場合、それ全体をオーバーライドしない限り、それに閉じ込められることを意味します。そうでなければ、それは不必要に過剰なものになるでしょう。

要するに、私は承認します！:heart_eyes:

「いいね！」 11
10

これらの変更を導入していただきありがとうございます！宣言を調整する前に、再確認しています。

マークアップは次のとおりです。

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

対応するクラスは次のとおりです。

.topic-list
  .topic-list-header
    (tr はここで削除されますか？)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
「いいね！」 5
11

はい、すべて正しく見えます :+1:

「いいね！」 7
13

これに関するアップデートはありますか？トピックリストをより適切にスタイル設定できるようになりたいです。

「いいね！」 4
14

残念ながら、Discourseでの他の喫緊の課題に対応するため、これはかなりの間、後回しにされていました。しかし、今後数週間で再び取り組む予定です！

「いいね！」 6