Inclure des assets (ex. images, polices) dans les thèmes et composants

[Discourse]

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

Inclusion de 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 de thèmes Populaires
• Les thèmes et composants installés en utilisant la méthode À partir d’un dépôt git

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

Téléchargement de ressources vers des thèmes et composants locaux

Les thèmes locaux incluent :

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

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

Dans la modale Ajouter un téléchargement, choisissez un fichier et entrez un nom de variable SCSS à utiliser avec vos personnalisations CSS, javascript et/ou handlebars

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

Note Importante : N’ajoutez pas de téléchargements aux thèmes et composants via l’interface d’administration si le composant a été installé à distance à partir d’un dépôt git. Les mises à jour du composant effaceront tous les téléchargements qui n’étaient 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);
}

:information*source: _Lors de l’utilisation de polices ttf ou otf, assurez-vous d’utiliser un format de 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 au HTML standard (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 du plugin (plus d’informations à ce sujet dans Developing Discourse Themes & Theme Components).

Une solution de contournement consiste à charger votre ressource comme image d’arrière-plan 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ès aux téléchargements de thème en tant que paramètres

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

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

À l’intérieur du 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 contrôlé par 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 ?