Usando la función de página principal personalizada

[manuel (Manuel Kostka)]

Probando la nueva función de página de inicio personalizada: https://github.com/discourse/discourse/pull/26291
@pmusaraj Me pregunto cuál es el mejor enfoque para agregar componentes.

1. Así que agregar el modificador de página de inicio personalizada habilita la ruta discovery.custom y muestra una alerta de información predeterminada, renderizada en el outlet custom-homepage:

   

2. Agrego un componente al outlet y se renderiza en su lugar:

   
   

3. Sin embargo, cuando agrego más de un componente, obtengo un error:

   
   

4. Sin embargo, puedo agregar más componentes a otros outlets. Aquí hay una vista con los outlets de complementos visibles:

   
   

Así que me pregunto cómo debería funcionar el nuevo outlet:

• En cierto modo, no necesitaría el outlet. Puedo usar los otros disponibles y limitar los componentes a la ruta discovery.custom.
• ¿Aunque parece que necesito poner al menos un componente en el outlet, de lo contrario se renderiza la alerta predeterminada? Poner una plantilla vacía allí no funciona.
• Por otro lado, si pudiera agregar varios componentes al outlet, no necesitaría tener ninguna lógica de ruta. Los componentes solo se mostrarían en la página de inicio porque el outlet no estaría disponible en otras rutas.

[merefield (Robert)]

@manuel

Sin embargo, cuando agrego más de un componente, obtengo un error:

¿Eso no es sorprendente?

Coloca un único archivo de plantilla aquí y úsalo para referenciar tus Componentes en la carpeta Components (de la cual puedes tener muchos)

<MiPrimerComponente />
<MiSegundoComponente />
<MiTercerComponente />

O lo que quieras… solo quédate con una plantilla en esta carpeta.

[manuel (Manuel Kostka)]

@merefield

¿Eso no es sorprendente?

Pensé que era porque funciona con otros puntos de venta. Como en la captura de pantalla de arriba…

[merefield (Robert)]

Oh, lo siento, tienes razón, parece legal en Outlets (generalmente) publicar más de un archivo de plantilla en un solo Componente de Tema (sabía que manejaba conflictos entre Componentes de Tema y plugins, por lo que todos obtienen renderizado). Curioso.

Supongo que: ¿por qué querrías hacer eso? ¿Tendrás menos control sobre el diseño?

¿Una plantilla te obliga a componer todo el diseño de una vez con tantos subcomponentes como quieras?

Sin embargo, el comportamiento parece ser inconsistente…

[manuel (Manuel Kostka)]

Si creo una página de inicio personalizada, querría poder renderizar varios componentes existentes en ella. Y como se mencionó, esto ya funciona cuando se usan otros “outlets” disponibles y se limitan los componentes a la ruta de la página de inicio personalizada.

Si solo puedo agregar un componente a un “outlet” de página de inicio personalizado en particular, y también necesito agregar uno para deshabilitar el “yield” predeterminado, esto en realidad restringe mi control de diseño.

[merefield (Robert)]

Pero, ¿por qué no puedes referenciar todos esos componentes en una sola plantilla?

¿Ah, porque vienen de diferentes Componentes de Tema?

Creo que aquí estábamos hablando en términos diferentes.

Cuando digo pon todos tus Componentes (de Ember) en la carpeta de Componentes, me refiero exactamente a eso, pero en un solo Componente de Tema.

Creo que el quid de la cuestión es simplemente: “¿por qué este outlet se comporta de manera diferente?”. Entiendo que estás intentando combinar diferentes Componentes de Tema.

[manuel (Manuel Kostka)]

@merefield

¿Oh, porque vienen de diferentes Componentes Temáticos?

Sí, esa es la idea. Simplemente usé las plantillas de texto sin formato anteriores como ilustración. Por ejemplo, uso Listas Destacadas. Y puedo renderizarlo en el outlet con estas configuraciones:

Pero cuando quiero renderizar otro de la misma manera, obtengo el error de conector múltiple.

@merefield

Creo que el quid de esto es simplemente: “¿por qué este outlet se comporta de manera diferente?”

[pmusaraj (Penar Musaraj)]

Gracias por probar esto @manuel y por las preguntas.

@merefield

Creo que el quid de la cuestión es simplemente: “¿por qué este outlet se comporta de manera diferente?”

Yo tampoco sabía la respuesta, pero lo investigué y descubrí aproximadamente por qué. Recientemente introdujimos una distinción entre los outlets de plugins clásicos y los outlets de plugins envolventes, en este PR del año pasado: DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub

Los outlets de plugins envolventes son los que solo permiten un conector, los demás permiten múltiples. Para ilustrar, el código actual del outlet de plugin principal es este:

