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

**URL:** <https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459>\
**Category:** Developer Guides\
**Tags:** how-to, theme-guides\
**Created:** [Mai 10, 2017, 8:01 UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459 "2017-05-10T20:01:29Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)\
**Post date:** [Mai 10, 2017, 8:01 UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459/1 "2017-05-10T20:01:29Z")

</div>

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](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462) 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 :

 ![uploads](https://global.discourse-cdn.com/meta/original/4X/2/3/7/23725504c4d86da3cb151c5627e5f1a07c248590.png)

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

 ![upload-modal](https://global.discourse-cdn.com/meta/original/4X/f/f/f/fffcc4cf19b7c6064f6ae99471a94e183549b03a.png)

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

 ![uploaded-font](https://global.discourse-cdn.com/meta/original/4X/2/8/3/283e73e3e3993be8d952e681599948417b346eca.png)

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

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

```gjs
// {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](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)).

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 :

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

```

et ensuite dans votre CSS :

```scss
.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é](https://github.com/discourse/discourse/commit/719a93c312b9caa6c71de22d67f1ce1a78c1c8b2)).

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 :

```plaintext
settings.theme_uploads.name

```

## Informations supplémentaires

- [Create and share a font theme component](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462)

* * *

Ce document est contrôlé par version - suggérez des modifications [sur github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/18-include-assets.md).

---

_[View the full topic](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459)._