Otros enlace https://docs.astro.build/en/guides/markdown-content/

{/* */}

JavaScript ES6 introdujo varias funciones nuevas que han hecho que la codificación en JavaScript sea más eficiente y agradable. Vamos a explorar algunas de estas funciones.

Arrow Functions - Funciones de Flecha

Las funciones de flecha proporcionan una nueva sintaxis para escribir expresiones de función. Son más concisas y vinculan léxicamente el valor this.

Ejemplo

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

Template Literals - Literales de Plantilla

Los literales de plantilla permiten una interpolación de cadenas más fácil y cadenas de varias líneas. Utilizan comillas invertidas (`) en lugar de comillas simples o dobles.

Ejemplo

const name = 'Jane';
console.log(`Hello, ${name}!`);
// Output: Hello, Jane!

Destructuring Assignment - Asignación por Desestructuración

La asignación por desestructuración le permite extraer valores de matrices u objetos y asignarlos a variables de una manera más concisa.

Ejemplo

const person = { name: 'Jane', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Jane 30

Skip to main content Astro.glob Deprecated, Use import.meta.glob() 1,221 tokens Model Tienes razón, Astro.glob está en desuso en las versiones más recientes de Astro. La forma recomendada de importar varios archivos de forma dinámica ahora es usar import.meta.glob().

Aquí te explico cómo funciona y por qué es mejor:

import.meta.glob() import.meta.glob() es una función que te permite importar múltiples módulos utilizando un patrón de “glob” (similar a los comodines en una shell). Es parte de la especificación de módulos de JavaScript y es compatible con Vite, que Astro utiliza internamente.

Sintaxis básica:

code JavaScript const posts = import.meta.glob(’../pages/blog/*.md’); Esto devolverá un objeto donde las claves son las rutas de los archivos coincidentes y los valores son funciones que, cuando se llaman, importan dinámicamente el módulo correspondiente.

Cómo usarlo en Astro Vamos a ver un ejemplo práctico de cómo lo usarías para obtener tus publicaciones de blog:

1. Obtener todas las entradas del blog:

code Astro

const postFiles = import.meta.glob(’../pages/blog/*.md’); // postFiles ahora es un objeto como: // { // ’../pages/blog/mi-primer-post.md’: () => import(’../pages/blog/mi-primer-post.md’), // ’../pages/blog/otro-post.md’: () => import(’../pages/blog/otro-post.md’), // }

Mis Posts

{Object.keys(postFiles).map(async (filePath) => { const { frontmatter } = await postFiles[filePath](); const slug = filePath.replace('../pages/blog/', '').replace('.md', ''); return (
• {frontmatter.title}
); })}

Explicación:

import.meta.glob(’../pages/blog/.md’): Esto le dice a Vite (y a Astro) que encuentre todos los archivos .md dentro de la carpeta src/pages/blog/. Object.keys(postFiles).map(async (filePath) => { … }): Iteramos sobre las claves (las rutas de los archivos) del objeto postFiles. const { frontmatter } = await postFilesfilePath: Para cada ruta, llamamos a la función de importación (postFilesfilePath) para cargar el módulo. Como es asíncrono, usamos await. Una vez cargado, podemos acceder a su frontmatter (y al rawContent, compiledContent, etc.). const slug = filePath.replace(…): Creamos un “slug” limpio para la URL de la publicación. Ventajas de import.meta.glob() Estándar y Compatibilidad: Es una característica estándar de módulos de JavaScript soportada por herramientas de construcción modernas como Vite, lo que lo hace más “a prueba de futuro”. Optimización por Vite: Vite puede optimizar el proceso de carga de estos módulos, incluyendo el “code-splitting” (dividir el código en fragmentos más pequeños) para mejorar el rendimiento de carga. Flexibilidad: Puedes usar diferentes opciones con import.meta.glob() para controlar cómo se importan los módulos (por ejemplo, import.meta.glob(’../data/.json’, { eager: true }) para cargarlos de inmediato). Tipado Mejorado: Con TypeScript, import.meta.glob() puede ofrecer un mejor tipado en comparación con las implementaciones anteriores de Astro.glob. Ejemplo con eager: true Si sabes que necesitas el contenido de todos los archivos de inmediato (por ejemplo, para construir una lista de enlaces en tiempo de compilación), puedes usar la opción eager: true para que Vite importe los módulos de inmediato, en lugar de devolver funciones que los importen dinámicamente:

code Astro

---
const posts = import.meta.glob('../pages/blog/*.md', { eager: true });

// posts ahora es un objeto como:
// {
//   '../pages/blog/mi-primer-post.md': {
//     frontmatter: { title: 'Mi Primer Post', ... },
//     rawContent: '# Mi Primer Post...',
//     // ... otras propiedades
//   },
//   // ...
// }
---

const sortedPosts = Object.values(posts) .map(post => ({ url: /blog/${post.file.split('/').pop().replace('.md', '')}, title: post.frontmatter.title, date: post.frontmatter.date })) .sort((a, b) => new Date(b.date) - new Date(a.date));

Posts Recientes

{sortedPosts.map(post => (
• {post.title} ({new Date(post.date).toLocaleDateString()})
))}

### En resumen, import.meta.glob() es la herramienta moderna y recomendada para la importación dinámica de archivos en Astro, ofreciendo mejor rendimiento y una integración más profunda con el ecosistema de Vite. 22.5s Use Arrow Up and Arrow Down to select a turn, Enter to jump to it, and Escape to return to the chat.

Run Response ready.