Prossimi cambiamenti nell'intestazione - Preparazione di temi e plugin

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?

1 Mi Piace

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.

5 Mi Piace

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?

1 Mi Piace

Stiamo lavorando per creare una soluzione pulita per questo, ma non è ancora pronta. Tieni d’occhio questo argomento per gli aggiornamenti.

2 Mi Piace

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.

2 Mi Piace

@kana.tatsuta la nuova API è stata unita.

Ho aggiunto una sezione nell’OP con esempi su come personalizzare l’URL del logo.

2 Mi Piace

Abbiamo abilitato l’avviso admin per i nuovi deploy su istanze che utilizzano plugin o temi incompatibili.

2 Mi Piace

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>

@tradmo,

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>);
}
3 Mi Piace

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 :wave:,

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 :frowning:

Qualsiasi aiuto qui sarebbe molto apprezzato :pray:

Ciao @angelinekwan,

Ecco la nostra raccomandazione:

  1. Rimuovi il tuo file esistente javascripts/discourse/api-initializers/desktop-open-sidebar-always.js

  2. 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;
  }
}
4 Mi Piace

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. :smiley:

  • Crea un nuovo file initializer. Deve avere l’estensione .gjs
  • Il seguente codice dovrebbe fare quello che vuoi:
// 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" }
  );
});
4 Mi Piace

Grazie, Signore!

Ah, ora ha un po’ più di senso dopo averlo visto davanti a me.

Apprezzo molto la tua risposta!! :heart:

1 Mi Piace

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:

2 Mi Piace

Il vecchio codice del widget è stato rimosso.

3 Mi Piace

Qualcuno potrebbe aiutarmi ad aggiornare un componente del tema che aggiunge del testo accanto al “home-logo”? Grazie in anticipo.