Ejemplo posts relacionados y cambio a mayúscula del nombre
This commit is contained in:
@@ -1,28 +1,69 @@
|
|||||||
---
|
---
|
||||||
const { currentPost } = Astro.props;
|
const { currentPost } = Astro.props;
|
||||||
|
|
||||||
// Aquí deberías implementar la lógica para obtener posts relacionados
|
const posts = await Astro.glob('../pages/posts/*.mdx');
|
||||||
// Por ejemplo, basándote en categorías, tags, o algún otro criterio
|
|
||||||
const relatedPosts = [{ title: "Prueba", excerpt: "Prueba", url: "Prueba" }];
|
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">
|
<section class="related-posts mt-5 col-lg-8">
|
||||||
<h2>Posts Relacionados</h2>
|
<h4 class="mb-3">Posts Relacionados</h4>
|
||||||
<div class="row">
|
<ul class="list-group">
|
||||||
{
|
{
|
||||||
relatedPosts.map((post) => (
|
relatedPosts.map((post) => (
|
||||||
<div class="col-md-4 mb-4">
|
<li class="list-group-item list-group-item-action">
|
||||||
<div class="card">
|
<a href={post.url} class="text-decoration-none">
|
||||||
<div class="card-body">
|
<div class="d-flex align-items-center">
|
||||||
<h5 class="card-title">{post.title}</h5>
|
<div class="flex-shrink-0">
|
||||||
<p class="card-text">{post.excerpt}</p>
|
<img
|
||||||
<a href={post.url} class="btn btn-primary">
|
src={post.imagen}
|
||||||
Leer más
|
alt={post.title}
|
||||||
</a>
|
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>
|
||||||
</div>
|
</li>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</ul>
|
||||||
</section>
|
</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>
|
<i class="fas fa-user"></i>
|
||||||
{frontmatter.autor}
|
{frontmatter.autor}
|
||||||
{
|
{
|
||||||
frontmatter.lastModified && (
|
frontmatter.fecha && (
|
||||||
<>
|
<>
|
||||||
|
|
|
|
||||||
<i class="fas fa-edit" /> Última
|
<i class="fas fa-edit" /> Última
|
||||||
actualización:{" "}
|
actualización:{" "}
|
||||||
{new Date(
|
{new Date(
|
||||||
frontmatter.lastModified,
|
frontmatter.fecha,
|
||||||
).toLocaleDateString("es-ES", {
|
).toLocaleDateString("es-ES", {
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
month: "long",
|
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:'
|
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'
|
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']
|
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"
|
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:'
|
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'
|
imagen: 'https://upload.wikimedia.org/wikipedia/commons/8/80/Sustainable_Development_Goal-es-16.jpg'
|
||||||
hashtags: ['Hambre Cero', 'Seguridad Alimentaria', 'Nutricion', 'Agricultura Sostenible']
|
hashtags: ['Hambre Cero', 'Seguridad Alimentaria', 'Nutricion', 'Agricultura Sostenible']
|
||||||
|
relacionados: []
|
||||||
---
|
---
|
||||||
import ImagenMD from "../../components/ImagenMD.astro"
|
import ImagenMD from "../../components/ImagenMD.astro"
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
|
|||||||
fecha: '10/29/24'
|
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:'
|
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'
|
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"
|
import ImagenMD from "../../components/ImagenMD.astro"
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
|
|||||||
fecha: '10/29/24'
|
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:'
|
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'
|
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"
|
import ImagenMD from "../../components/ImagenMD.astro"
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user