Inclure les ressources (images, polices, etc.) dans les thèmes et les composants

[Discourse]

Les thèmes et les composants de thème vous permettent de gérer les ressources téléversées, telles que les images et les polices. Vous pouvez contrôler les ressources acceptées par votre thème à l’aide du paramètre du site : theme authorized extensions

Inclure des ressources dans les thèmes et les composants

Pour les thèmes distants

Les thèmes distants incluent :

• Les thèmes et composants installés à partir de la liste Populaires de thèmes
• Les thèmes et composants installés en utilisant la méthode Depos un dépôt git

Pour téléverser des ressources vers un thème distant ou un composant de thème, consultez Create and share a font theme component pour un exemple détaillé.

Téléversement de ressources vers les thèmes et composants locaux

Les thèmes locaux incluent :

• Les thèmes par défaut Clair et Sombre qui accompagnent chaque instance Discourse
• Les thèmes et composants créés en utilisant la méthode d’installation + Créer nouveau
• Les thèmes et composants téléversés depuis votre ordinateur local en utilisant la méthode d’installation Depuis votre appareil.

Pour téléverser des ressources vers un thème local ou un composant de thème, accédez à votre thème ou composant et sélectionnez + Ajouter dans la section Téléversements :

Dans la fenêtre modale d’ajout de téléversement, choisissez un fichier et entrez un nom de variable SCSS à utiliser avec vos personnalisations CSS, javascript et/ou handlebars

Une fois téléversée, la ressource apparaîtra dans la liste des Téléversements :

Note importante : N’ajoutez pas de téléversements aux thèmes et composants via l’interface d’administration si le composant a été installé à distance depuis un dépôt git. Les mises à jour du composant effaceront tout téléversement qui n’était pas inclus dans le dépôt git.

Comment utiliser les ressources

SCSS

@font-face {
  font-family: Amazing;
  src: url($Comic-Sans) format("woff2");
}

body {
  font-family: Amazing;
  font-size: 15px;
}

.d-header {
  background-image: url($texture);
}

:informationsource: _Lors de l’utilisation de polices ttf ou otf, assurez-vous d’utiliser le format opentype.

Javascript

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

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

export default apiInitializer((api) => {
  console.log(settings.theme_uploads.balloons);
});

HTML

Vous ne pouvez pas ajouter directement une ressource de thème à un HTML brut (comme dans les sections d’en-tête ou après l’en-tête du panneau d’administration de personnalisation). Vous devez utiliser un modèle handlebars ou l’API de plugin (plus d’informations à ce sujet sur Developing Discourse Themes & Theme Components).

Un contournement consiste à charger votre ressource en tant qu’image de fond en utilisant SCSS (comme dans l’exemple ci-dessus). Ainsi, dans la section d’en-tête de votre thème, vous pourriez ajouter :

<div class="my-custom-div">
  <a href="/"></a>
</div>

et ensuite dans votre CSS :

.my-custom-div a {
  height: 50px;
  width: 100px;
  background-image: url($asset-name);
}

Accéder aux téléversements de thème en tant que paramètres

Vous pouvez également traiter theme_uploads comme des paramètres dans JavaScript (commit associé).

Cela permet aux thèmes et aux composants d’accéder aux ressources du thème.

Dans le js du thème, vous pouvez maintenant obtenir l’URL d’une ressource avec :

settings.theme_uploads.name

Informations supplémentaires

• Create and share a font theme component

---

Ce document est sous contrôle de version - suggérez des modifications sur github.

[bitmage (Brandon Mason)]

J’ai créé un répertoire d’assets avec 5 fichiers svg pour les icônes de médias sociaux. Je les ai tous ajoutés à about.json comme indiqué par Create and Share a font theme component. Je les utilise dans mon CSS dans body_tag.html.

Attendu : Les icônes devraient se charger.

Réel : Les icônes ne s’affichent pas. La barre d’outils de développement montre que le navigateur a une certaine idée de leur existence en tant qu’images enregistrées… mais il n’y a pas de données dedans.

Qu’est-ce qui me manque ? Y a-t-il une étape de build ou quelque chose comme ça ?