スタイリングコメントスレッド

適切に設計されたレビュースレッドは簡単に思えますが、そうではありません。この記事では、美しく使いやすいコメントスレッドを作成するように徐々に導かれます。

良いコメントスレッドの要素

コードを設計および書き込む前に、良いコメントスレッドの特性を理解しましょう。

1. コメントは読みやすく、すべての重要な情報（著者、投票、タイムスタンプ、コンテンツ）は一目で明らかです。
2. コメントのさまざまな部分は視覚的に異なり、ユーザーが各部分の機能をすぐに理解できるようにします。これは、アクションボタン（返信、レポートなど）やリンクにとって特に重要です。
3. コメント間に明確な階層的な視覚的な手がかりがあります。これは、ネストされたコメントに必要な条件です（つまり、あるコメントは別のコメントに応答します）。
4. 特定のコメントを簡単かつ迅速にスクロールしてください。特に、子のコメントで親のコメントにジャンプします（返信）。
5. コメントには、ユーザーがコメントとその返信を非表示にして表示できるトグルがあります。

さらに、ケーキにはアイシングがあります。

1. ユーザーはコメントをマークして、モデレーターが不適切なコンテンツに気付くことができます。
2. コメントが役立つかどうかを示すために、コメントを好むか、平手打ちすることができます。
3. 最初の数件のコメントのみが表示され、ユーザーはより多くのコメントをロードできます。

これらの高度な機能には、JavaScriptサポートが必要です。さらに、テクノロジースタックに応じて、これらの機能はサーバー側にも実装される場合があります。特に、投票数とコメントのタグステータスを追跡することもできます。したがって、この記事では、コメントスレッドのスタイルデザインに焦点を当てます。

基本的なコメントスレッド

単一のコメントの構造は簡単です。 1つのコメントのフレームワークは次のとおりです。

返信には、視覚階層のニーズを満たすために追加の左のインデントがあります。上記の構造のマーキングは次のようになるかもしれません：

<div>
  <div>
    <div>
      それが好きです</div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ 著者}}</a>
      <p>
        {{votes}}•{{add time}}
      </p>
    </div>
  </div>
  <div>
    <p>
      {{コメントコンテンツ}}
    </p>
    レポートに返信します</div>
  <div>
    
  </div>
</div>

応答の追加の左のインデントは、視覚的な階層プロンプトを提供します。いいねとタップボタンは、HTML文字コードをアイコンとして使用します。 sr-onlyクラスは、スクリーンリーダーを除くすべてのデバイスの要素を隠し、投票ボタンのアクセシビリティを改善します。

コメントにジャンプするリンクを追加します

次に、ユーザーがコメントにすばやくスクロールするのに役立つ機能を追加します。これは、ユーザーが返信する親のコメントにジャンプしたい場合に特に便利です。

1つのデザインは、コメントの左側にクリック可能な「ボーダー」をクリックすることです。

これを行うには、コメント本体を右に押し込み、返信に合わせます。また、このデザインはコメント間の階層を強化し、左の境界のリンクの数を見るだけで、現在読み取られたコメントのネストレベルを決定できます。もちろん、ボーダーリンクをクリックすると、すぐに高レベルのコメントにジャンプすることもできます。

これを行うには、各コメントにアンカー要素を追加する必要があります（<a></a> ）これらのアンカー要素をクリック可能な境界に設計します。

ここに理解するためのいくつかの変更があります：

• 各コメントにアンカーリンクを追加し、左側の境界線でスタイリングします。
• コメントのメインキャラクターは、返信と一致しています。
• .comment-heading （投票、著者、および追加時間を含む）の高さは50px固定されています。それらがタイトルの下に開始され、 position: absolute; top: 50px; height: calc(100% - 50px);ボーダーリンク用。
• 境界線のリンクには、バックグラウンドが切り取られており、左右の境界線は幅4px、幅12pxです。これは、可視領域の幅はわずか4pxですが、実際のクリック可能な領域の幅は12pxであることを意味します。表面が広くなると、ユーザーがリンクのポインターをより簡単に配置し、4pxが狭すぎるため、クリックしやすくなりますが、幅が広いため、視覚的に矛盾しているようになります。

ユーザーがクリックしてコメントを非表示/表示します

