Struttura dei temi e dei componenti del tema

[Discourse]

Discourse supporta i temi nativi che possono essere caricati da un archivio .tar.gz o da un repository git remoto, inclusi i repository privati.

Un esempio di tema si trova qui: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

Il repository git verrà controllato per gli aggiornamenti (una volta al giorno) oppure utilizzando il pulsante Verifica aggiornamenti. Quando vengono rilevate modifiche, il pulsante Verifica aggiornamenti cambierà in Aggiorna all’ultima versione.

Per creare un tema, è necessario seguire una specifica struttura di file. Questi sono i file che puoi includere:

about.json (obbligatorio)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

locales/en.yml
locales/{locale}.yml

stylesheets/{qualsiasi}/{qualsiasi}/{qualsiasi}.scss

javascripts/{qualsiasi}.js
javascripts/{qualsiasi}.gjs
javascripts/{qualsiasi}.hbs

assets/{nome_file_asset}

settings.yml

Tutti questi file sono facoltativi, quindi hai bisogno di creare solo quelli che ti servono.

Per chi desidera suddividere il SCSS del tema in più file, ora è possibile.

Dividere il tema SCSS in più file

I temi e i componenti dei temi stanno diventando sempre più potenti e gli sviluppatori diventano sempre più ambiziosi. Per facilitare il lavoro degli sviluppatori, i temi possono ora suddividere il loro SCSS in più file. Quando si crea un nuovo tema con la theme CLI, o si condivide un tema su github, è sufficiente creare una nuova cartella chiamata scss. Riempila con i tuoi file .scss, seguendo qualsiasi struttura di cartelle, e tutti i file saranno disponibili per l’importazione nelle sezion…

Per chi desidera suddividere il tema in più file JS, basta aggiungere i file JS desiderati nella directory javascripts.

La struttura del file about.json è riportata di seguito e puoi trovare maggiori informazioni su di essa qui: https://meta.discourse.org/t/adding-metadata-to-a-theme/119205:

{
  "name": "My Theme",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "variable-name": "assets/my-asset.jpg"
  },
  "color_schemes": {
    "My Color Scheme": {
      "primary": "222222"
    }
  },
  "screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}

Le istruzioni su come aggiungere impostazioni al tuo tema sono disponibili qui: Add settings to your Discourse theme.

Per indicare a Discourse che stai per aggiungere un componente del tema e non un tema completo, basta aggiungere la riga "component": true al file about.json

La struttura dei file corrisponde al CSS / HTML personalizzato del tema.

Ulteriori letture

Dai un’occhiata agli altri articoli con il tag #themes::tag.

Vedi anche:

• Developing Discourse Themes & Theme Components
• Install the Discourse Theme CLI console app to help you build themes
• Include assets (e.g. images, fonts) in themes and components

---

Ultima revisione di @SaraDev il 2022-08-15T21:00:00Z

---

Questo documento è sottoposto a controllo delle versioni - suggerisci modifiche su github.