# Как реализовать собственный порядок тегов

**URL:** https://meta.discourse.org/t/how-to-implement-custom-tag-ordering/276297
**Category:** Development
**Tags:** tags
**Created:** [23.Август.2023 12:02:45 UTC](https://meta.discourse.org/t/how-to-implement-custom-tag-ordering/276297 "2023-08-23T12:02:45Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![creekorful](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/creekorful/32/322189_2.png) [@creekorful](https://meta.discourse.org/u/creekorful)
#### Post date: [23.Август.2023 12:02:45 UTC](https://meta.discourse.org/t/how-to-implement-custom-tag-ordering/276297/1 "2023-08-23T12:02:45Z")

</div>

Привет.

Я пытаюсь настроить пользовательский порядок отображения тегов тем по значению их имени группы тегов.

Я изучал компоненты тем и думаю, что это правильный путь, но хотел бы получить ваше мнение, а также некоторые рекомендации, так как это будет мой первый компонент темы.

Спасибо.

---

<div class="post-metadata">

### Author: ![creekorful](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/creekorful/32/322189_2.png) [@creekorful](https://meta.discourse.org/u/creekorful)
#### Post date: [26.Август.2023 10:07:55 UTC](https://meta.discourse.org/t/how-to-implement-custom-tag-ordering/276297/2 "2023-08-26T10:07:55Z")

</div>

В итоге я использовал поле описания тега для хранения целого числа, чтобы симулировать желаемый порядок. Дело в том, что группа тегов не доступна ни в структуре тега, ни в DOM, поэтому я выбрал такой подход.

После этого, используя фрагмент кода в заголовке из редактора темы, я внедрил следующий скрипт в DOM.

Это позволило мне динамически переставлять теги. Хотя сейчас это своего рода «костыль», по крайней мере, он работает.

```javascript
<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>

```