Hola, he estado personalizando la apariencia de mi Discourse en el campo personalizado del tema.
Uso script type="text/x-handlebars" data-template-name="components/categories-only"
y similares para sobrescribir algunas plantillas específicas; ¿hay alguna manera de sobrescribirlas solo en páginas específicas como la página de inicio y usar código diferente en la vista de subcategorías, por ejemplo? Todavía soy bastante nuevo en Discourse; ni siquiera estoy seguro de si esta es la forma correcta de hacerlo en el HTML/CSS personalizado de los temas (sé que lo pierdo al actualizar). Si alguien pudiera ayudarme, se lo agradecería mucho.
Para aclarar esto primero
Esto no es correcto; no pierdes tus cambios al actualizar si se realizaron en un tema. Estos persisten. La única forma de perder tus cambios es si editas directamente los archivos en tu servidor, lo cual, obviamente, no deberías hacer.
Ahora bien, hay cierto riesgo al sobrescribir plantillas, ya que una actualización del núcleo podría hacer que tus cambios ya no sean compatibles y necesiten actualizarse. Si estás dispuesto a asumir ese riesgo, técnicamente puedes lograr lo que estás preguntando aquí.
Para empezar, necesitas una forma de distinguir cuándo el usuario está en la página de inicio. En el caso del componente solo-categorías, una forma es verificar el searchContext. Cuando estás en una página de subcategoría, el contexto de búsqueda se establece en “category”. Si no hay contexto de búsqueda, significa que estás en la página de inicio.
La forma de pasar esto a tu plantilla es agregando algo como esto:
<script type="text/discourse-plugin"
version="0.8">
const categoriesOnlyComponent = require('discourse/components/categories-only').default;
categoriesOnlyComponent.reopen({
isHomepage: function() {
return !this.parentView.searchService.contextType
}.property()
});
</script>
Lo que esto hace es permitirte usar isHomepage en la plantilla de categories-only. Devuelve true si no hay contexto de búsqueda, lo que significa que estás en la página de inicio. De lo contrario, devuelve false.
A continuación, necesitas copiar la plantilla predeterminada de la siguiente manera:
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
... resto de la plantilla
{{/if}}
</script>
y usar isHomepage que agregamos. Para esto, necesitas usar el auxiliar {{#if}} de Handlebars. Básicamente, necesitas algo como esto:
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
... plantilla solo para la página de inicio
{{else}}
... resto de la plantilla predeterminada si no estás en la página de inicio
{{/if}}
</script>
Ahora puedes usar lo que quieras en la sección isHomepage. Puedes editarla directamente allí o crear una nueva plantilla para esa sección de la siguiente manera:
<script type='text/x-handlebars'
data-template-name='components/categories-only-homepage'>
<h1>¡Estás en la página de inicio!</h1>
<p>
Usa esta sección para renderizar la plantilla del componente solo-categorías si el usuario está en la página de inicio.
</p>
</script>
Lo último que necesitas hacer es llamar a esa plantilla como un parcial en la plantilla de categories-only dentro de la sección isHomepage, de la siguiente manera:
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
{{partial 'components/categories-only-homepage'}}
{{else}}
... resto de la plantilla predeterminada si no estás en la página de inicio
{{/if}}
</script>
El resultado es que cuando visites la página de inicio verás esto:
pero el componente en las subcategorías debería permanecer sin cambios.
Esto es opcional, pero también podrías estar interesado en revisar:
ya que esa es la nueva forma recomendada de trabajar con temas y evitar el uso de etiquetas script.
¡Increíble, muchas gracias! Ahora también entiendo un poco cómo usar text/discourse-plugin. ¡Lo aprecio mucho!
¡Hola! Me gustaría hacer una pregunta más.
¿Podrías decirme cómo puedo obtener el tema más reciente en subcategorías específicas? Puedo usar category.latestTopic para obtener el tema más reciente de una categoría, pero no puedo usarlo para subcategorías. ¿Hay alguna solución inteligente? Me gustaría mostrar el tema más reciente de una subcategoría al listar las subcategorías.