Mise en forme des articles de blog

[Discourse]

	Résumé	Blog Post Styling vous permet de désigner une catégorie de blog, ce qui modifie l’apparence des sujets au sein de cette catégorie pour qu’ils ressemblent davantage à des articles de blog traditionnels.
	Aperçu	Aperçu sur theme-creator.discourse.org
	Dépôt	github.com/discourse/discourse-blog-post-styling
	Nouveau sur les thèmes Discourse ?	Guide pour débutant sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Le composant de thème Blog Post Styling transforme les sujets Discourse en une mise en page d’article de blog traditionnelle. Lorsqu’il est appliqué à une catégorie, la première image de chaque sujet est promue en une bannière pleine largeur au-dessus du titre, et le contenu est stylisé avec une typographie et une présentation des métadonnées adaptées aux blogs.

Paramètres

Voici les différents paramètres associés à ce composant de thème :

• Catégorie de blog : Les sujets appartenant à l’une des catégories sélectionnées bénéficieront du style d’article de blog.

• Balise de blog : Choisissez une ou plusieurs balises qui, lorsqu’elles sont appliquées à un sujet, lui donneront le style d’article de blog.

• Taille de l’image : Décidez comment l’image vedette remplit la zone d’en-tête :

  • Pas d'image : Masquer l’image vedette.
  • Pleine largeur (par défaut) : L’image s’étend sur toute la zone de contenu.
  • Centré : L’image conserve son ratio d’aspect et est centrée dans la zone de contenu.

• Position de l’image : Décidez où afficher l’image par rapport au titre :

  • Au-dessus du titre (par défaut) : Afficher l’image au-dessus du titre du sujet.
  • En dessous du titre : Afficher l’image en dessous du titre du sujet. Lorsque cette option est sélectionnée, vous pouvez également inclure un résumé qui s’affiche entre le titre et l’image. Ci-dessous, vous pouvez voir à quoi ressemble l’image lorsque le paramètre position de l’image est configuré sur au-dessus du titre et en dessous du titre :

• Dropcap activé : Lorsqu’il est activé, la première lettre de l’article de blog aura un style agrandi, comme ceci :
  
  
• Mobile activé : Lorsqu’il est activé, le style d’article de blog est appliqué lors de la lecture du sujet sur les appareils mobiles.

Rédaction d’un article de blog

Une fois que vous avez configuré votre catégorie de blog (ou appliqué votre balise d’article de blog), il y a quelques points particuliers à noter concernant le fonctionnement du sujet d’article de blog.

Image vedette

Placez l’image que vous souhaitez utiliser comme image vedette sur la tout première ligne du message, suivie d’une ligne vide avant le début de votre contenu :

![description de l'image|1100x440](upload://votre-hash-image.jpg)

Le contenu de votre message commence ici...

Le composant positionne automatiquement cette image en fonction du paramètre position de l’image (voir ci-dessus). Si tout autre contenu — y compris des lignes vides — apparaît avant l’image, celle-ci ne sera pas promue à la position vedette.

Après la première publication d’un message, actualisez la page pour voir l’image apparaître à la position désignée. (Cela ne concerne que l’auteur du message lors de la publication initiale ; les membres accédant au message devraient voir l’image au bon endroit immédiatement.)

Astuces pour la taille de l’image

Le conteneur d’image fait 440 px de haut et 100 % de large. Pour de meilleurs résultats lorsque le paramètre taille de l’image est défini sur pleine largeur :

• Utilisez ou recadrez les images à 1100x400 px avant de les télécharger pour éviter le recadrage, ou
• Choisissez des images avec un sujet centralisé ou un contenu non spécifique (paysages, motifs) afin que le recadrage ne supprime pas les détails importants.

Résumés

Lorsque le paramètre position de l’image est défini sur en dessous du titre, vous pouvez ajouter un résumé facultatif à votre article de blog, qui apparaîtra entre le titre et l’image vedette.

Pour ce faire, entourez le contenu que vous souhaitez voir apparaître dans votre résumé comme suit :

[summary] Voici le contenu qui sera votre résumé. [/summary]

Citations stylisées

Lors de la création de sujets dans une catégorie de blog, les citations bénéficient d’un style spécial. Vous pouvez créer des citations dans le compositeur avec le symbole > ou en utilisant le bouton de la barre d’outils du compositeur “.

Paramètre de catégorie recommandé

Dans les paramètres de votre catégorie de blog, envisagez d’activer le paramètre de catégorie Accéder au premier message après la lecture des sujets. Cela envoie les lecteurs récurrents directement au contenu de l’article de blog plutôt qu’à leur dernière position de lecture.

Blog Post Styling + Miniatures de la liste des sujets

Ce composant est compatible avec Topic List Thumbnails, qui met en évidence l’image vedette de votre article de blog dans la liste des sujets :

Remarque : Le composant Topic List Thumbnails n’est pas compatible avec le thème Horizon. La capture d’écran ci-dessus utilise le thème 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]

