カスタムタグの順序を実装する方法

開発
1

こんにちは。

トピックタグをタググループ名の値でカスタム順序付けしようとしています。

テーマコンポーネントを検討しており、それが良い方法だと考えていますが、これについて意見を聞きたいのと、初めてのテーマコンポーネントなので、何かヒントがあれば教えてください。

よろしくお願いします。

「いいね！」 3
2

希望する順序をシミュレートするために、タグのdescriptionフィールドを整数を格納するために使用しました。タググループはタグ構造やDOMに公開されていないため、この方法を使用しました。

その後、テーマエディタのheadコードスニペットを使用して、以下のスクリプトをDOMに挿入しました。

これにより、タグを動的に並べ替えることができました。現時点では「ハック」ですが、少なくとも機能しています。

<script type="text/discourse-plugin" version="0.8">
  api.addTagsHtmlCallback(function(topic, params) {
    const containers = document.querySelectorAll(".discourse-tags");
    for (const container of containers) {
      const children = Array.from(container.children);

      children.sort((a, b) => {
        const orderA = parseInt(a.getAttribute("title"));
        const orderB = parseInt(b.getAttribute("title"));
        return orderA - orderB;
      });

      children.forEach(child => container.appendChild(child));
    }
  }, {priority: 100});
</script>