Cos’è che sta per essere interrotto, comunque? Forse esiste già un componente del tema supportato che farà il lavoro.
Si tratta solo del banner in alto che rimanda al sito principale?
Cos’è che sta per essere interrotto, comunque? Forse esiste già un componente del tema supportato che farà il lavoro.
Si tratta solo del banner in alto che rimanda al sito principale?
C’è un sostituto per:
api.changeWidgetSetting("header-notifications", "avatarSize", "large");
Questo mi dà l’avviso di deprecazione che porta qui:
Il widget header-notifications è stato deprecato e changeWidgetSetting non è più un override supportato.
Sono nella stessa barca.
Sto cercando di cambiare l’URL del logo nel modo corretto, ma quanto segue non è più realizzabile:
api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");
Qual è la chiamata API sostitutiva per questa?
Stiamo lavorando per creare una soluzione pulita per questo, ma non è ancora pronta. Tieni d’occhio questo argomento per gli aggiornamenti.
Ciao @david, una soluzione pulita può essere pronta entro venerdì 7 giugno? In caso contrario, potresti fornire una stima?
Scusa per la fretta, stiamo iniziando la Beta chiusa il 17 giugno e dobbiamo sapere se questo verrà implementato prima dei test o meno.
Non ho una data esatta, ma è probabile che sia nelle prossime 1-2 settimane. Non sarà pronto per domani.
Se hai bisogno di qualcosa di funzionante per domani, ti consiglio di utilizzare la vecchia API, che cambierà automaticamente il tuo sito per utilizzare l’implementazione legacy dell’header.
@kana.tatsuta la nuova API è stata unita.
Ho aggiunto una sezione nell’OP con esempi su come personalizzare l’URL del logo.
Abbiamo abilitato l’avviso admin per i nuovi deploy su istanze che utilizzano plugin o temi incompatibili.
Non sono sicuro di come aggiornare il mio codice. Ho provato alcune cose, ma ogni volta le immagini vengono visualizzate dal tema chiaro invece che dal mio tema scuro e da ciò che è stato caricato direttamente per queste immagini nel componente. Ci sono suggerimenti su come dovrebbe essere refattorizzato?
<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>
Prova a usare un connettore nell’outlet del plugin home-logo-contents. Il tuo codice verrebbe tradotto in qualcosa di simile a:
// 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>);
}
Per reopenWidget (sidebar-toggle), potresti aiutarmi a capire come sostituire il seguente codice? Non ho trovato istruzioni in questa guida
// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for 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);
},
};
Ciao a tutti
,
Qualcuno potrebbe aiutarmi con le modifiche di cui ho bisogno, per favore?
<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: 'Learning Center'
}, iconNode('graduation-cap')),
]);
});
</script>
Credo di doverlo convertire per usare api.headerIcons.add(“foo”, FooIcon, { before: “search” }) ma non sono sicuro al 100% di come farlo ![]()
Qualsiasi aiuto qui sarebbe molto apprezzato ![]()
Ciao @angelinekwan,
Ecco la nostra raccomandazione:
Rimuovi il tuo file esistente javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
Crea un nuovo file: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js e aggiungi il seguente codice:
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);
},
});
});
},
};
Aggiungi quanto segue a common/common.scss
html.desktop-view {
.header-sidebar-toggle {
display: none;
}
}
CIAO @Danny_Dainton,
Dai un’occhiata al componente tema Custom Header Links (icons). Credo faccia quello che ti serve.
Se non puoi usare il componente tema, api.headerIcons.add farà al caso tuo. ![]()
.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" }
);
});
Grazie, Signore!
Ah, ora ha un po’ più di senso dopo averlo visto davanti a me.
Apprezzo molto la tua risposta!! ![]()
Apprezzo l’assistenza nella migrazione di questo pezzo di codice che non riesco a capire come migrare:
api.reopenWidget("user-dropdown", {
html(attrs) {
return h(
"a.icon",
{title: I18n.t("custom.string.title")},
[iconNode("bell"), this.attach("header-notifications", attrs)],
);
},
});
L’obiettivo di questa modifica originariamente è mantenere il menu user-dropdown così com’è, ma sostituire l’immagine del profilo con un’icona (campanella)
Il modo più semplice per ottenere l’effetto desiderato è aggiungere l’icona utilizzando il PluginOutlet esistente e nascondere semplicemente l’immagine dell’avatar utente tramite CSS.
Su un file .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"}}`
);
});
},
};
Aggiungi il seguente CSS:
.header-dropdown-toggle.user-menu-panel img {
display: none;
}
Ottieni:
Il vecchio codice del widget è stato rimosso.
Qualcuno potrebbe aiutarmi ad aggiornare un componente del tema che aggiunge del testo accanto al “home-logo”? Grazie in anticipo.