Los temas y los componentes de tema le permiten gestionar los recursos subidos, como imágenes y fuentes. Puede controlar qué recursos acepta su tema utilizando la configuración del sitio: extensiones autorizadas del tema
Incluir recursos en temas y componentes
Para temas remotos
Los temas remotos incluyen:
- Temas y componentes instalados desde la lista de temas Popular
- Temas y componentes instalados usando el método Desde un repositorio git
Para subir recursos a un tema o componente remoto, consulte Create and share a font theme component para obtener un ejemplo detallado.
Subir recursos a temas y componentes locales
Los temas locales incluyen:
- Los temas predeterminados Claro y Oscuro que vienen con cada instancia de Discourse
- Temas y componentes creados usando el método de instalación + Crear Nuevo
- Temas y componentes que se subieron desde su computadora local usando el método de instalación Desde su dispositivo.
Para subir recursos a un tema o componente local, navegue a su tema o componente y seleccione + Añadir en la sección Recursos subidos:
En el modal Añadir subida, elija un archivo e introduzca un nombre de variable SCSS para usarlo con sus personalizaciones de CSS, javascript y/o handlebars
Una vez subido, el recurso aparecerá en la lista de Recursos subidos:
Nota importante: No añada recursos subidos 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 recurso subido que no estuviera incluido en el repositorio git.
Cómo utilizar los recursos
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: _Al usar fuentes
ttfuotf, asegúrese de usar el formatoopentype._
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 puede añadir directamente un recurso de tema al HTML simple (como en las secciones de encabezado o después del encabezado del panel de administración de personalizar). Tiene que usar una plantilla handlebars o la API de plugins (más sobre esto en Developing Discourse Themes & Theme Components).
Una solución alternativa es cargar su recurso como una imagen de fondo usando SCSS (como en el ejemplo anterior). Así que en la sección de encabezado de su tema podría añadir:
<div class="my-custom-div">
<a href="/"></a>
</div>
y luego en su CSS:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
Acceder a los recursos subidos del tema como configuraciones
También puede tratar theme_uploads como configuraciones en JavaScript (commit relacionado).
Esto permite a los temas y componentes acceder a los recursos del tema.
Dentro del js del tema ahora puede obtener la URL de un recurso con:
settings.theme_uploads.name
Información adicional
Este documento tiene control de versiones: sugiera cambios en github.