Bonjour, et merci beaucoup d’avoir pris le temps de créer cela et de le rendre disponible gratuitement.

Je me demandais simplement s’il serait possible de modifier cela d’une manière ou d’une autre pour utiliser un tag spécifique au lieu d’une catégorie particulière ?

Je viens de configurer un nouveau site Discourse, mais j’ai écrit beaucoup de « billets de blog » et j’aimerais toujours qu’ils apparaissent dans les autres catégories appropriées afin de paraître un peu plus intégrés.

Actuellement, je les publie dans leur propre catégorie « billets de blog », que j’ai restreinte uniquement à moi-même pour y publier, mais je viens de configurer un groupe de tags et je l’ai rendu accessible uniquement au personnel.

Merci encore !

[Howaids (Martin)]

Merci beaucoup à @tshenry. Vos composants de thème ont tous été parfaits. Et merci à @sam et @codinghorror pour le partage d’une application incroyable !! Votre générosité, y compris le soutien apporté sur Meta, est sincère. Discourse est en effet conçu pour un internet plus attentionné de demain.

[LoganRTW (Ward)]

Existe-t-il un moyen de faire fonctionner cela avec une vidéo comme contenu mis en avant plutôt qu’une image ? Je supprimerais mon site WordPress si je pouvais simplement publier une vidéo YouTube/Vimeo, etc., et l’avoir comme contenu principal. Des idées ?

[Howaids (Martin)]

Tout à fait ! Excellente suggestion @LoganRTW. Ça a mon vote @tshenry. Est-ce que c’est réalisable ?

[tshenry (Taylor)]

Mise à jour

Si vous pouvez y croire

J’ai commencé à refactoriser/nettoyer le composant pour adopter une structure de fichiers de type plugin et tirer parti des nouvelles miniatures de sujets.