<PluginOutlet @name="custom-homepage">
  {{#if this.currentUser.admin}}
    <p class="alert alert-info">
      {{i18n "custom_homepage.admin_message"}}
    </p>
  {{/if}}
</PluginOutlet>

y solo permite un conector. Pero si cambio el código del outlet principal a:

<PluginOutlet @name="custom-homepage" />

Permitirá múltiples plantillas de conector sin problemas. Podríamos hacer este cambio en el núcleo para este outlet en particular, pero esta diferencia es más general. Sin embargo, se siente un poco opaco para los desarrolladores, veo tu punto.

Tenga en cuenta también que múltiples conectores tienen un problema de ordenación; hasta donde sé, no tenemos un mecanismo para decidir el orden.

Creo que el mejor enfoque aquí, en cualquier caso, es lo que sugirió @merefield: usar una plantilla y luego hacer referencia a los componentes de Ember desde ella.

@manuel

Aunque parece que necesito poner al menos un componente en el outlet, de lo contrario, ¿se renderiza la alerta predeterminada?

La alerta predeterminada solo se muestra a los administradores, para tu información.

[manuel (Manuel Kostka)]

¡Gracias por las explicaciones!

Jugando más con esto… ¡es realmente nuevo y es un placer usarlo!

Utilicé tres componentes existentes para esa disposición y eso es lo que esperaría que fuera un enfoque común al construir una página de inicio personalizada. Solo pude agregar uno de estos al outlet del contenedor, es por eso que creo que tener un outlet simple aquí sería más útil.

[manuel (Manuel Kostka)]

Otra observación: Puse un enlace en la barra lateral usando la URL /custom:

No se resalta cuando se está en la ruta personalizada.

Si entiendo correctamente la lógica de los resaltados de la barra lateral, también debería resaltarse cuando se está en la URL raíz /.

[pmusaraj (Penar Musaraj)]

Veo tu problema con más claridad después de echar un vistazo rápido al componente Featured Lists. Una opción es refactorizar ese componente y hacer que genere todas las listas en un único componente de Ember. Luego, podrías añadir ese componente a un outlet de un plugin envolvente.

Otra opción es añadir un segundo outlet de plugin a la plantilla de página de inicio personalizada, algo como <PluginOutlet @name="below-custom-homepage"/>.

Puede que me esté aferrando a este outlet custom-homepage con un mensaje para los administradores sin una buena razón, para ser honesto. Esa advertencia no es muy útil…

@manuel

No se resalta cuando se está en la ruta personalizada.

Sí, eso puede ser complicado. En mi prueba local ahora mismo, /custom no funciona correctamente. Es mejor usar /, que se enruta correctamente. Pero todavía no se resalta.

[manuel (Manuel Kostka)]

@pmusaraj

Sí, eso puede ser complicado. En mi prueba local ahora mismo, /custom no funciona correctamente. Es mejor usar /, que enruta correctamente. Pero todavía no resalta.

Ese parece ser un problema común. Si uso /, tampoco resalta otras rutas establecidas como página de destino.

@pmusaraj

Puede que me esté aferrando a este outlet custom-homepage con un mensaje para los administradores sin una buena razón, para ser honesto. Esa advertencia no es muy útil…

Sí, también podría imaginar que la advertencia se muestre de manera diferente. La principal ventaja de los outlets envolventes parece ser que puedo ceder condicionalmente código central o renderizar código personalizado. Pero eso probablemente nunca sería un caso para ese mensaje informativo.

@pmusaraj

Veo tu problema con más claridad después de echar un vistazo rápido al componente Featured Lists . Una opción es refactorizar ese componente y hacer que genere todas las listas en un solo componente de Ember. Luego podrías agregar ese componente a un outlet envolvente de plugin.

Debe haber un malentendido. El componente ya envuelve todas las listas en un componente envolvente y lo renderiza en cualquier outlet dado:

Así que puedo agregar el componente sin problemas al outlet envolvente actual en la página de inicio personalizada.
Lo que no puedo hacer es usar ese outlet para renderizar más de un componente independiente en la página de inicio personalizada. Componentes que habría instalado como componentes de tema, como estos tres:

Mi suposición es que hacer tal uso de varios componentes de tema independientes para construir una página de inicio personalizada sería el enfoque común. En lugar de construirlo todo desde cero en un solo tema.

@pmusaraj

Otra opción es agregar un segundo outlet de plugin a la plantilla de la página de inicio personalizada, algo como <PluginOutlet @name="below-custom-homepage" />.

Si consideras agregar otro outlet o cambiar la configuración del outlet, podría dar más comentarios de mi uso hasta ahora. Aunque envolveré esa madriguera en detalles

Así que me di cuenta de que el outlet se renderiza dentro del elemento main-outlet. La estructura general de estos elementos es entonces:

• Envoltorio del main-outlet
  • sidebar-wrapper
  • main-outlet
    • outlet custom-homepage

Como diseñador, en realidad no soy tan flexible organizando elementos en una página de inicio personalizada usando este outlet. Para el diseño compartido anteriormente, preferí usar el outlet before-main-outlet, no solo porque puedo poner más de un componente, sino también porque no anida componentes dentro del elemento main-outlet.
La estructura como se comparte en la captura de pantalla anterior se ve así:

• Envoltorio del main-outlet
  • sidebar-wrapper
  • componente: banner de búsqueda
  • componente: temas destacados
  • componente: listas destacadas
  • main-outlet

La ventaja es que puedo organizar elementos a lo ancho de todo el main-outlet wrapper y no solo dentro del elemento main-outlet. Para ilustrar el punto, si renderizara uno de los componentes en el outlet actual custom-homepage, se renderizaría anidado dentro del elemento main-outlet de esta manera:

En mi opinión, la mayor flexibilidad para diseños personalizados la ofrecería un outlet de plugin que se coloque

• como hijo directo del main-outlet wrapper (similar al outlet before-main-outlet)
• dentro de un div envolvente

Ese div envolvente agruparía todos los componentes agregados a él y permitiría una fácil ordenación. Tal estructura se vería así:

• Envoltorio del main-outlet
  • sidebar-wrapper
  • custom-homepage-wrapper
    • componente: banner de búsqueda
    • componente: temas destacados
    • componente: listas destacadas
  • main-outlet

Así que esa es mi opinión como diseñador. Supongo que depende de ti decidir cuánto se alinea eso con lo que considerarías una aplicación común para la función de página de inicio personalizada.

[merefield (Robert)]

Presumiblemente esta página es “superficial” en el sentido de que aparecerá para el usuario pero no para “Googlebot” y, por lo tanto, ¿no será indexada?

[pmusaraj (Penar Musaraj)]

Correcto, sí, para la vista del rastreador he optado por mostrar solo el menú superior. Realmente no puedo saber desde la aplicación Rails qué generará un tema en esta ruta.

@manuel

Si consideras agregar otra salida o cambiar la configuración de la salida, podría darte más comentarios de lo que he usado hasta ahora.

Estoy pensando en las sugerencias aquí @manuel, me tomaré un tiempo en breve para probar algunos cambios. Por favor, ten paciencia conmigo.

[merefield (Robert)]

He agregado soporte para esta función en Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield

[manuel (Manuel Kostka)]

Un problema que encontré: Quería mostrar el componente Homepage Feature en la página de inicio personalizada. Pero los temas no se filtran en esta ruta. El componente simplemente muestra cualquier tema reciente que tenga una imagen.

El código del componente es:

    const topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: {
        tags: [`${settings.featured_tag}`],
        order: sortOrder,
      }

Y parece que los parámetros no se aplican en la página de inicio personalizada. Funciona bien de lo contrario. ¿No estoy seguro de por qué sucede esto?

Editar: Uso el mismo método en el componente Featured Lists. Al usar este componente en la página de inicio personalizada, el filtro tampoco se aplica. Pero solo en la primera lista… cuando hay más, las siguientes listas se filtran correctamente.

[pmusaraj (Penar Musaraj)]

Interesante, no estoy seguro de por qué es eso, ¿quizás hay alguna lógica en la tienda topicList que esté ligada a las rutas de descubrimiento? La página de inicio personalizada no es una ruta de descubrimiento.

Tengo curiosidad, ¿funciona bien ese mismo componente con los parámetros en, digamos, una ruta de administrador? ¿O una ruta de perfil de usuario? ¿Hay alguna posibilidad de que puedas comprobarlo?

@tynaut se encontró con un problema similar, así que es probable que haya algo que abordar aquí.

[manuel (Manuel Kostka)]

Probé con el componente Featured Lists, ya tiene una configuración para mostrar el componente en todas partes. Esto no incluye las rutas de administración, pero lo probé en todas las demás (páginas estáticas, perfiles de usuario,…) y parece funcionar en todas partes excepto en la página de inicio personalizada.

Lo otro extraño es que, como se mencionó, solo no filtra la primera lista. Por ejemplo, aquí filtro dos listas, una para la etiqueta “featured” y otra para la categoría “General”, y así es como se muestran las listas en todas las demás rutas:

Solo en la ruta de la página de inicio personalizada, se muestran así:

Por lo tanto, la primera lista ya no filtra por la etiqueta, pero la segunda lista sí filtra por la categoría. Y cuando cambio el orden de las listas, la primera lista no filtra por categoría, pero la segunda sí filtra por la etiqueta:

[pmusaraj (Penar Musaraj)]

Encontré un poco complicado reproducir esto correctamente con el componente Featured Homepage, ya que mezcla demasiadas otras condiciones.

Sin embargo, puedo reproducirlo fácilmente con un componente simplificado. Lo he subido a un repositorio de ejemplo aquí: GitHub - pmusaraj/discourse-sample-custom-homepage

El componente sample-list allí debería incluir solo temas con la etiqueta featured, pero no lo hace (a mí me incluye los 3 primeros temas). Si elimino el modificador custom_homepage del archivo about.json de ese tema, entonces se incluyen los temas correctos.

Encontraré a alguien más familiarizado con el servicio de store para que lo revise. ¡Gracias!

[pinder99 (Pushpender Singh)]

Hola

¿Puedes explicarme cómo añadir un componente (un banner de búsqueda o un componente personalizado ya instalado en el foro) dentro del archivo home.hbs para que se muestre en la nueva página de inicio personalizada?

Gracias