Seb's blog

https://download.tuxfamily.org/passionlinux/site/banner.png

Comment utiliser des extraits dans Eleventy(11ty)?

C’est pas totalement au point sur ce blog, je viens juste d’implémenter ça, en me basant sur pas mal de blogs, sites, documentations notamment la doc de 11ty, mais pas que puisque j’ai trouvé la doc amnésique, ou plutôt comme toujours avec Eleventy, parlant à des gars qui savent déjà.

Les deux sites qui m’ont vraiment aidé sont webbureaucrat et stackoverflow avec How do I use an excerpt from Eleventy’s gray-matter?, mais d’autres m’ont donné des pistes de recherches et de compréhensions:

Eleventy est vraiment un merveilleux moteur pour faire son site mais il a une documentation parsemée et pas forcément des plus compréhensibles c’est pour ça que je vais vous donner ma méthode, qui est la solution officielle, on verra pour la suite si on a besoin de faire évoluer la chose. On mémorise que j’utilise 11ty avec le starter eleventy-base-blog qui a tout pour faire un blog avec une configuration adéquate.

Dans un premier temps je reprends l’entrée en la matière du blog qui m’a le plus aidé:

Récemment, j’ai ajouté des extraits de messages du premier paragraphe à la liste des messages de la page d’accueil de ce blog Eleventy. J’ai trouvé que ce n’était pas facile. Tout n’était pas documenté au même endroit. De plus, pour utiliser des extraits Markdown en HTML, j’ai dû écrire un simple filtre personnalisé. J’aimerais documenter le processus ici de bout en bout.

Tout en utilisant ses notes, je vais simplifier au maximum, pour donner seulement ce qui doit être fait sans commenter plus que necessaire.

Activer grey-matter dans notre configuration. #

On doit tout d’abord activer grey-matter dans notre fichier eleventy.js (chez moi il se nomme eleventy.config.js) pour voir nos extraits. Facultatif mais je le fais tout de même, définissez le séparateur d’extrait, c’est une chaîne qui marque la fin de l’extrait et le début du reste de l’article. Par défaut, c’est “—” mais cette valeur est facilement remplacée à l’aide de la excerpt_separator (Example: Parse excerpts from content), de mon coté j’utilise <!-- more --> pour être uniforme avec Hexo et Zola utilisant cette syntaxe (hexo.excerpt et zola.excerpt).

	eleventyConfig.setFrontMatterParsingOptions({
    excerpt: true,
    // Optional, default is "---"
    excerpt_separator: "<!-- more -->"
  });

Ajouter des séparateurs d’extraits dans chaque message. #

Maintenant vous pouvez ajouter des séparateurs d’extraits dans chaque billet avec <!-- more -->.

Écrivez un filtre personnalisé simple pour lire des extraits de Markdown. #

Mes billets de blog sont en .md, mais ma liste d’articles sur la page d’accueil est un .njk qui se compile en HTML. Je ne veux changer ni l’un ni l’autre de ces éléments, mais si je référence mes extraits de démarquage en HTML, ils apparaîtront sous forme de texte brut markdown (j’ai testé). J’ai besoin d’ajouter quelque chose pour concilier les deux.

Dans mon fichier de configuration, le eleventy.config.js, j’ai déjà ajouté mes options pour markdownIt. C’est quelque chose qui ressemble à ça:

	// Customize Markdown options settings:
		let options = {
			html: true,
		  highlight: true,
      xhtmlOut: true,
    	breaks: true,
			linkify: true,
			typographer: true,
			quotes: '“”‘’'
	};

	eleventyConfig.setLibrary("md", markdownIt(options));

Dans ce cas, on aura juste une ligne a rajouter pour l’écriture de filtres personnalisés simples qui peuvent prendre des chaînes de démarquage et les transformer en fragments HTML:

	// Prendre des chaînes de démarquage et les transformer en fragments HTML:
	eleventyConfig.addFilter("toHTML", str => {
    return new markdownIt(options).renderInline(str);
	});

Si vous avez quelque chose ressemblant à ça:

let markdownLibrary = markdownIt({
            html: true,
            breaks: false,
            linkify: true
        });
eleventyConfig.setLibrary("md", markdownLibrary);

Vous devrez réutiliser cet objet, c’est donc une bonne pratique de le séparer dans sa propre constante en haut du fichier…

const MARKDOWN_OPTIONS =
      {
          html: true,
          breaks: false,
          linkify: true
      };

… qui peut être référencé à plusieurs endroits

let markdownLibrary = markdownIt(MARKDOWN_OPTIONS);
eleventyConfig.setLibrary("md", markdownLibrary);

Puis enfin on rajoute le filtre personnalisé simple qui peut prendre des chaînes de démarquage et les transformer en fragments HTML.

eleventyConfig.addFilter("toHTML", str => {
    return new markdownIt(MARKDOWN_OPTIONS).renderInline(str);
});

Utilisez le filtre personnalisé pour afficher les extraits HTML dans vos listes de publications. #

Maintenant, enfin, je peux inclure cet extrait dans mon /_includes/postlist.njk , qui parcourt la postscollection comme suit :

{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
<ol reversed class="postlist">
{% for post in postslist | reverse %}
	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
		<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("dd LLLL yyyy") }}</time>
	</li>
{% endfor %}
</ol>

Canalisons l’extrait de message dans notre toHTMLfiltre personnalisé, puis dirigeons la sortie de notre filtre vers le filtre intégré safe afin qu’Eleventy traite la sortie comme HTML au lieu de texte brut.

{%- css %}.postlist { counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }} }{% endcss %}
<ol reversed class="postlist">
{% for post in postslist | reverse %}
	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
		<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("dd LLLL yyyy") }}</time>
	</li>
	{%- if post.data.page.excerpt -%}
    <p>{{ post.data.page.excerpt | toHTML | safe}}</p>
{%- endif -%}
{% endfor %}
</ol>

Un npx @11ty/eleventy --serve plus tard nous devrions voir nos extraits partout où nous référençons _includes/postlist.njk .

Commencer la discussion: Venez écrire un commentaire dans le forum