FEATURE: Include optimized thumbnails for topics (#9215)

J’ai également ajouté quelques nouvelles fonctionnalités :

• Nouveaux paramètres

  • image_display_style : deux options sont disponibles. Par défaut, le comportement correspond à celui du composant jusqu’à présent. L’option alternative garantit qu’il n’y a pas de recadrage et que l’image complète est affichée. Il est difficile de dire laquelle est « meilleure », vous voudrez donc faire quelques tests pour voir ce qui fonctionne le mieux pour votre flux de travail et vos images de blog.

    

  • mobile_enabled : il s’agit d’une première version du style des articles de blog pour mobile. J’aimerais beaucoup entendre vos rapports de bugs ou vos idées d’amélioration à ce sujet !

    

Je souhaite continuer à refactoriser et à nettoyer le code, mais c’est un bon début.

Introduce mobile, image display options, and refactor

---

@Varhall

Ce serait cool d’ajouter une balise schema.org pour ce type de sujet. Est-ce prévu ?

Pas de plans à ce stade, je crains !

[torstensson (Per Torstensson)]

Merci pour ce composant vraiment inspirant et sympathique @tshenry

Dans mon évaluation, j’ai identifié deux problèmes :

1. Aucune image de blog dans les sous-catégories – Après un dépannage assez approfondi avec différents thèmes et en activant/désactivant à la fois les plugins et d’autres composants, je pense pouvoir affirmer avec une quasi-certitude que les images de blog ne s’affichent pas pour les sous-catégories. La première image, c’est-à-dire l’image de blog prévue, reste cependant masquée.

2. La première image n’est pas masquée conformément à DiscoTOC – Lorsque le style des articles de blog est utilisé conjointement avec DiscoTOC, l’image du blog s’affiche correctement au-dessus du titre. Cependant, elle apparaît deux fois, car elle est toujours rendue à sa position d’origine en plus.

[tshenry (Taylor)]

Merci beaucoup pour vos retours @torstensson ! Les deux points étaient en effet des bogues et devraient maintenant être corrigés :

Bug fixes

N’hésitez pas à me faire savoir si vous rencontrez toujours des problèmes.

---

À tous ceux qui utilisent ce composant :

Si vous n’incluez pas actuellement une image à la une en haut de tous les articles de blog, ceci vous concerne !

Ce composant a été créé dans l’intention d’afficher une image au-dessus de chaque sujet d’article de blog. Cela dit, il était possible de créer un article de blog sans afficher d’image à la une en omettant simplement d’inclure une image sur la première ligne de l’article. Ce comportement a changé.

La nouvelle implémentation améliore considérablement les performances, mais elle utilise une valeur prédéfinie plutôt que d’examiner directement le contenu de l’article. Cette valeur prédéfinie est générée à partir de la première image trouvée dans l’article. Contrairement à avant, elle n’est plus nécessairement limitée à une image apparaissant en première ligne de l’article. Cela signifie que si vous créez un article sans image sur la première ligne, mais que vous incluez une seule image en bas de l’article, cette image du bas sera désormais également affichée au-dessus du sujet.

J’ai inclus un paramètre tout-ou-rien permettant d’activer ou de désactiver l’« image à la une », vous permettant ainsi de bénéficier de tout le style sauf de l’image à la une si c’est ce que vous préférez.

Je vais mettre à jour le premier message (OP) avec toutes les nouvelles considérations et recommandations, mais pour faire court, assurez-vous d’inclure une image sur la première ligne de l’article (ce positionnement est toujours utilisé pour éviter que l’image ne soit répétée). Vous constaterez peut-être qu’il est utile d’utiliser une image de remplacement dans le modèle de sujet de la catégorie, qui pourra servir de valeur par défaut si aucune image n’est fournie.

[torstensson (Per Torstensson)]

@tshenry

Un grand merci pour vos retours @torstensson ! Les deux points étaient effectivement des bugs et devraient maintenant être corrigés. N’hésitez pas à me faire savoir si vous rencontrez encore des problèmes.

Super, merci @tshenry Je peux confirmer avec plaisir que les deux problèmes ont été résolus avec la mise à jour et encore une fois, merci pour ce composant vraiment excellent, tant sur le plan fonctionnel que sur celui de l’inspiration

[core]

Une fonctionnalité récemment annoncée peut servir d’alternative à ce composant de thème. Nous la laissons ici pour les personnes intéressées.

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 Merci beaucoup pour ce composant ! Nous l’utilisons conjointement avec le plugin Aperçus de la liste des sujets pour créer une section Articles pour les étudiants de la communauté Dataquest.

J’ai une demande de fonctionnalité à prendre en compte pour les futures versions de ce composant : pourriez-vous ajouter la possibilité d’ajouter des URL canoniques aux articles ?

Les moteurs de recherche utilisent les liens canoniques pour identifier et prioriser la source ultime du contenu, éliminant ainsi la confusion lorsqu’il existe plusieurs copies d’un même document à différents endroits.

Merci !

[sebastianh (Rebastion)]

Je pense donc que c’est un excellent composant. En fait, je le teste actuellement sur un Discourse en production et je m’amuse avec. Sans ordre particulier, je souhaite partager mes premières réflexions et retours, en espérant que cela vous sera utile – veuillez m’excuser si certains points sont davantage formulés sous forme de questions :

• La manière dont l’auteur est affiché semble un peu déplacée et pourrait peut-être être résolue de façon plus économe en espace, pour mieux l’intégrer au titre, au tag de catégorie, etc. Il y a également beaucoup d’espace blanc entre la ligne qui termine les informations sur l’auteur et le début du texte.
• Il est difficile pour un visiteur arrivant directement sur un article de blog de comprendre où il se trouve, car il n’y a pas de fil d’Ariane clair ou autre. La raison principale est que la barre de titre semble désactivée, alors que dans les sujets normaux, elle se transforme et inclut le titre, la catégorie, etc.
• Ce serait génial si la vue par catégorie avait davantage l’aspect d’un blog, avec de petites images d’aperçu, etc. Serait-ce difficile à mettre en œuvre ?
• Je ne vois pas de description de catégorie dans la vue par catégorie ?

[sebastianh (Rebastion)]

@nityeshaga

un section Articles pour les étudiants de la communauté Dataquest.

Wow, quel composant de thème est utilisé pour cette vue de catégorie ? Ça a l’air cool.

[tshenry (Taylor)]

Merci pour votre retour

@sebastianh

• La manière dont l’auteur est affiché est un peu décalée et pourrait peut-être être résolue de manière plus économe en espace, pour mieux l’intégrer au titre ou à l’étiquette de catégorie, etc. Il y a aussi beaucoup d’espace blanc entre la ligne qui termine les informations sur l’auteur et le début du texte.

Je conviens qu’il y a beaucoup d’espace blanc autour de la zone auteur/titre. Je garderai ce feedback à l’esprit la prochaine fois que je travaillerai sur ce composant et verrai si je peux trouver une solution.

@sebastianh

Il est difficile pour un visiteur arrivé directement sur un article de blog de comprendre où il se trouve, car il n’y a pas de fil d’Ariane clair ou autre. La raison principale est que la barre de titre semble désactivée, alors que dans les sujets normaux, elle se transforme et inclut le titre, la catégorie, etc.

Je ne suis pas tout à fait sûr de ce que vous voulez dire ici. L’en-tête basculera pour inclure le titre/fil d’Ariane une fois que vous aurez fait défiler la page au-delà de l’image et du titre du blog. Vous avez raison de noter que, tout en haut de la page, ce n’est pas particulièrement évident, cependant. Je garderai cela à l’esprit également.

@sebastianh

• Ce serait génial si la vue des catégories pouvait avoir plus l’aspect d’un blog, avec de petites images d’aperçu et autres, serait-ce difficile à faire ?
• Je ne vois pas de description de catégorie dans la vue des catégories ?

Ces éléments seraient hors du périmètre de ce composant. Pour la vue des catégories, vous pourriez jeter un œil à : Topic List Thumbnails

[sebastianh (Rebastion)]

Merci pour vos retours Je pense que la plupart des points sont maintenant éclaircis. Je vois également la description de la catégorie maintenant ; je ne suis pas sûr de savoir pourquoi elle n’était pas visible plus tôt, j’avais pensé que cela avait un lien avec le composant. Je continuerai à tester et publierai d’autres retours plus tard. Excellent travail !

[sebastianh (Rebastion)]

Je pense que l’espace excédentaire en haut provient de l’espace restant après que l’image a été « déplacée » vers l’en-tête de l’article de blog, ce qui ne crée pas d’espace supplémentaire en dessous, mais laisse simplement un vide.

Cependant, j’ai remarqué un véritable problème : si je publie des liens vers un tel article de blog dans d’autres sujets, il n’y a pas de vignette, voir ici

[sebastianh (Rebastion)]

@sebastianh

Je pense que l’espace excédentaire en haut provient de l’espace restant après que l’image a été « déplacée » vers l’en-tête de l’article de blog, ce qui ne se traduit pas par un espace gagné en dessous, mais par un espace vide.

Voici une capture d’écran de ce que je veux dire :

[tshenry (Taylor)]

Je suis plutôt certain que cela est dû au fait que vous avez exclu un saut de ligne entre le lien d’upload de l’image et le premier paragraphe. Pouvez-vous essayer de le modifier pour qu’il corresponde à ce qui suit :

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

<big>Bien</big> qu'il y ait beaucoup d'espace sur le web pour publier, bloguer, partager et tweeter, mon endroit préféré pour échanger des idées avec vous tous sur le western spaghetti est ce forum. Certains d'entre vous se souviennent peut-être d'une tentative datant de plusieurs années, appelée "Planet Spaghetti Western". L'idée était de créer un blog qui agrègerait automatiquement les publications de tous les blogs sur le western spaghetti sur Internet et les présenterait sous forme de résumé. C'était plutôt compliqué d'un point de vue technique et, à la fin, cela demandait plus de travail que cela ne valait la peine, j'ai donc dû arrêter ce projet.

Si cela fonctionne, j’ajouterai une note dans l’OP concernant cette exigence.

[sebastianh (Rebastion)]

Bonjour. Cela réduit effectivement un peu la marge, merci. J’avais fait exactement le contraire dans l’éditeur : laisser le moins d’espace possible entre l’image et le début du texte.