¿Qué es exactamente lo que está a punto de romperse? Quizás haya un componente de tema compatible existente que haga el trabajo.
¿Es solo el banner en la parte superior que enlaza al sitio principal?
¿Qué es exactamente lo que está a punto de romperse? Quizás haya un componente de tema compatible existente que haga el trabajo.
¿Es solo el banner en la parte superior que enlaza al sitio principal?
¿Hay un reemplazo para:
api.changeWidgetSetting("header-notifications", "avatarSize", "large");
Esto me da la advertencia de depreciación que lleva aquí:
El widget header-notifications ha sido obsoleto y changeWidgetSetting ya no es una anulación admitida.
Estoy en el mismo barco.
Intentando cambiar la URL del logo de la manera correcta, pero lo siguiente ya no es posible:
api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");
¿Cuál es la llamada API de reemplazo para esto?
Estamos trabajando en la creación de una solución limpia para esto, pero aún no está lista. Mantente atento a este tema para ver las actualizaciones.
Hola @david: ¿puede estar lista una solución limpia para el viernes 7 de junio? Si no, ¿podrías proporcionar una estimación? Disculpa la urgencia, comenzamos la Beta cerrada el 17 de junio y necesitamos saber si esto se implementará antes de las pruebas o no.
No tengo una fecha exacta, pero es probable que sea en las próximas 1-2 semanas. No estará listo para mañana.
Si necesitas algo que funcione para mañana, te recomiendo usar la API antigua, que cambiará automáticamente tu sitio para usar la implementación de encabezado heredada.
@kana.tatsuta la nueva API se ha fusionado.
He añadido una sección en el OP con ejemplos de cómo personalizar la URL del logo.
Hemos habilitado el aviso para administradores para nuevas implementaciones en instancias que utilizan complementos o temas incompatibles.
No estoy seguro de cómo actualizar mi código. He intentado algunas cosas, pero cada vez las imágenes se muestran con el tema claro en lugar de mi tema oscuro y lo que se ha subido directamente para estas imágenes en el componente. ¿Alguna sugerencia sobre cómo se debería refactorizar esto?
<script type="text/discourse-plugin" version="0.8.25">
api.reopenWidget("home-logo", {
logoUrl() {
return (
settings.Alternative_logo_url || ""
);
},
mobileLogoUrl() {
return (
settings.Alternative_mobile_logo_url || ""
);
},
smallLogoUrl() {
return (
settings.Alternative_small_logo_url || ""
);
}
});
</script>
Intenta usar un conector en el outlet del plugin home-logo-contents. Tu código se traduciría a algo como:
// javascripts/discourse/initializers/customize-logo.gjs
import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: `logo-customizations`,
initialize(container) {
withPluginApi("1.29.0", (api) => {
renderHomeLogo(api);
});
},
};
function renderHomeLogo(api) {
const logoSmallUrl = settings.Alternative_small_logo_url || "";
const logoUrl = settings.Alternative_logo_url || "";
const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";
api.renderInOutlet("home-logo-contents",
<template>
<HomeLogoContents
@logoSmallUrl={{logoSmallUrl}}
@logoUrl={{logoUrl}}
@minimized={{@outletArgs.minimized}}
@mobileLogoUrl={{mobileLogoUrl}}
@showMobileLogo={{@outletArgs.showMobileLogo}}
@title={{@outletArgs.title}}
/>
</template>
);
}
Para reopenWidget (sidebar-toggle), ¿podrías ayudarme a entender cómo reemplazar el siguiente código? No encontré instrucciones en esta guía.
// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* botón sidebarToggle eliminado por "reopenWidget", applicationController fuerza showSidebar a true (para desktopView) */
import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";
function sidebarToggle(api) {
const applicationController = api.container.lookup("controller:application");
api.reopenWidget("sidebar-toggle", {
html(attrs) {
if (this.site.desktopView == true && attrs.showSidebar == false) {
applicationController.set("showSidebar", true);
}
},
});
}
export default {
name: "desktop-open-sidebar-always",
initialize() {
withPluginApi("0.10.1", sidebarToggle);
},
};
Hola a todos
,
¿Alguien podría ayudarme con los cambios que necesito para esto, por favor?
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
helper.h('a#graduation-cap.icon', {
href:'https://example.com/',
title: 'Centro de Aprendizaje'
}, iconNode('graduation-cap')),
]);
});
</script>
Creo que necesito convertirlo para usar api.headerIcons.add(“foo”, FooIcon, { before: “search” }) pero no estoy 100% seguro de cómo hacerlo ![]()
Cualquier ayuda aquí sería muy apreciada ![]()
Hola @angelinekwan,
Aquí está nuestra recomendación:
Elimina tu archivo existente javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
Crea un nuevo archivo: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js y agrega el siguiente código:
import { withPluginApi } from "discourse/lib/plugin-api";
const PLUGIN_NAME = "desktop-open-sidebar-always";
export default {
name: PLUGIN_NAME,
initialize() {
withPluginApi("1.34.0", (api) => {
api.modifyClass("controller:application", {
pluginId: PLUGIN_NAME,
calculateShowSidebar() {
if (this.site.desktopView && this.canDisplaySidebar) {
return true;
}
return this._super(...arguments);
},
});
});
},
};
Agrega lo siguiente a common/common.scss
html.desktop-view {
.header-sidebar-toggle {
display: none;
}
}
Hola @Danny_Dainton,
Echa un vistazo al componente de tema Custom Header Links (icons). Creo que hace lo que necesitas.
Si no puedes usar el componente de tema, api.headerIcons.add hará el truco. ![]()
.gjs// javascripts/discourse/initializers/custom-header-icons.gjs
import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";
export default apiInitializer("1.34.0", (api) => {
api.headerIcons.add(
"custom-header-home",
`
<li>
<a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
{{dIcon "graduation-cap"}}
</a>
</li>
`,
{ before: "search" }
);
});
¡Gracias, señor!
Ah, ahora tiene un poco más de sentido para mí después de verlo delante de mí.
¡Agradezco mucho su respuesta! ![]()
Agradecería ayuda para migrar este fragmento de código que no logro migrar:
api.reopenWidget("user-dropdown", {
html(attrs) {
return h(
"a.icon",
{title: I18n.t("custom.string.title")},
[iconNode("bell"), this.attach("header-notifications", attrs)],
);
},
});
El objetivo de este cambio originalmente es mantener el menú user-dropdown tal como está, pero reemplazar la imagen de perfil con un ícono (campana).
La forma más sencilla de conseguir el efecto que deseas es añadir el icono utilizando el PluginOutlet existente y simplemente ocultar la imagen del avatar del usuario mediante CSS.
En un archivo .gjs:
// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs
import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";
export default {
name: "user-dropdown-bell-icon",
initialize(container) {
withPluginApi("1.34.0", (api) => {
api.renderInOutlet("user-dropdown-notifications__before",
{{dIcon "bell"}}
);
});
},
};
Añade el siguiente CSS:
.header-dropdown-toggle.user-menu-panel img {
display: none;
}
Obtienes:
Se eliminó el código antiguo del widget.
¿Alguien podría ayudarme a actualizar un componente de tema que agrega texto junto al “home-logo”? Gracias de antemano.