Estilo de publicación de blog

[Discourse]

	Resumen	Estilo de entradas de blog te permite designar una categoría de blog, lo que modifica la apariencia de los temas dentro de esa categoría para que se parezcan más a las entradas de blog tradicionales.
	Vista previa	Vista previa en theme-creator.discourse.org
	Repositorio	github.com/discourse/discourse-blog-post-styling
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

El componente de tema Estilo de entradas de blog transforma los temas de Discourse en un diseño tradicional de entrada de blog. Cuando se aplica a una categoría, la primera imagen de cada tema se promociona a un encabezado de ancho completo sobre el título, y el contenido se estiliza con tipografía y visualización de metadatos apropiados para blogs.

Configuración

Estas son las diversas configuraciones asociadas con este componente de tema:

• Categoría de blog: Los temas que pertenezcan a cualquiera de las categorías seleccionadas tendrán aplicado el estilo de entradas de blog.

• Etiqueta de blog: Elige una o más etiquetas que, al aplicarse a un tema, le darán el estilo de entrada de blog.

• Tamaño de imagen: Decide cómo llena la imagen destacada el área del encabezado:

  • Sin imagen: Ocultar la imagen destacada.
  • Ancho completo (predeterminado): La imagen abarca todo el área de contenido.
  • Centrada: La imagen mantiene su relación de aspecto y se centra en el área de contenido.

• Posición de la imagen: Decide dónde mostrar la imagen en relación con el título:

  • Sobre el título (predeterminado): Mostrar la imagen encima del título del tema.
  • Debajo del título: Mostrar la imagen debajo del título del tema. Al seleccionarla, también puedes incluir un resumen que se mostrará entre el título y la imagen. A continuación, puedes ver cómo se ve la imagen cuando la configuración de posición de la imagen está configurada en sobre el título y debajo del título:

• Dropcap habilitado: Cuando está habilitado, la primera letra de la entrada de blog tendrá un estilo agrandado, como se muestra:
  
  
• Habilitado para móviles: Cuando está habilitado, el estilo de entradas de blog se aplica al leer el tema en dispositivos móviles.

Escribir una entrada de blog

Una vez que hayas configurado tu categoría de blog (o aplicado tu etiqueta de entradas de blog), hay algunas cosas especiales a tener en cuenta sobre cómo funcionará el tema de la entrada de blog.

Imagen destacada

Coloca la imagen que deseas como imagen destacada en la primera línea del mensaje, seguida de una línea en blanco antes de que comience tu contenido:

