FastComments.com Blog

Hackaday.comのようなコメントシステムを作成する方法

2020年1月24日
作成者: Devon Winrick

おお、何が起こったの?

この投稿は、FastCommentsを使用してhttps://hackaday.comに似たコメントシステムを作成するデモです。

コピーすることはお勧めしませんが、これはFastCommentsの柔軟性を示しています。

FastCommentsをこのように見せるのは簡単です! 私たちはそれ用のUIを構築しました!例えば、FastCommentsがこのページに一致するように構成した設定は次の通りです:

FastComments Hackaday Settings

コード内で行う場合も同様に簡単です。

いくつかのオプションを設定するだけです。実際には7つです。ここにコードスニペットがあります(カスタムCSSは省略)。この方法で挿入できるCSSは限られています。CSSを定義するためには上記のUIを使うことをお勧めします。また、UIはCSSを圧縮してくれますが、customCSSプロパティを定義すると最適化は適用されません。

これらのそれぞれは何を意味するのでしょうか?

  • commentCountFormat = コメントスレッド上のタイトルの形式。 "[count]"は実際のローカライズされたカウントに置き換えられます。
  • commentCountUpdated = コメントカウントが変更されたときに呼び出される関数。これを使用してページの上部にコメント数を設定します。
  • headerHTML = "返信を残す"ボックスの上に表示されるHTML。この場合、見出し要素を挿入するために使用します。
  • hideAvatars = Hackadayにはアバターがないため、これをtrueに設定して非表示にします。
  • inputAfterComments = 返信ボックスをコメントフィードの下部に再配置します。
  • absoluteDates = デフォルトの日付形式(例:"11分前")を絶対日付に変更します。
  • customCSS = カスタムスタイリング

すべての設定オプションはこちらに文書化されています。