Guía de referencia rápida para desarrolladores de temas

Documentación Guías para desarrolladores
,
1

A medida que los temas se vuelven más potentes, hay más cosas que recordar sobre cómo funcionan. Tenemos mucha documentación detallada en #howto / #themes, pero si solo necesita algo para refrescar su memoria, esta guía puede ayudarle.

Recursos Generales

:scroll: Guía para principiantes
:scroll: Guía para diseñadores
:scroll: Guía para desarrolladores
:paintbrush: Creador de Temas
:desktop_computer: Tema CLI
:notebook_with_decorative_cover: Directorio de Temas
:jigsaw: Directorio de Componentes
:wrench: Modificadores de Tema
:wrench: Configuración del sitio tematizable

Estructura de Archivos/Carpetas leer más

about.json
settings.yml
common/, desktop/, mobile/
  {common|desktop|mobile}.scss
  head_tag.html
  header.html
  after_header.html
  body_tag.html
  footer.html
  embedded.scss (solo common)
locales/
  en.yml
  ...
assets/
  (archivos nombrados arbitrariamente, referenciados en about.json)
stylesheets/
  (archivos nombrados arbitrariamente, se pueden importar entre sí, y common/desktop/mobile.scss)
javascripts/
  (archivos nombrados arbitrariamente. Soporta .js .hbs y .raw.hbs)

about.json información de estructura, metadatos disponibles

{
  "name": "Mi Tema",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "variable-name": "assets/my-asset.jpg"
  },
  "color_schemes": {
    "Mi Esquema de Color": {
      "primary": "222222"
    }
  }
}

SCSS

:link: Variables CSS Disponibles

Javascript leer más

// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Tu código
});

:link: JS Plugin API

:link: Javascript de Múltiples Archivos

Configuración leer más

settings.yml:

fruit:
  default: apples|oranges
  type: list
  description: # Método antiguo. Es mejor definirlos en los archivos de localización (ver abajo)
    en: English Description
    fr: Description Française

Acceso desde JavaScript:

console.log(settings.fruit);

Acceso desde plantillas gjs:

<template>{{settings.fruit}}</template>

Acceso desde scss:

html {
  font-size: #{$global-font-size}px;
  background: $site-background;
}

Configuración del sitio tematizable leer más

about.json:

"theme_site_settings": {
  "enable_welcome_banner": false
}

Acceso desde JavaScript:

@service siteSettings;

this.siteSettings.enable_welcome_banner;

Acceso desde plantillas gjs:

<template>{{this.siteSettings.enable_welcome_banner}}</template>

Traducciones leer más

locales/en.yml

en:
  my_translation_key: "I love themes"
  theme_metadata: # Estos se usan en el panel de administración. No se ponen a disposición de tus archivos js/hbs
    description: Este tema te permite hacer cosas increíbles en tu Discourse
    settings:
      fruit: Una descripción de la configuración de whitelisted_fruits

Acceso desde JavaScript:

import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));

Acceso desde plantillas gjs:

import { i18n } from "discourse-i18n";

<template>
  {{i18n (themePrefix "my_translation_key")}}
  <DButton @label={{theme-prefix "my_translation_key"}} />
</template>

Este documento está controlado por versiones: sugiere cambios en github.

40 Me gusta
How to add Javascript to Footer Of Posts?
Custom header colour and category icons and login button
How to add a custom url text link on the login page
Discourse 2.3.0.beta10 Release Notes
How can one add a toggle button to the post menu and implement an action for that toggle button in a Discourse plugin?
Need help integrating code wrote on Edittext to the Discourse
Search section like on Reddit?
How to resize 'Modern Category + Group Boxes' thumbnail via CSS
How can I create a Discourse that's just like Stemaway.com?
How can I edit My Login Page
List of components or PluginOutlets with explanatory documentation
Develop a theme
Customize Topic Details Page
Show sidebar to anonymous user + Welcome area in central theme
I want to learn how to program for Discourse
How to pass a component setting as a value to an attribute?
Deleting permissions | Create new Topic
Hosting dynamic pages with discourse
Challenges creating a custom color palette
User JS Object `groups` array not populated for several users
The best way to make small ui modifications
Error: Failed to bootstrap
Extend Existing Controller?
Proper Development and Deployment
Why am I finding Discourse so difficult to customize?
Fetch third party data for topic list
Question about modifying a theme we're using
Need help with theme component Github
Is there a way to remove the pop-ups when making a new topic?
How do I go about making a very customized theme?
2

This is super useful.

Could I also suggest that a useful reference to add is the list of available color transformations:

3 Me gusta
4

I must be missing something here, I’m trying to use I18n.t(themePrefix("my_translation_key")) but the Firefox console reports that themePrefix is undefined.
How can I invoke that function from an api function?

6

El enlace ya no parece ser válido.

2 Me gusta
7

Tienes razón. Debería ser ahora:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js

2 Me gusta
8

Gracias @th21 y @Arkshine. He actualizado el enlace.

2 Me gusta
9

El enlace de la API de complementos ha vuelto a cambiar:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs

2 Me gusta
10

¡Gracias! Actualizado :writing_hand:

3 Me gusta