今、私たちはかなり満足のいくコメントスレッドを持っています。この設計自体は、多くの実践的なユースケースに適用できます。しかし、さらに一歩進んで、[トグル機能も追加します。つまり、クリックしてコメントを非表示にして表示します。

最も簡単な方法は、使用することです<details></details>そして<summary></summary>要素。要するに、クリックできます<summary></summary>全体を切り替える<details></details>可視性。これにはJavaScriptは必要ありません。これらのタグは現在、ブラウザの約96％によってサポートされています。

これを達成するには、コードに次の変更を加える必要があります。

• からコメントを入れてください
  に変更します<details></details>。
• コメントタイトル（ .comment-heading ）をラップします<summary></summary>タグ内。
• ユーザーに視覚的なヒントを提供して、コメントが隠されているかどうかを伝えます。

ここに理解するためのいくつかの変更があります：

• コメントは今です<details></details>、そして両方がopen属性を持っているので、デフォルトでは表示されます（オン）。
• コメントタイトルがパッケージ化されました<summary></summary>タグ内。デフォルトの矢印も削除されています。
• コメントの可視性ステータスのヒントは、主にコメントの右側にある小さなテキストから作成されます。このテキストの内容は親に基づいています<details></details>要素にopen属性の変更があるかどうか。テキスト自体は::afterセレクターを使用して作成された単純な擬似要素です。さらに、閉じたコメントの下部に境界線があり、ユーザーがより多くのコンテンツを示しています。
• CSSコードの最後に、 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}セレクターがあります。これは、インターネットエクスプローラー専用のハックです。 IEはそれをサポートしていません<details></details>、したがって、常にデフォルトでオンになっています。テキストを削除してカーソルをリセットすることにより、ユーザーは通常のコメントスレッドが表示され、コメントの可視性を切り替えることができません。

その他の予防策

コメントはありません

コメントスレッドにコメント（空の状態）がない場合、これをユーザーに明確に伝える必要があります。 「コメントなし」を含む単純な段落とテキストボックスと送信ボタンを含むフォームは、空の状態を扱うときに最小要件となるはずです。もっとうまくやりたい場合は、フォームに合った写真を追加することもできます。

コメントフォームに返信します

Webサイトごとに、コメントに返信するための実装方法が異なります。一部のサイトでは、古いスタイルの方法を使用して、ユーザーをフォームを含む新しいページ（簡単なテキストボックスと送信ボタン）にリダイレクトします。他のWebサイトは、コメントスレッドに直接フォームを開き、通常は単純なスイッチを使用します。後者は明らかにJavaScriptを必要としますが、現在はより人気があります。たとえば、上記の例では、返信ボタンをクリックして可視性を切り替えることができる簡単なフォームを追加できます。

新しい返信を投稿した後、ユーザーを配置します

上記のフォームと同様のフォームを使用して、ユーザーがコメントに応答するとします。既存の返信の上または下に見せますか？答えは、他の返信の上に常に表示する必要があるということです。ユーザーがフォームに記入して送信するとき、操作が成功したことを伝えるためにすぐにフィードバックが必要です。そのため、他の返信の上に新しい返信を掲載することで、スクロールダウンせずにこのフィードバックをユーザーに提供できます。その後のロードでは、ウェブサイトのアルゴリズムに従ってコメントと返信を手配できます。

マークダウンとコードブロックを処理します

多くのウェブサイト、特に開発者ブログは、コメントでマークダウンとコードブロックをサポートする必要があります。これは議論のより大きなトピックであり、議論するために特別な記事が必要になる場合があります。しかし、この記事のために、簡単に言えば、テキストボックスに簡単に添付できるマークダウンエディターがたくさんあります。それらのほとんどはJavaScriptを使用しているため、例に簡単に統合できるはずです。そのようなプラグインの1つは、Markdown-Itです。これには、MITライセンスが緩んでいます。 WysiWygエディターをチェックすることもできます。これは、Webコメントを処理するときに同様の機能を備えています。

スパム保護とユーザー認証

ユーザーが入力フォームを提供できるようにする場合は、スパムを保証できるため、これはコメントスレッドを構築するときに必見の問題です。スパムを減らすのに最適な方法は、GoogleのRecaptchaのようなサービスを使用することです。たとえば、上記の例では、Recaptchaボックスを送信ボタンの下に配置できます。これにより、当社のウェブサイトが乱用から保護されます。

スパムを防ぐ別の方法は、検証済みのユーザーのみがコメントを投稿できるようにすることです。つまり、ユーザーはアカウントを持ち、コメントを投稿するためにログインする必要があります。各コメントはアカウントにリンクされるため、モデレーターはスパムまたは低品質のコンテンツを継続的に投稿するユーザーに対処できます。 UI側では、「返信」または「コメントの投稿」ボタンをクリックしたときに、返信または投稿コメントボタンをクリックしたときにユーザーをログインページにリダイレクトすることです。認証プロセスが完了したら、コメントスレッドにリダイレクトしてフォームを開くだけです。

最後に、コメントにジャンプしたり、各コメントの可視性を切り替えるなどのクールな機能を備えた、美しく、使いやすく、アクセス可能なコメントスレッドを設計しました。また、コメントスレッドでフォームについて説明し、実際のアプリケーションで考慮すべき他のことについて説明します。私たちのコメントスレッドは、主にCSS（JavaScriptなし）を使用しています。これは、CSSがどれだけ開発したかを示しています。

以上がスタイリングコメントスレッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。