sveltekit blog mdx
1.0.0
Iniciador de blog SvelteKit para ayudarle a comenzar con su próximo blog Svelte. El proyecto crea una aplicación web progresiva (PWA) lista para usar. Solo necesita personalizar con sus logotipos, etc.
Consulte la publicación del blog Sveltekit Blog Starter en el sitio de Rodney Lab para obtener una explicación de lo que hay dentro y cómo personalizarlo. Por favor, deje sus preguntas en un comentario al final de esa página.
Aquí está el comienzo rápido:
Todo lo que necesita para crear un sitio de blogs Svelte, impulsado por sveltekit-blog-mdx .
Si estás viendo esto, probablemente ya hayas realizado este paso. ¡Felicitaciones!
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev El iniciador crea y almacena en caché imágenes responsivas utilizando el complemento vite-imagetools . Esto es fácil de usar cuando sabes de antemano qué imagen deseas incluir. Simplemente importalo en la página en la que deseas usarlo:
import featuredImageSrc from '$lib/assets/home/home.jpg' ; El complemento vite-imagetools generará y aplicará un hash a la imagen. Vea ejemplos en src/routes/index.svelte .
El ejemplo en el que deseas tener una imagen destacada diferente para cada publicación del blog es un poco más complicado, aunque manejable. En este caso, puede ejecutar un script (consulte generate-responsive-image-data.js ) para recorrer todas las publicaciones del blog, tomando la imagen destacada de la portada de la publicación del blog. Luego, este script puede generar las importaciones necesarias en un archivo JavaScript generado, uno para cada publicación de blog (consulte el directorio src/lib/generated ). Finalmente puedes importar dinámicamente ese archivo JavaScript en la función de carga de la plantilla del blog.
Para ejecutar el script incluido con el comando tipo:
pnpm run gen:imagesEsto debe hacerse cada vez que agregue nuevas publicaciones de blog. También genera un marcador de posición de baja resolución para minimizar el cambio en el diseño del contenido durante la carga de la página.
Para que el script encuentre las imágenes de las publicaciones de su blog, agréguelas en la carpeta src/lib/assets/blog . En esa carpeta, cree una nueva carpeta cuyo nombre coincida con el slug de la publicación y agregue las imágenes a la nueva carpeta. El nombre del archivo debe coincidir con el nombre que utiliza en la portada de la publicación (para imagen destacada, por ejemplo).
Es posible que el script necesite algunos ajustes para su caso de uso. Déjame saber cómo se puede mejorar.
src/routes/sitemap.xml/+server.js . Modifique este archivo para ajustar la salida. Asegúrese de que la URL de su sitio esté definida en .env como la variable PUBLIC_SITE_URL para que las URL correctas se muestren en el mapa del sitio.
El iniciador genera principalmente la configuración de PWA automáticamente, incluido el trabajador de servicio para la disponibilidad fuera de línea y agregando meta a la sección de encabezado HTML. Una PWA necesita un archivo de manifiesto que detalla logotipos (para favicons) en diferentes tamaños, compatible con varios dispositivos. Necesitará generar un conjunto de íconos en assets/ :
Puede utilizar herramientas gratuitas de código abierto para generarlos y optimizarlos a partir de un SVG de entrada. Ese recurso incluye un script de shell que puede ejecutar para automatizar la generación.
El meta HTML para PWA se agrega en el componente en src/lib/components/PWA.svelte .
Puede personalizar el manifiesto (incluida la ruta del archivo de iconos) editando src/lib/config/website.js . Las siguientes variables se introducen en el archivo manifest.json generado:
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor .Consulte el artículo sobre aplicaciones web progresivas en SvelteKit para obtener más información.
npm run buildPuede obtener una vista previa de la aplicación creada con
npm run preview, independientemente de si instaló un adaptador. Esto no debe usarse para entregar su aplicación en producción.
.
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│ ├── app.html
│ ├── content
│ │ └── blog
│ │ ├── best-medium-format-camera-for-starting-out
│ │ ├── folding-camera
│ │ └── twin-lens-reflex-camera
│ ├── global.d.ts
│ ├── hooks.server.js
│ ├── lib
│ │ ├── assets
│ │ │ ├── blog
│ │ │ └── home
│ │ ├── components
│ │ │ ├── BannerImage.svelte
│ │ │ └── ...
│ │ ├── config
│ │ │ └── website.js
│ │ ├── constants
│ │ │ └── entities.js
│ │ ├── generated
│ │ │ └── posts
│ │ ├── styles
│ │ └── utilities
│ │ ├── blog.js
│ │ ├── file.js
│ │ └── image.js
│ ├── routes
│ │ ├── +error.svelte
│ │ ├── +layout.js
│ │ ├── +layout.svelte
│ │ ├── +page.js
│ │ ├── +page.svelte
│ │ ├── [slug]
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ ├── contact
│ │ │ └── +page.svelte
│ │ ├── manifest.webmanifest
│ │ │ └── +server.js
│ │ └── sitemap.xml
│ │ └── +server.js
│ └── service-worker.js
├── static
│ ├── assets
│ ├── favicon.png
│ ├── icon.svg
│ ├── robots.txt
│ └── sitemap.xml
└── svelte.config.js
src/contentsrc/content/blog es donde debemos colocar las publicaciones de nuestro blog. ¡Simplemente limpia el contenido de muestra y reemplázalo con tus puntos de vista sobre el mundo! Hay una carpeta separada para cada publicación, lo que le permite mantener mejor organizados las imágenes, videos y otros medios relacionados específicos de una publicación. Configuramos la ruta del navegador a partir del nombre de esta carpeta, así que téngalo en cuenta al nombrar las carpetas. Escriba la publicación real en un archivo llamado index.md dentro de la carpeta de la publicación. Aunque el archivo tiene una extensión .md , puedes escribir Svelte en él.srchooks.server.js definimos la Política de seguridad de contenido (CSP) y otros encabezados de seguridad HTTP, efectivos para aplicaciones renderizadas del lado del servidor. Consulte la publicación sobre los encabezados HTTP del sitio estático de SvelteKit para ver cómo configurar CSP, etc. para sitios estáticos.src/componentssrc/lib/components estos son los componentes que utilizamos en las páginas.src/lib src/lib/config/website.js Para mayor comodidad, aquí definimos propiedades para el sitio, como el título del sitio, las direcciones de correo electrónico de contacto y las cuentas de redes sociales. Algunas propiedades se alimentan de variables de entorno. Consulte una publicación sobre cómo comenzar con SvelteKit para obtener más información sobre las variables de entorno en SvelteKit.
src/lib/styles hace lo que esperas! Usamos SCSS para diseñar y obtener fuentes autohospedadas en los diseños.
src/utilitiessrc/utilities/blog.js este archivo contiene código que nos ayuda a transformar la rebaja en las publicaciones del blog a Svelte. Además, ayudan a extraer campos en el frontmatter (estos son los metadatos que incluimos en la parte superior de los archivos index.md de la publicación del blog).src/routes src/routes/[slug]/+page.js esto es esencialmente una plantilla para datos de publicaciones de blog. Uno de estos archivos se genera en la compilación de cada publicación de blog. Se utiliza para extraer los datos necesarios en el archivo Svelte utilizado para generar el HTML de la publicación.
src/routes/[slug]/+page.svelte de manera similar al archivo anterior, uno de estos se genera para cada publicación de blog. Esta vez es el código Svelte el que utiliza SvelteKit para generar HTML y JavaScript para las publicaciones de nuestro blog.
Menciono la mayoría de los otros archivos en la publicación del blog Introducción a SvelteKit, pero avíseme si me he perdido algo que necesite más explicación.
Siéntase libre de ingresar a la sala de chat matricial de Rodney Lab.
