Ваша вики выглядит многообещающе, и единственное, чего не хватает, — это огненный виджет Discord на правой панели, который есть у всех крутых ребят на районе? Вы пришли по адресу. Поехали!
Простое объяснение: кто-то в Dev Wiki написал скрипт, который собирает данные с вашего Discord сервера и отображает их на вики. Вам не обязательно разбираться в том, что такое Javascript и API, всё, что вам нужно сделать, это создать пару новых страниц на своей вики, скопировать и вставить туда несколько слов, и всё готово.
ПРИМЕЧАНИЕ: только администраторам вики разрешено редактировать пространство MediaWiki, поэтому только администраторы могут настраивать Discord виджеты!
Какие варианты у меня есть
Dev Wiki предлагает большой выбор скриптов (русский перевод для страниц тоже доступен):
Разница между ними в основном заключается в том, как они выглядят, а иногда и в том, как их настраивать, поэтому мы кратко рассмотрим их все, но сосредоточимся на настройке одного из них более подробно.
Конфигурация
Шаг 1
Прежде всего, нам нужно убедиться, что наш Discord сервер позволяет брать с него данные и отображать их в другом месте (по умолчанию это отключено). Если мы пропустим этот шаг, наш виджет не будет работать как надо.
Заходим на наш Discord сервер;
Нажимаем на его название и выбираем «Настройки сервера ⚙»;
Там мы видим несколько опций в списке и сразу после «Стикеры» мы видим «Виджет»;
Нажимаем на него и в открывшемся меню видим «Включить виджет сервера». Но не уходите пока, на этой странице также есть наш идентификатор сервера (много циферок), который нам понадобится позже, поэтому скопируйте его тоже!
Шаг 2
Любой скрипт из Dev Wiki (который вы собираетесь использовать для всей вики) должен быть сначала установлен на вашей вики. Это всегда делается одинаково:
...fandom.com/ru/wiki/MediaWiki:ImportJS — это место, куда вам нужно перейти в первую очередь;
Все скрипты начинаются с dev:, поэтому в нашем случае это будет один из этих:
dev:Discord.js
dev:DiscordIntegrator/code.js
dev:DiscordBanner.js
dev:DiscordChat.js
dev:DiscordModule/code.js
ПРИМЕЧАНИЕ: НЕ устанавливайте их все сразу, они перезапишут друг друга!
После импорта скрипта нам нужно убедиться, что все источники информации предоставлены. Каждый скрипт имеет свой собственный путь к пространству имен MediaWiki, из которого можно получить информацию, некоторые скрипты имеют довольно много способов настройки. Однако главное, что каждый скрипт должен знать, это то, к какому Discord серверу вы хотите подключиться. Тут как раз наш Discord ID и пригодится.
Шаг 3
Discord.js
...fandom.com/ru/wiki/MediaWiki:Custom-Discord-id: это необходимо для того, чтобы скрипт знал, какой Discord сервер мы хотим использовать. Нам нужно создать эту страницу и вставить длинный номер, который мы скопировали в нашем приложении Discord в настройках виджета.
Всё остальное в этом скрипте на ваше усмотрение, если не будет ничего указано, то настройки выставятся по умолчанию (что тоже неплохо). Например, мы можем создать такие страницы:
...fandom.com/ru/wiki/MediaWiki:Custom-Discord-header: это заголовок над виджетом, где мы видим «Community Chat» по умолчанию, но мы также можем использовать «Официальный сервер Discord» или «Чат Сообщества» или что-то ещё, что мы хотим ввести. Мы создаём страницу и пишем текст, который хотим отобразить.
...fandom.com/ru/wiki/MediaWiki:Custom-Discord-join: это кнопка для присоединения к Discord серверу, которая открывает ссылку-приглашение в новой вкладке. По умолчанию текст на нем установлен на «Join now!», но мы можем изменить его на «Присоединяйтесь к нашему серверу!» или все, что мы считаем подходящим (например, на Disney Speedstorm Wiki написано "3... 2... 1... Join!", потому что вики по игре, где в начале каждой гонки идёт отсчёт времени).
...fandom.com/ru/wiki/MediaWiki:Custom-DiscordIntegrator-config-id: это необходимо для того, чтобы скрипт знал, какой Discord сервер мы хотим использовать. Нам нужно создать эту страницу и вставить длинный номер, который мы скопировали в нашем приложении Discord в настройках виджета.
Всё остальное в этом скрипте на ваше усмотрение, если не будет ничего указано, то настройки выставятся по умолчанию (что тоже неплохо). Например, мы можем создать такие страницы:
...fandom.com/ru/wiki/MediaWiki:Custom-Discord-title: это заголовок над виджетом, который не отображается по умолчанию. Чтобы он работал, нам нужно что-то написать на этой странице (например, «Discord Сервер» или «Чат сообщества» или что-то ещё, что мы хотим).
...fandom.com/ru/wiki/MediaWiki:Custom-Discord-theme: эта страница позволяет нам определить, хотим ли мы, чтобы наш виджет Discord всегда был темным, всегда светлым или изменялся в соответствии с темой вики. Если эта страница не создана, она будет настроена на тему вики по умолчанию. Если мы хотим всегда иметь тёмную версию, нам нужно создать страницу и написать на ней «dark» (или «light» соответственно).
Этот скрипт немного отличается от двух предыдущих, потому что для работы он используетMediaWiki:Common.js (и редактирование этой страницы не разрешено по умолчанию, поэтому нам нужно сначала попросить сотрудников включить его для нас + каждое редактирование должно быть одобрено персоналом вручную), а также этот скрипт полностью генерирует изображение, которое нельзя как-либо персонализировать.
...fandom.com/ru/wiki/MediaWiki:Custom-DiscordBanner-id: это необходимо для того, чтобы скрипт знал, какой Discord сервер мы хотим использовать. Нам нужно создать эту страницу и вставить длинный номер, который мы скопировали в нашем приложении Discord в настройках виджета.
window.DiscordBannerSettings={bannerStyle:'2',inviteLink:'Vgfu9qb',// Вики Сообщества, ПРИМЕР НАСТРОЙКИprependToRail:false};
Этот код означает, что мы выбрали второй стиль баннера (как они выглядят можно увидеть тут), мы дали ссылку для приглашения, сгенерированную нашим сервером (которая обычно https://discord.com/invite/что-нибудь и это что-нибудь как раз мы и положили в код), и мы попросили скрипт не ставить виджет на самый верх правой колонки (самое первое, что мы видим).
DiscordChat.js
Это самый простой виджет для настройки, так как для него требуется только создать страницу идентификатора сервера. Нам нужно ...fandom.com/ru/wiki/MediaWiki:Custom-DiscordChat-id, куда мы вставляем длинный номер, который мы скопировали из настроек виджета нашего Discord сервера, и все готово!
Кастомизация: с чего начать
В теории все элементы, которые мы видим на странице, можно изменять. Некоторые из них нельзя трогать из-за правил кастомизации Фэндома, но наш Discord виджет туда не входит, поэтому мы можем играть с ним, сколько угодно! Только нужно помнить, что вся настройка идёт в ...fandom.com/ru/wiki/MediaWiki:Common.css, а эту страницу могут редактировать только администраторы!
В первую очередь нам нужно знать имена элементов, которые мы хотим декорировать. Для этого нам нужно научиться инспектировать элементы. Это делается через Dev Tools (инструменты разработчика) в нашем браузере.
Браузер
Как включить
Chrome/Edge
Нажать F12 (Windows) ⌘ + ⌥ + I (macOS)
Остальные браузеры
Ctrl + Shift + I (Windows) ⌘ + ⌥ + I (macOS)
После того, как мы открыли Dev Tools, мы находим кнопку, которая позволяет нам проверять элементы. Обычно это выглядит как стрелка в квадрате или прямоугольнике: . Тыкаем на эту кнопочку и находим ту часть виджета, которую хотим настроить. В новом окне, которое мы теперь видим рядом с нашей вики-страницей, мы можем найти имя элемента ( .имя { ), и вот его-то нам и надо кастомизировать.
Персонализация Discord.js
Давайте посмотрим, как мы можем превратить изображение № 1 в изображение № 2.
#1
#2
Сначала давайте глянем, какие страницы мы создали:
MediaWiki:Custom-Discord-branding: "new" (логотип Discord в новом стиле);
MediaWiki:Custom-Discord-footer: "Race with us today!" ("Давай с нами сегодня погоняем!");
Первый блок дает нам следующее: внутри нашего .discord-widget на тёмной теме .widget-theme-dark всё, что :is(.widget-header, .widget-footer, .widget-member .widget-member-name), должно иметь color цвет текста и цвет фона background-color. Для background-color мы использовали var (переменную), которая совпадает с цветом акцетов accent-color на каждой theme (теме), но это не обязательно, это личный выбор цвета.
Второй блок кода позволяет нам изменить .widget-body она же основная часть (в которой кружочки аватаров) внутри нашего .discord-widget: мы добавляем background изображение с url (ссылкой) и помещаем его в center + оно ещё и no-repeat (не повторяется). Мы также добавляем background-size (размер фона), дабы убедиться, что он занимает всё пространство.
В третьем блоке .discord-widget .widget-footer .widget-footer-info у нас фраза "Race with us today!". Тут мы только сделали color более явным и font (шрифт) жирнее.
И последний блок кода находил .widget-role-name (надпись "RACERS ONLINE" сверху) внутри .widget-body, который внутри .discord-widget, и давал ему margin-bottom (внешний отступ снизу), чтобы сдвинуть вниз кружочки с аватарами и показать лица Балу и Мэг получше. Этот блок также изменял цвет текста color и добавлял маленький внутренний отступ вокруг текста.
Ну вот и всё! Не забывайте, что вся кастомизация очень зависит от вики, не копируйте и не вставляйте её вслепую, так как она будет выглядеть так себе, если не будет подходить под конкретную вики. Используйте гайд в качестве примера и выберите свои собственные цвета, изображения и так далее. Не забудьте использовать Инструменты разработчика, чтобы найти имена элементов, которые вы хотите изменить!
. Тыкаем на эту кнопочку и находим ту часть виджета, которую хотим настроить. В новом окне, которое мы теперь видим рядом с нашей вики-страницей, мы можем найти имя элемента ( .имя { ), и вот его-то нам и надо кастомизировать.
