Не удается добавить новый класс к элементам страницы темы с помощью jQuery?

Разработка
1

У меня возникают трудности с изучением того, как работает Discourse, и я всё ещё запутался после прочтения этого. Я пытаюсь добавить динамический заголовок к имени администратора на странице поста с помощью jQuery, но это не работает.

Однако, если я нацелюсь, скажем, на тег body и добавлю класс, это сработает.
Так что, не могли бы вы объяснить, почему это не работает?
Код, кстати, вставлен во вкладку «Header».

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

Мне нужно внедрить это через плагин-Outlet или что-то подобное?

2

Вероятно, потому что в данном случае jQuery несовместим с конвейером рендеринга Ember и виджетов.

Видите ли, в этом скрипте вы не контролируете момент его срабатывания и то, на каком этапе выполнения JavaScript-приложения происходит отрисовка экрана.

Однако для этого существует метод JavaScript API, подробнее здесь:

decorateWidget()

А также для конкретного виджета:

Однако, прежде чем углубляться в эту тему, давайте отступим на шаг назад: вы просто хотите, чтобы отображалась должность?

Например, в постах Джеффа:

image
image367×114 7.42 KB

У него указана должность: “co-founder” (соучредитель).

Просто создайте новую группу, добавьте администраторов, перейдите в Управление → Членство и отредактируйте поле «Стандартная должность».

Теперь они смогут выбрать эту должность в настройках своей учетной записи в разделе «Предпочтения» (или вы можете сделать это за них).

image
image994×551 14.4 KB

Вы также можете использовать это для отображения специального значка к аватару (также продемонстрировано на приведенном выше скриншоте).

Очевидно, что если вы не хотите, чтобы это было так «жестко» зафиксировано, вам придется обратиться к программированию, но это, я уверен, вы согласитесь, требует гораздо меньше усилий.

3

Спасибо за помощь. Это не тот заголовок форума, который я ищу, но мне нужно отображать подсказку при наведении на эту маленькую иконку короны, которую я создал (видна только администраторам):

image
image450×178 72.4 KB

Кстати, вот CSS-код для этого:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
4

Отлично.

Похоже, вам стоит рассмотреть вариант с виджетом.

Также обратите внимание на этот метод API:

api.reopenWidget("poster-name", {

      html() {
          <<your-code-here-but-consider-using-the-original-as-template>>
      }
}

Рекомендую ознакомиться с этой статьей: A tour of how the Widget (Virtual DOM) code in Discourse works

В Discourse реализация подобных вещей требует значительно больше усилий, поскольку это автоматическое веб-приложение, но если сделать всё правильно, решение получается очень надежным.

5

Отлично, большое спасибо. Я изучу это и опубликую решение, если у меня получится. На первый взгляд, Discourse кажется пугающим в плане кастомизации, и я думал, что WordPress сложен :grinning_face_with_smiling_eyes:. Но, уверен, как только я разберусь со всеми этими плагинами и шаблонами, всё станет проще.

6

На самом деле, есть ещё более простое решение:

Рассмотрите этот метод API для замены обычного щита модератора:

api.replaceIcon('shield-alt', 'crown');

а затем измените текст всплывающей подсказки здесь:

image
image1152×402 10.7 KB

В этом случае ваш исходный CSS может оказаться излишним (хотя вы можете перекрасить иконку).

7

Но это уберет значок щита для модераторов, верно? Потому что я этого не хочу. Мне нужно добавить значок короны и всплывающий текст только для администраторов, так как у них его вообще нет на странице постов.

8

Ах, да, я привык к своим сайтам, где я одновременно и модератор, и администратор. Если разделить эти роли, это не сработает (то есть администраторы никогда не будут модераторами). Вам нужно предоставить администраторам права модератора.

Так что изучите другие варианты.

9

Попробуйте это:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    };
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

и

image
image1129×388 10.3 KB

работает у меня:

image
image736×305 14.6 KB

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

10

Звучит как решение, но, как я уже говорил, я новичок в настройке Discourse… Не могли бы вы объяснить, куда именно нужно вставить ваш код, так как я пока не пробовал никаких методов API?

11

Дайте мне секунду, я сделаю это правильно для вас.

12

Отлично, теперь это компонент темы:

(Installing a theme or theme component)

Роль администратора имеет приоритет — по умолчанию у администратора, который также является модератором, будет отображаться корона.

Теперь вы можете настроить иконку в зависимости от типа сотрудника.

image
image569×174 3.2 KB

Просто убедитесь, что вы добавили названия иконок в настройку подмножества SVG-иконок (иначе они не отобразятся):

image
image1141×242 9.07 KB

Настройте текст заголовка здесь:

image
image1129×388 10.3 KB

Аналогично для модератора.

13

Отлично :slightly_smiling_face:. Большое спасибо за вашу помощь!

14

С удовольствием (это было довольно весело!)

15

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

Теперь иконки настраиваются как для администратора, так и для модератора, хотя по умолчанию для администратора используется корона, а для модератора — стандартный щит.

Я переименовал TC.

Вероятно, есть места, где иконки не были преобразованы; возможно, я найду их в будущем.

16

Огромное спасибо! Это помогло мне в том, что я хотел сделать для своего форума! Думаю, ваш комментарий стоит закрепить для других пользователей, у которых возникают проблемы с отображением иконки рядом с именем администратора. Я использовал вашу функцию для отображения иконки щита, которая публично показывается в профиле модераторов, для администраторов. Теперь я могу иметь иконку щита без прав модератора, и она показывает правильный всплывающий подсказку администратора, когда у меня есть только права администратора. Большое спасибо за ваше время и за создание этого замечательного компонента для форумов людей!

Редактирование: Она не отображается публично в их профиле. В настоящее время она работает только в сообщениях.

17

Рад знакомству. Не стесняйтесь форкать, расширять и отправлять PR!