![descripción de la imagen|1100x440](upload://tu-hash-de-imagen.jpg)

El contenido de tu mensaje comienza aquí...

El componente posiciona automáticamente esta imagen según la configuración de posición de la imagen (ver arriba). Si cualquier otro contenido —incluidas líneas en blanco— aparece antes de la imagen, no se promocionará a la posición de encabezado.

Después de publicar por primera vez un mensaje, actualiza la página para ver la imagen aparecer en la posición designada. (Esto solo afecta al autor del mensaje en la publicación inicial; los miembros que accedan al mensaje verán la imagen en el lugar correcto de inmediato.)

Consejos para el tamaño de la imagen

El contenedor de la imagen tiene 440px de alto y 100% de ancho. Para obtener los mejores resultados cuando la configuración de tamaño de imagen está establecida en ancho completo:

• Usa o recorta imágenes a 1100x400px antes de subirlas para evitar recortes, o
• Elige imágenes con un tema centralizado o contenido no específico (paisajes, patrones) para que los recortes no eliminen detalles importantes.

Resúmenes

Cuando la configuración de posición de la imagen está establecida en debajo del título, puedes agregar un resumen opcional a tu entrada de blog, que aparecerá entre el título y la imagen destacada.

Para hacerlo, envuelve el contenido que deseas que aparezca en tu resumen de la siguiente manera:

[summary] Aquí está el contenido que será tu resumen. [/summary]

Citas con estilo

Al crear temas en una categoría de blog, las citas obtienen un estilo especial. Puedes crear citas en el compositor con el símbolo > o usando el botón de la barra de herramientas del compositor “.

Configuración de categoría recomendada

En la configuración de tu categoría de blog, considera habilitar la configuración de categoría Navegar al primer mensaje después de leer los temas. Esto envía a los lectores recurrentes directamente al contenido de la entrada de blog en lugar de a su última posición leída.

Estilo de entradas de blog + Miniaturas en la lista de temas

Este componente es compatible con Miniaturas en la lista de temas, que resalta la imagen destacada de tu entrada de blog en la lista de temas:

Nota: El componente Miniaturas en la lista de temas no es compatible con el tema Horizon. La captura de pantalla anterior utiliza el tema Foundation.

[amotl (Andreas Motl)]

@amotl

After bumping the defined sizes manually just slightly in the markup, the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.

---

JeeLink

[ohellno]

Hola, y muchas gracias por dedicar el tiempo a crear esto y lanzarlo de forma gratuita.

Me preguntaba si sería posible modificarlo de alguna manera para que utilice una etiqueta específica en lugar de una categoría concreta.

Acabo de configurar un nuevo sitio de Discourse, pero he estado escribiendo muchas “publicaciones de blog” y me gustaría que aparecieran en las otras categorías apropiadas para que parezca un poco más integrado.

Actualmente, las he estado publicando en su propia categoría de blog-posts, a la que he limitado el acceso solo a mí para publicar allí, pero acabo de configurar un grupo de etiquetas y he hecho que solo sea accesible para el personal.

¡Gracias de nuevo!

[Howaids (Martin)]

Muchas gracias, @tshenry. Todos los componentes de tu tema han sido perfectos. Y a @sam y a @codinghorror por compartir una aplicación increíble. Tu generosidad, incluido el apoyo en Meta, es muy conmovedora. Discourse está, en efecto, diseñado para la internet más solidaria del futuro.

[LoganRTW (Ward)]

¿Hay alguna manera de hacer que esto funcione con un video como contenido destacado en lugar de una imagen? Borraría mi sitio de WordPress si pudiera simplemente publicar un video de YouTube, Vimeo, etc., y que ese fuera el contenido principal. ¿Alguna idea?

[Howaids (Martin)]

¡Por supuesto! Gran sugerencia @LoganRTW. Tiene mi voto @tshenry. ¿Se puede hacer?

[tshenry (Taylor)]

Actualización

¡Si puedes creerlo!

He comenzado a refactorizar y limpiar el componente para utilizar la estructura de archivos de tipo plugin y aprovechar las nuevas miniaturas de temas.

FEATURE: Include optimized thumbnails for topics (#9215)

También he añadido algunas nuevas características:

• Nuevas configuraciones

  • image_display_style: hay dos opciones. La predeterminada debería ser el comportamiento que el componente ha tenido desde el principio. La alternativa asegurará que no haya recorte y que se muestre la imagen completa. Es difícil decir cuál es “mejor”, así que querrás hacer algunas pruebas y ver qué funciona mejor para tu flujo de trabajo y las imágenes de tu blog.

    

  • mobile_enabled: esta es una primera aproximación al estilo de publicaciones de blog para móviles. ¡Me interesa escuchar cualquier informe de errores o ideas para mejorar esto!

    

Todavía quiero continuar refactorizando y limpiando el código, pero esto debería ser un buen comienzo.

Introduce mobile, image display options, and refactor

---

@Varhall

Sería genial agregar marcado schema.org para este tipo de tema. ¿Está en los planes?

¡Por desgracia, no hay planes al respecto en este momento!

[torstensson (Per Torstensson)]

¡Gracias por un componente realmente inspirador y agradable @tshenry

En mi evaluación he identificado dos problemas:

1. Sin imagen del blog en las subcategorías - Después de un troubleshooting bastante extenso con diferentes temas y activando/desactivando tanto plugins como otros componentes, creo que puedo afirmar con casi total seguridad que las imágenes del blog no se mostrarán en las subcategorías. Sin embargo, la primera imagen / la imagen del blog prevista sigue oculta.

2. La primera imagen no se oculta en línea con DiscoTOC - Cuando se usa el Estilo de Publicación de Blog junto con DiscoTOC, la imagen del blog se renderiza correctamente encima del título; sin embargo, se muestra dos veces, ya que también sigue renderizándose en su posición original.

[tshenry (Taylor)]

¡Muchas gracias por tus comentarios, @torstensson! Ambos puntos eran efectivamente errores y ya deberían estar solucionados:

https://github.com/tshenry/discourse-blog-post-styling/commit/f56389897998face967dc2f8a0b5555faa0b52a5

Por favor, avísame si sigues teniendo algún problema.

---

A todos los que utilizan este componente:

¡Si actualmente no estás incluyendo una imagen destacada en la parte superior de todos los artículos del blog, esto es para ti!

Este componente se creó con la intención de mostrar una imagen encima de cada tema de artículo del blog. Dicho esto, era posible crear un artículo sin mostrar una imagen destacada simplemente omitiendo una imagen en la primera línea del post. Este comportamiento ha cambiado.

La nueva implementación mejora considerablemente el rendimiento, pero utiliza un valor predefinido en lugar de analizar el contenido del post en sí. El valor predefinido se genera a partir de la primera imagen encontrada en el post. A diferencia de antes, ya no está necesariamente limitado a una imagen que aparezca como la primera línea del post. Esto significa que si creas un post sin imagen en la primera línea, pero incluyes una única imagen al final del post, esa imagen del final también se mostrará ahora encima del tema.

He incluido una configuración de todo o nada que permite activar/desactivar la “imagen destacada”, permitiéndote tener todo el estilo excepto la imagen destacada si esa es tu preferencia.

Voy a actualizar la publicación original (OP) con todas las nuevas consideraciones y recomendaciones, pero en resumen: asegúrate de incluir una imagen en la primera línea del post (esta posición sigue utilizándose para evitar que la imagen se repita). Podría resultarte útil utilizar una imagen de marcador de posición en la plantilla de temas de la categoría que pueda usarse como predeterminada si no se proporciona ninguna imagen.

[torstensson (Per Torstensson)]

@tshenry

¡Muchas gracias por los comentarios, @torstensson! Ambos puntos eran efectivamente errores y ya deberían estar corregidos. Por favor, avísame si sigues teniendo algún problema.

¡Genial, gracias, @tshenry! Puedo confirmar con gusto que ambos problemas se han resuelto con la actualización y, de nuevo, gracias por un componente realmente excelente, no solo en su funcionalidad, sino también como fuente de inspiración

[core]

Una función anunciada recientemente podría funcionar como alternativa a este componente de tema. Lo dejamos aquí para quienes estén interesados.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry ¡Muchas gracias por este componente! Lo estamos utilizando junto con el complemento Vistas previas de la lista de temas para crear una sección de artículos para estudiantes en la Comunidad de Dataquest.

Tengo una solicitud de función para que la consideres en futuras iteraciones de este componente: ¿Podrías agregar la capacidad de incluir URL canónicas en los artículos?

Los motores de búsqueda utilizan enlaces canónicos para determinar y priorizar la fuente definitiva del contenido, eliminando la confusión cuando existen múltiples copias del mismo documento en diferentes ubicaciones.

¡Gracias!

[sebastianh (Rebastion)]

Así que creo que este es un componente excelente. De hecho, ahora lo estoy probando en un Discourse en vivo y estoy experimentando con él. Sin ningún orden en particular, quiero compartir mis primeras impresiones y comentarios, espero que sean útiles; disculpen si algunos de ellos son más bien preguntas:

• La forma en que se muestra el autor está un poco fuera de lugar y quizás podría resolverse de manera más eficiente en cuanto al espacio, integrándolo más estrechamente con el título, la etiqueta de categoría, etc. También hay bastante espacio en blanco entre la línea que finaliza la información del autor y el inicio del texto.
• Es difícil para un visitante que llega directamente a una entrada de blog darse cuenta de dónde se encuentra, ya que no hay una ruta de navegación clara ni nada similar. La razón principal es que la barra de título parece estar desactivada, mientras que en los temas normales se transforma e incluye el título, la categoría, etc.
• Sería genial si la vista de categorías tuviera más aspecto de blog, con pequeñas imágenes de vista previa y cosas así; ¿sería difícil hacerlo?
• No veo una descripción de la categoría en la vista de categorías.

[sebastianh (Rebastion)]

@nityeshaga

un sección de artículos para estudiantes en la comunidad de Dataquest.

wow, ¿qué componente de tema se usa para esa vista de categoría? Se ve genial

[tshenry (Taylor)]

¡Gracias por tus comentarios!

@sebastianh

• La forma en que se muestra el autor está un poco fuera de lugar y quizás podría resolverse de manera más eficiente en cuanto al espacio, para integrarlo mejor con el título, la etiqueta de categoría, etc. También hay bastante espacio en blanco entre la línea que finaliza la información del autor y el inicio del texto.

Coincido en que hay mucho espacio en blanco alrededor del área del autor/título. Tendré en cuenta este feedback la próxima vez que trabaje en el componente y veré si puedo proponer algo.

@sebastianh

Es difícil para un visitante que llega directamente a una entrada de blog darse cuenta de dónde está, ya que no hay una ruta de navegación clara ni nada por el estilo. La razón principal es que la barra de título parece estar desactivada, mientras que en los temas normales se transforman e incluyen el título, la categoría, etc.

No estoy 100 % seguro de a qué te refieres aquí. La cabecera cambiará para incluir el título y la ruta de navegación una vez que hagas scroll hacia abajo, pasando la imagen y el título del blog. Tienes razón en que, en la parte superior de la página, no es especialmente obvio, aunque.

@sebastianh

• Sería genial si la vista de categorías pudiera tener más aspecto de blog, con pequeñas imágenes de vista previa, etc. ¿Sería difícil hacerlo?
• No veo una descripción de la categoría en la vista de categorías.

Estas funcionalidades estarían fuera del alcance de este componente. Para la vista de categorías, quizás quieras echar un vistazo a: Topic List Thumbnails

[sebastianh (Rebastion)]

¡Gracias por tus comentarios Creo que se ha aclarado la mayoría de los puntos, y ahora también veo la descripción de la categoría. No estoy seguro de por qué no era visible antes; pensé que tenía algo que ver con el componente. Seguiré probándolo y publicaré más comentarios más adelante. ¡Excelente trabajo!

[sebastianh (Rebastion)]

Creo que el espacio extra en la parte superior proviene del espacio que queda después de que la imagen se “mueve” al encabezado de la entrada del blog, lo que no resulta en espacio ganado debajo, sino en un espacio vacío.

Pero noté un problema real: si publico enlaces a dicha entrada del blog en otros temas, no hay miniatura, ve aquí

[sebastianh (Rebastion)]

@sebastianh

Creo que el espacio extra en la parte superior proviene del espacio que queda después de que la imagen se “mueve” al encabezado de la entrada del blog, lo que no resulta en espacio ganado debajo, sino que queda vacío.

Aquí hay una captura de pantalla de lo que quiero decir:

[tshenry (Taylor)]

Estoy bastante seguro de que esto se debe a que omitiste un salto de línea entre el enlace de subida de imagen y el primer párrafo. ¿Podrías probar a editarlo para que coincida con lo siguiente:

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<b>Si bien</b> hay espacio de sobra en la web para publicar, hacer blogs, compartir y tuitear y todo eso, mi lugar favorito para intercambiar ideas con todos ustedes sobre el spaghetti western es este foro. Algunos de ustedes podrían recordar un esfuerzo de hace varios años, se llamaba "Planet Spaghetti Western", y la idea era tener un blog que agregara automáticamente las publicaciones de todos los blogs de spaghetti western de internet y las presentara como un resumen. Fue bastante complicado desde una perspectiva técnica y, al final, dio más trabajo de lo que valía, así que tuve que cerrarlo.

Si eso funciona, añadiré una nota en el OP sobre ese requisito.

[sebastianh (Rebastion)]

Hola. Eso reduce un poco el margen, en efecto, gracias. Había hecho exactamente lo contrario en el editor: dejar muy poco espacio entre la imagen y el inicio del texto.