Incluir recursos (p. ej., imágenes, fuentes) en temas y componentes

[Discourse]

Los temas y los componentes de tema te permiten gestionar activos cargados, como imágenes y fuentes. Puedes controlar qué activos acepta tu tema mediante la configuración del sitio: theme authorized extensions (extensiones autorizadas para el tema)

Incluir activos en temas y componentes

Para temas remotos

Los temas remotos incluyen:

• Temas y componentes instalados desde la lista Popular de temas
• Temas y componentes instalados utilizando el método From a git repository (Desde un repositorio git)

Para cargar activos en un tema remoto o un componente de tema remoto, consulta Create and share a font theme component para un ejemplo detallado.

Carga de activos en temas y componentes locales

Los temas locales incluyen:

• Los temas predeterminados Light (Claro) y Dark (Oscuro) que se incluyen con cada instancia de Discourse
• Temas y componentes creados utilizando el método de instalación + Create New (Crear nuevo)
• Temas y componentes que se cargaron desde tu computadora local utilizando el método de instalación From your device (Desde tu dispositivo)

Para cargar activos en un tema local o un componente de tema local, ve a tu tema o componente y selecciona + Add (Agregar) en la sección Uploads (Cargas):

En el modal Agregar carga, elige un archivo e ingresa un nombre de variable SCSS para usarlo con tus personalizaciones de CSS, javascript y/o handlebars

Una vez cargado, el activo aparecerá en la lista de Uploads (Cargas):

Nota importante: No agregues cargas a temas y componentes a través de la interfaz de administración si el componente se instaló de forma remota desde un repositorio git. Las actualizaciones del componente eliminarán cualquier carga que no esté incluida en el repositorio git.

Cómo hacer uso de los activos

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: _Al usar fuentes ttf u otf, asegúrate de usar un formato 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

No puedes agregar directamente un activo del tema a HTML plano (como en las secciones de encabezado o después del encabezado del panel de personalización de administración). Debes usar una plantilla de handlebars o la API de plugin (más información sobre estos en Developing Discourse Themes & Theme Components).

Un método alternativo es cargar tu activo como imagen de fondo usando SCSS (como en el ejemplo anterior). Por lo tanto, en la sección de encabezado de tu tema podrías agregar:

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

y luego en tu CSS:

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

Accediendo a las cargas del tema como configuraciones

También puedes tratar theme_uploads como configuraciones en JavaScript (commit relacionado).

Esto permite que los temas y componentes accedan a los activos del tema.

Dentro del js del tema ahora puedes obtener la URL de un activo con:

settings.theme_uploads.name

Información adicional

• Create and share a font theme component

---

Este documento está bajo control de versiones - sugiere cambios en github.