Necesito ayuda para configurar un parámetro de frontmatter de imagen destacada. He estado tratando durante horas para que esto funcione y parece que no puedo resolverlo.
--- title: My post date: 2020-02-23 published: true thumb: '/assets/img/img.jpg' tags: - Tag 1 - Tag2 ---
Este es mi código de descuento. Lo que estoy tratando de hacer en mi página de publicaciones es mostrar la imagen destacada, pero cuando el código representa, el src de la imagen se muestra como (desconocido). El código que estoy usando para generar esto es post.data.thumb
.
<img src="{{ post.data.thumb }}" alt="Some alt text">
He estado buscando en algunos de los repositorios de los blogs de inicio de 11ty y algunos de ellos tienen mucho frontmatter personalizado, pero no puedo ver en ninguno de sus archivos dónde se está configurando para que funcione.
He intentado usar eleventyComputed
que no parece funcionar. También intenté usar un archivo posts.11tydata.js en mi carpeta de publicaciones que tampoco hizo nada. Sospecho que esto podría ser algo fácil, pero he pasado horas mirándolo y estoy completamente perdido en este punto.
module.exports = { layout: 'post', title: 'Untitled', eleventyComputed: { permalink: (data) => `${data.page.fileSlug}/index.html`, thumb: (data) => { if (data.thumb) { if (data.thumb.search(/^https?:\/\//) !== -1) { return data.thumb; } return `/assets/img/${data.thumb}`; } else { return false; } }
} };
Aquí hay un ejemplo práctico de lo que estoy tratando de lograr , pero no puedo entender por qué el suyo funciona y el mío no.
Aquí está el enlace a mi proyecto en github si desea echar un vistazo más de cerca
¡Cualquier ayuda es apreciada!
En el ejemplo que proporcionó, tienen una colección de publicaciones como archivos Markdown donde cada archivo de publicación ( .md
) tiene un campo de miniatura definido en thumb
que representa un nombre de miniatura de imagen. Cada publicación en la colección de "publicaciones" utiliza el diseño post.njk , y aquí es donde se utilizarán los datos preliminares de cada publicación:
{% if thumb %} <div class="mt-10 -mx-7 md:mx-0"> <img class="w-full max-w-2xl mx-auto" src="{{ thumb | url }}" width="960" height="500" alt="This post thumbnail"> </div> {% endif %}
Ellos (el repositorio de ejemplo que vinculó) usan archivos de datos de JavaScript para anteponer "/assets/img/" al valor del thumb
y luego terminan con "/assets/img/${data.thumb}" a través de posts.11tydata.js para utilizar en el archivo de diseño post.njk
. Esto funciona, pero es un poco complicado para simplemente utilizar datos preliminares en el diseño principal.
Recomendaría lo siguiente:
thumb
en frontmatter como solo el nombre de la imagen para cada plantilla Markdown/Liquid que pasará al archivo de diseño post.liquid
o .njk
.post-uno.md
--- title: Post One date: 2020-02-23 layout: post.liquid published: true thumb: foo.jpg tags: - tag1 --- {{ thumb }} is foo.jpg
post-dos.md
--- title: Post One date: 2020-02-23 layout: post.liquid published: true thumb: bar.jpg tags: - tag1 --- {{ thumb }} is bar.jpg
src/_includes/layouts/post.liquid
, anteponga "/assets/img/" al src
para la imagen y luego simplemente utilice el thumb
de cada plantilla de publicación en lugar de introducir más lógica en un archivo de datos. <!-- layouts/post.liquid --> <html> <body> <div class="featured-img-container"> <img src="/assets/img/{{ thumb }}" alt="Some alt text"> </div> </body> </html>