Modernizzazione dei tag script inline per template e API JS

Sviluppatore
21

Non sono sicuro di non aver capito qualcosa, ma non ho modificato il tema “Dark” e non c’è codice nelle schede HTML da migrare alla scheda JS.

image
image1008×479 17.2 KB

22

La rimozione di quella parte fa scomparire l’errore?

2 Mi Piace
23

ahh sì! grazie

1 Mi Piace
24

Ho questo nel mio tema, cosa devo fare per far sparire l’errore?

<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>
25

Dovrai spostare la parte api.decorateWidget(); nella scheda ‘JS’ sotto ‘Modifica CSS/HTML’ in un tema. Ma tieni presente che i widget sono ora deprecati; vorrai utilizzare i plugin outlet.

2 Mi Piace
26

L’ho spostato in JS in questo modo:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
  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">&nbsp#${topic.get('id')}</div>`);
  }
});

E il mio avviso rosa si è trasformato in un avviso rosso:
PNG image

Non sono un programmatore e non ho scritto questo codice, quindi posso fare solo quello che qualcuno mi aiuta a fare.
Per quanto riguarda quello che hai detto sui plugin outlet, è al di là delle mie capacità.

27

se qualcuno non pubblica qui abbastanza velocemente potresti considerare Marketplace per trovare qualcuno che ti aiuti.

28

L’ho spostato di nuovo in <head> per ora.
Vanno bene gli avvisi finché non vengono risolti.
Se muore, non è la fine del mondo, è solo un bel workaround per quello che stavo veramente cercando.

29

C’è un errore nella console del browser?

30

“Avviso di deprecazione: l’aggiunta di codice JS utilizzando \u003cscript type=‘text/discourse-plugin’\u003e è deprecata. Sposta questo codice in un file JavaScript dedicato. [deprecation id: discourse.script-tag-discourse-plugin] [info: Modernizing inline script tags for templates & JS API]”

“Avviso di deprecazione: il widget post-meta-data è stato deprecato e api.decorateWidget non è più un override supportato. [deprecato da Discourse v3.5.0.beta1-dev] [deprecation id: discourse.post-stream-widget-overrides] [info: Upcoming post stream changes - How to prepare themes and plugins]”

31

Penso che tu possa sostituire questo con le prese. Dove nell’argomento stai aggiungendo questo?

32

Se ti stai chiedendo dove sia l’output in produzione, allora è qui.

post-number
post-number1568×436 53.9 KB

Preferirei però averlo in un posto che lo renda ricercabile.

1 Mi Piace
33

Aggiungerei a questo per le persone che aggiungono facilmente JS alle intestazioni sui loro siti web:

1° che per me funziona principalmente JavaScript “Vanilla” e non JavaScript regolare

2° per risolvere il problema del caricamento aggiungendo codice, inseriscilo all’interno di <script> document.addEventListener('DOMContentLoaded', function() { Il tuo codice qui }); </script>; questo eviterà errori poiché stai caricando il codice dopo il caricamento della pagina.

34

Stiamo usando

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

per mostrare un piè di pagina su tutte le pagine a causa del GDPR (Privacy Policy e Impressum). Altrimenti non abbiamo apportato alcuna modifica. Come possiamo convertirlo al meglio?

Grazie mille!

1 Mi Piace
35

Grazie per le istruzioni. Sono un po’ confuso riguardo a quali metodi nel mio script siano deprecati e a quali metodi dovrei migrare. Serve per mostrare un’immagine banner casuale in cima alla pagina. Ho bisogno di modificare frequentemente le posizioni delle immagini, quindi voglio usare la nuova scheda JS all’interno di un componente del tema, non un caricamento locale o un repository GIT. Ecco una panoramica semplificata del codice corrente nella scheda \u003chead\u003e:

<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>
36

In qualità di amministratore di poke and guess ero un po’ preoccupato leggendo questo, ma quando ho controllato il mio tema personalizzato, ho visto solo uno script molto semplice:

<script type="text/discourse-plugin" version="0.8.11">

// icon substitutions for share buttons
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');


</script>

Quindi era solo una copia di ciò che c’è tra i tag script, sono passato alla scheda JS e c’era un posto dove inserirlo. È stato facile!

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
	// icon substitutions for share buttons
	api.replaceIcon('d-post-share', 'up-right-from-square');
	api.replaceIcon('d-topic-share', 'up-right-from-square');
});
1 Mi Piace
37

Scusa per questo rialzo, ma sono ancora confuso su quali dei nuovi metodi utilizzare.

Qualcuno può confermare se esiste un modo per ottenere la stessa cosa di cui sopra ma utilizzando l’interfaccia del pannello di amministrazione (sia la scheda \u003chead\u003e che la scheda JS)?

38

I widget e i tag di script come questi sono deprecati. Puoi spostare il codice nella scheda JS e usare qualcosa come:

import Component from "@glimmer/component";
// …

api.renderInOutlet(
  "top-notices",
  class MyBanner extends Component {
    get someGetter() {
      // Some code here
    }

    <template>
      <!-- HTML here -->
      {{this.someGetter()}}
    </template>
  }
);

per inserire una classe di componente nell’outlet top-notices.

3 Mi Piace
40

Ho un altro componente tema deprecato che utilizza

api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;

insieme a return h("div.myimage", […per inserire dell'HTML (unhref`) dopo il primo post.

Se ho capito bene, anche api.decorateWidget è deprecato, ma non riesco a capire come farlo con Glimmer. Questo metodo sembra vicino per determinare se è il primo post…
https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6
…ma non riesco a capire quale sia ora il metodo consigliato per inserire l’HTML di cui ho bisogno.

41

Potresti inviare il codice completo o un link al repository (se presente)? Grazie!