ハッシュタグに#変身

Discourse は、ハッシュタグ (#) を使用して、カテゴリ(Announcements)やタグ(release-notes)にリンクすることを長い間サポートしてきました。Discourse Chat の導入に伴い、ハッシュタグを使用してチャットチャンネルにリンクできるようにしたいと考えました。そのためには、チャンネルをオートコンプリートで提案できるようにし、投稿やチャットメッセージに調理できるように、システムの仕組みをオーバーホールする必要がありました。また、オートコンプリートメニューと調理済みハッシュタグのデザインをオーバーホールする時間も取ることにしました。

このオーバーホールに含まれる変更点の概要:

  • チャットが有効になっている場合、チャットチャンネルを検索できる機能
  • ハッシュタグ検索結果は、スラッグに基づいた完全一致を優先し、投稿またはチャットメッセージのどちらで使用しているかによって、異なる種類の結果を優先します(例:投稿ではカテゴリが上位、チャットではチャンネルが上位)。
  • 各結果に個別のアイコンが表示されます
  • 個別のアイコンを含む、調理済みハッシュタグの新しいスタイル

新しいオートコンプリートの結果:

ハッシュタグのオートコンプリートのための新しい調理済みスタイル。@mention スタイルによく似ています。

Discourse サイトで enable_experimental_hashtag_autocomplete サイト設定を有効にすることで、この新しいバージョンのハッシュタグオートコンプリートと調理をオプトインできます。

来年にはこれをデフォルトにする予定ですが、現時点ではまだ実験的な機能と見なされており、修正および改善すべき点がいくつかあります。

この機能は現在、Discourse Meta でも有効になっています :sparkles:

「いいね!」 42

Meta のこれらの新しいハッシュタグの例です。Announcements をチェックしてみてはいかがでしょうか?または、release-notes を読んでみてください!

「いいね!」 12

23件の投稿が新しいトピックに分割されました:Add colour and subcategory styling to category and chat mentions

投稿からチャットチャンネルにリンクする場合の簡単な例を次に示します: #general::channel

別のチャットチャンネルからチャットチャンネルにリンクする場合の簡単な例を次に示します:

「いいね!」 7

投稿が新しいトピックに分割されました:既存のハッシュタグを新しいデザインに変更

アップデートのお知らせです。ハッシュタグの処理方法を変更した結果、すべてのサイトでこれがデフォルトになりました。また、アイコンのカラー表示や、元のサブカテゴリのスタイリングも表示されるようになりました :rainbow: :\n\n#support Feature #general::channel Announcements > Blog \n\nhttps://github.com/discourse/discourse/pull/21788\n\n近いうちに、以前のハッシュタグシステムを参照していた古いコードも削除される予定です。

「いいね!」 16

これは非常に良いですね。しかし、視覚障碍者の方々にはどのように機能するのでしょうか? おそらく aria ラベルが不足しているのではないでしょうか。以下に、対応するプレビュー HTML を示します。

<p dir="ltr">
<a class="hashtag-cooked" href="/tag/accessibility" data-type="tag" data-id="109" data-slug="accessibility" tabindex="-1">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-109 svg-string" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>accessibility</span>
</a>
<a class="hashtag-cooked" href="/c/general/124" data-type="category" data-id="124" data-slug="general" tabindex="-1">
  <span class="hashtag-category-badge hashtag-color--category-124"></span>
  <span>General</span>
</a>
<a class="hashtag-cooked" href="/chat/c/general/508" data-type="channel" data-id="508" data-slug="general" tabindex="-1">
  <svg class="fa d-icon d-icon-comment svg-icon hashtag-missing svg-string" xmlns="http://www.w3.org/2000/svg">
    <use href="#comment"></use>
  </svg>
  <span>general</span>
</a>
<a class="hashtag-cooked" href="/c/documentation/devs/56" data-type="category" data-id="56" data-slug="devs" tabindex="-1">
  <span class="hashtag-category-badge hashtag-color--category-56"></span>
  <span>developers</span>
</a>
</p>
「いいね!」 7

ご指摘ありがとうございます。これは素晴らしい点です。少なくとも、各ハッシュタグにいくつかのaria-labelを追加する必要があります。今週中にコミットできるようにします。

「いいね!」 7

古いトピックは、HTMLが再構築されるまで、タグとカテゴリの新しいフォーマットを使用しません。UIを整合させるために、すべてのトピックを安全に再構築する方法はありますか?たとえば、rakeを使用するなど?

これはのようなものですか?テストしていません!

./launcher enter app
rake posts:rebake
「いいね!」 2

こちらの方がより的を絞っていると思います。

ただし、bundle exec の部分についてはよくわかりません。ライブサイトで必要かどうかはわかりません。

「いいね!」 5

bundle exec なしで、本番サイトで動作するようです :slight_smile:

root@Canapin-app:/var/www/discourse# rake hashtags:mark_old_format_for_rebake
古い形式のハッシュタグを含む投稿を検索しています。時間がかかる場合があります...
[!] 古い形式のハッシュタグを含む 0 件の投稿に再ベイクマークを付けようとしています。[CTRL+c] でキャンセル、[ENTER] で続行

完了しました。定期的な更新ジョブが実行されると、再ベイクが行われます。
「いいね!」 6