En la primera publicación hay un enlace a Github con comentarios que explican la función. Creo que todavía es una función experimental y para probarla necesitas usar e Instalar la aplicación de consola Discourse Theme CLI para ayudarte a crear temas.
1 me gusta
gracias por responder manuel, ya estoy usando la cli, los documentos de git muestran cómo agregar el html personalizado, no el componente real, quiero agregar el banner de búsqueda que ya está instalado en el foro, ¿puedo llamarlo en home.hbs o tengo que crear un nuevo banner de búsqueda html para usar
¿Qué tal si lo mostramos en la página de inicio entonces?
1 me gusta
Sí, este es el problema, necesito agregarlo en la página de inicio, agregué uno personalizado, ahora tengo 2, déjame quitar uno del tema, gracias de nuevo, muy apreciado.
1 me gusta
Como se mencionó, cuando hay múltiples iteraciones, funciona en las subsiguientes y solo la primera vez no se aplica el filtro. Así que funcionaría si agrego una ejecución inicial en seco al store:
No sé cómo depurar esto correctamente, pero tal vez ayude a acotar el problema.
3 Me gusta
Parece una caché que necesita calentarse.
2 Me gusta
Sí, tiene que ver con cómo precargamos los datos. Tengo una PR lista con una posible solución: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
La fusionaré a principios de la próxima semana.
5 Me gusta
La PR anterior ya se ha fusionado @manuel, debería solucionar el problema para ti. ¡Gracias de nuevo por el informe!
2 Me gusta
Hoy noté que agregar un componente a una ruta a través del nuevo método recomendado no funciona cuando se usa este modificador de tema.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
La única forma en que funciona es javascripts/connectors/custom-homepage/welcome-banner.hbs
4 Me gusta
Parece que me funciona. ¿Ya renderizas otro componente? Creo que el problema era que solo funciona con uno. O es porque solo lo estoy usando en estable en este momento.
3 Me gusta
Tendré que probar un poco más, no estoy seguro de por qué esto no me funciona en este momento.
2 Me gusta
Lo he estado usando bastante, junto con mi Bloques de página de inicio componente. Dos sugerencias:
Clases predeterminadas
Ajusté el componente para que siempre agregue una clase homepage al cuerpo y una clase active a un enlace de la barra lateral con href=\"/custom\". ¿Podrían estas características ser valores predeterminados para el modificador?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(Inicialmente quería agregar el enlace de la barra lateral por defecto, pero no poder editar dicho enlace en la interfaz me parece un inconveniente real, ver How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Primera pintura rápida
No sabría cómo abordar esto técnicamente. Pero me pregunto, si aterrizamos en una página de inicio personalizada, que típicamente muestra una selección de contenido limitada, ¿podríamos mejorar el FCP para la página de inicio y renderizarla ya mientras el resto de la aplicación se está cargando? Quizás estoy malinterpretando la naturaleza de la arquitectura de aplicación única aquí… simplemente se siente un poco decepcionante ser presentado primero con la animación de carga, y luego aterrizar en una página bastante simple, que por sí sola podría estar allí al instante.
4 Me gusta
Quizás… no estoy seguro. Es relativamente fácil agregar esta clase ahora a cualquier plantilla de componente, solo necesitas usar el ayudante bodyClass. Por ejemplo, en un tema separado hacemos esto:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Logra lo mismo que el hook onPageChange, pero es más confiable. Solo establecerá esa clase en el cuerpo mientras el componente se esté renderizando.
Si el componente ya tiene todos los datos que necesita, entonces sí, no hay razón por la que no pueda renderizarse con el resto de la aplicación. Sin embargo, en la mayoría de los casos, el componente necesitará hacer una solicitud para obtener datos adicionales, lo que activa el indicador de carga. No se me ocurre ninguna forma fácil de hacer que esa carga sea más rápida, para ser honesto.
Ya que estamos, hicimos una mejora adicional a esta característica. Hasta hace muy poco, la vista del rastreador de la página de inicio personalizada no era personalizable. Ahora lo es, a través de un outlet HTML del lado del servidor: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 Me gusta
Solía modificar mi tema usando la interfaz de administración, pero como ahora estoy recibiendo una advertencia de depreciación, estoy buscando la opción custom-homepage en su lugar.
He migrado mi <head> y css siguiendo este ejemplo. Mi intento está aquí. Hasta ahora todo bien.
El problema ahora es cómo insertar la barra de búsqueda y el componente ‘Who’s Online’.
En mi head anterior, simplemente agregué {{whos-online}} y {{search-menu}} donde los quería en el código, pero esto no funciona aquí; no encuentro cómo inyectarlos correctamente.
¿Podría alguien indicarme la dirección correcta o conocer la sintaxis correcta?
El resultado final debería verse como esto (actualmente revertido a mi código anterior, pronto a ser obsoleto).
Eché un vistazo rápido localmente y me encontré con un problema con el componente WhosOnline. Pero después de reiniciar el servidor, funcionó bien. El código que usé en el componente de la página de inicio fue:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Sin embargo, ten en cuenta que SearchMenu siempre está presente, ya que está en el núcleo, mientras que <WhosOnline /> proviene de un plugin y solo se registra si el plugin está habilitado.
3 Me gusta
¡Eso resolvió el menú Quién está en línea y el menú de búsqueda! Genial. Ahora solo necesito averiguar la sintaxis para obtener la fuente que estoy viendo actualmente aquí.
Actualmente se muestra ocultando todo lo demás en la página excepto la fuente, insertando el héroe, quién está en línea, el menú de búsqueda y los enlaces, y luego posicionando la fuente en relación con estos anulando el CSS. No es ideal.
Estoy cerca de poder hacer un diseño de página de inicio personalizado donde pueda colocar todas las piezas en sus lugares correctos, pero me falta cómo obtener la fuente. He intentado inspeccionar la página actual con Ember y he revisado los componentes de la aplicación de Discourse para ver cómo importarlo, pero sin éxito.
¿Alguna pista?
Usaría un componente como Featured Lists para mostrar una lista de temas con un número limitado de temas en la página de inicio. Creo que si insertas la lista principal, obtienes una lista infinita que se carga de forma diferida. ¿Quizás eso es lo que quieres? Aunque, ¿por qué molestarse en añadir una página de inicio separada en lugar de simplemente construir tu página de destino directamente en esa vista de lista de temas?
También podrías echar un vistazo a mi componente Homepage Blocks para organizar el diseño de tu página de inicio. Puedes añadir componentes y organizar su orden a través de un editor. El componente también añade una clase de cuerpo homepage y un elemento contenedor adicional homepage-blocks que puedes usar para un mejor estilo responsivo. Por ejemplo, podrías definir una cuadrícula en el contenedor y ajustar tu diseño dependiendo del ancho, de modo que tengas un diseño con una barra lateral y contenido principal en pantallas anchas y un diseño de una sola fila con todo tu contenido apilado en vistas más estrechas. Ahora mismo, los elementos de tu barra lateral simplemente se reducen, lo que podría no verse ideal en algunos anchos.
Este sería un ejemplo simple de una cuadrícula de página de inicio que cambia de diseño dependiendo del ancho: https://forum.zolidar.com.
1 me gusta