Ejemplo posts relacionados y cambio a mayúscula del nombre
This commit is contained in:
@@ -1,28 +1,69 @@
|
||||
---
|
||||
const { currentPost } = Astro.props;
|
||||
|
||||
// Aquí deberías implementar la lógica para obtener posts relacionados
|
||||
// Por ejemplo, basándote en categorías, tags, o algún otro criterio
|
||||
const relatedPosts = [{ title: "Prueba", excerpt: "Prueba", url: "Prueba" }];
|
||||
const posts = await Astro.glob('../pages/posts/*.mdx');
|
||||
|
||||
const relatedPosts = posts.filter(post =>
|
||||
currentPost.relacionados?.includes(post.file.split('/').pop().replace('.mdx', ''))
|
||||
).map(post => ({
|
||||
title: post.frontmatter.titulo,
|
||||
excerpt: post.frontmatter.descripcion,
|
||||
url: post.url,
|
||||
imagen: post.frontmatter.imagen
|
||||
}));
|
||||
---
|
||||
|
||||
<section class="related-posts mt-5">
|
||||
<h2>Posts Relacionados</h2>
|
||||
<div class="row">
|
||||
<section class="related-posts mt-5 col-lg-8">
|
||||
<h4 class="mb-3">Posts Relacionados</h4>
|
||||
<ul class="list-group">
|
||||
{
|
||||
relatedPosts.map((post) => (
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{post.title}</h5>
|
||||
<p class="card-text">{post.excerpt}</p>
|
||||
<a href={post.url} class="btn btn-primary">
|
||||
Leer más
|
||||
</a>
|
||||
<li class="list-group-item list-group-item-action">
|
||||
<a href={post.url} class="text-decoration-none">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
src={post.imagen}
|
||||
alt={post.title}
|
||||
class="related-post-img"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="mb-1">{post.title}</h6>
|
||||
<small class="text-muted excerpt-text">{post.excerpt}</small>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<i class="fas fa-chevron-right text-muted"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.related-post-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.list-group-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.excerpt-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -255,13 +255,13 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
|
||||
<i class="fas fa-user"></i>
|
||||
{frontmatter.autor}
|
||||
{
|
||||
frontmatter.lastModified && (
|
||||
frontmatter.fecha && (
|
||||
<>
|
||||
|
|
||||
<i class="fas fa-edit" /> Última
|
||||
actualización:{" "}
|
||||
{new Date(
|
||||
frontmatter.lastModified,
|
||||
frontmatter.fecha,
|
||||
).toLocaleDateString("es-ES", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
|
||||
@@ -6,6 +6,7 @@ fecha: '10/29/24'
|
||||
descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 1 en el siguiente post:'
|
||||
imagen: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Sustainable_Development_Goal-es-17.jpg'
|
||||
hashtags: ['ODS1', 'Erradicación de la Pobreza', 'Desarrollo Sostenible', 'Igualdad de Derechos', 'Protección Social']
|
||||
relacionados: ['ODS2', 'ODS10', 'ODS8', 'ODS3']
|
||||
---
|
||||
import ImagenMD from "../../components/ImagenMD.astro"
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ fecha: '10/29/24'
|
||||
descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 2 en el siguiente post:'
|
||||
imagen: 'https://upload.wikimedia.org/wikipedia/commons/8/80/Sustainable_Development_Goal-es-16.jpg'
|
||||
hashtags: ['Hambre Cero', 'Seguridad Alimentaria', 'Nutricion', 'Agricultura Sostenible']
|
||||
relacionados: []
|
||||
---
|
||||
import ImagenMD from "../../components/ImagenMD.astro"
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
|
||||
fecha: '10/29/24'
|
||||
descripcion: 'Este objetivo busca mejorar la salud y la calidad de vida general de todos los seres humanos, involucrando una serie de políticas y de acciones tanto gubernamentales y civiles para lograr dicho objetivo. Descubre qué implica exactamente en este artículo:'
|
||||
imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Sustainable_Development_Goal-es-15.jpg/1024px-Sustainable_Development_Goal-es-15.jpg'
|
||||
relacionados: []
|
||||
---
|
||||
import ImagenMD from "../../components/ImagenMD.astro"
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
|
||||
fecha: '10/29/24'
|
||||
descripcion: 'Este objetivo busca garantizar una educación inclusiva, equitativa y de calidad para todos los los ciudadanos del mundo a lo largo de sus vidas. Descubre qué es lo que implica en este post:'
|
||||
imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sustainable_Development_Goal-es-14.jpg/480px-Sustainable_Development_Goal-es-14.jpg'
|
||||
relacionados: []
|
||||
---
|
||||
import ImagenMD from "../../components/ImagenMD.astro"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user