Не уверен, что я что-то упускаю, но я не редактировал тему «Dark», и в вкладке HTML нет кода для переноса во вкладку JS.
Уберёт ли удаление этого фрагмента ошибку?
Ага, точно! Спасибо!
У меня в теме есть вот это. Что нужно сделать, чтобы ошибка исчезла?
<script type="text/discourse-plugin" version="0.5">
api.decorateWidget('post-meta-data:after', dec => {
if (dec.attrs.post_number === 1) {
const topic = dec.getModel().get('topic');
return dec.rawHtml(`<div class="post-info topic-id"> #${topic.get('id')}</div>`);
}
});
</script>
Вам нужно перенести часть api.decorateWidget(); на вкладку «JS» в разделе «Редактировать CSS/HTML» темы. Однако обратите внимание, что виджеты больше не поддерживаются; вам следует использовать выходные точки плагинов.
Я перенёс это в JS следующим образом:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Ваш код здесь
api.decorateWidget('post-meta-data:after', dec => {
if (dec.attrs.post_number === 1) {
const topic = dec.getModel().get('topic');
return dec.rawHtml(`<div class="post-info topic-id"> #${topic.get('id')}</div>`);
}
});
И моё розовое предупреждение превратилось в красное:
Я не программист и не писал этот код, поэтому могу делать только то, что подсказывают другие.
Что касается того, что вы сказали о плагинных выходах (plugin outlets), это для меня слишком сложно.
Если кто-то не отвечает здесь достаточно быстро, вы можете обратиться в Marketplace, чтобы найти того, кто сможет вам помочь.
Я пока вернул это в <head>.
Меня устраивает предупреждение, пока проблема не будет решена.
Если это перестанет работать, ничего страшного — это просто удобное решение для того, что я действительно искал.
Есть ли ошибка в консоли браузера?
«Уведомление об устаревании: Добавление JS-кода с использованием устарело. Перенесите этот код в отдельный JavaScript-файл. [id устаревания: discourse.script-tag-discourse-plugin] [информация: Modernizing inline script tags for templates & JS API]»
«Уведомление об устаревании: Виджет
post-meta-dataустарел, иapi.decorateWidgetбольше не поддерживается как переопределение. [устарело с версии Discourse v3.5.0.beta1-dev] [id устаревания: discourse.post-stream-widget-overrides] [информация: Upcoming post stream changes - How to prepare themes and plugins]»
Я думаю, вы можете заменить это на розетки. Где в теме вы это добавляете?
Я бы добавил следующее для тех, кто привык легко добавлять JS в заголовки на своих сайтах:
-
Для меня здесь, в Discourse, в основном работает «ванильный» JavaScript, а не обычный JavaScript.
-
Чтобы решить проблемы с загрузкой, поместите код внутрь:
document.addEventListener(‘DOMContentLoaded’, function() {
// Код здесь
});
Это предотвратит ошибки, так как код будет выполняться после полной загрузки страницы.
Мы используем
<script type="text/discourse-plugin" version="0.8.40">
const LoginRoute = require("discourse/routes/login").default;
LoginRoute.reopen({
activate() {
this.controllerFor('application').setProperties({
showFooter: true
});
}
});
</script>
чтобы отображать подвал на всех страницах в соответствии с GDPR (Политика конфиденциальности и Impressum). Других изменений мы не вносили. Как нам лучше всего это преобразовать?
Большое спасибо!
Спасибо за инструкции. Я немного запутался: какие из методов в моем скрипте устарели и на какие мне следует перейти? Речь идет о отображении случайного баннера с изображением в верхней части страницы. Мне нужно часто менять расположение изображений, поэтому я хочу использовать новую вкладку JS внутри компонента темы, а не локальную загрузку или репозиторий GIT. Вот упрощенная схема текущего кода во вкладке <head>:
<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-widget", {
html() {
...
<<<javascript>>>
...
api.onPageChange(() => {
this.scheduleRerender();
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
{{mount-widget widget="my-widget"}}
</script>
Как администратор, который действует методом «тыка и догадки», я немного беспокоился, читая это, но когда я проверил свою пользовательскую тему, то увидел лишь очень простой скрипт:
<script type="text/discourse-plugin" version="0.8.11">
// Замена иконок для кнопок обмена
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');
</script>
Так что это была просто копия того, что находится между тегами script: перейдите на вкладку JS, и там найдётся место, куда это можно вставить. Это было легко!
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Замена иконок для кнопок обмена
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');
});
Извините за всплытие темы, но я все еще не понимаю, какой из новых методов использовать.
Может ли кто-нибудь подтвердить, есть ли способ достичь того же результата, что и выше, используя интерфейс панели администратора (либо вкладку <head>, либо вкладку JS)?
Виджеты и теги скриптов, подобные этим, устарели. Вы можете перенести код во вкладку JS и использовать что-то вроде:
import Component from "@glimmer/component";
// …
api.renderInOutlet(
"top-notices",
class MyBanner extends Component {
get someGetter() {
// Some code here
}
<template>
<!— HTML here —>
{{this.someGetter()}}
</template>
}
);
чтобы разместить класс компонента в слоте top-notices.
У меня есть ещё один устаревший компонент темы, который использует
api.decorateWidget("post:after", helper => {
const firstPost = helper.attrs.firstPost;
вместе с return h("div.myimage", [… чтобы вставить некоторый HTML (ссылку href) после первого сообщения.
Если я правильно понимаю, api.decorateWidget тоже устарел, но я не могу понять, как это сделать с помощью Glimmer. Этот метод, похоже, подходит для определения, является ли сообщение первым…
https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6
…но я не могу понять, какой метод рекомендуется сейчас для вставки необходимого мне HTML.
Не могли бы вы прислать полный код или ссылку на репозиторий (если есть)? Спасибо!