sveltekit blog mdx

SvelteKit MDsvex Блог Стартер

sveltekit-блог-mdx

Стартер блога SvelteKit, который поможет вам начать работу над следующим блогом Svelte. Проект создает прогрессивное веб-приложение (PWA) «из коробки». Вам просто нужно настроить свои логотипы и т. д.

См. сообщение в блоге Sveltekit Blog Starter на сайте Rodney Lab, чтобы получить некоторое объяснение того, что внутри и как настроить. Пожалуйста, задавайте вопросы в комментариях внизу страницы.

Вот быстрый старт:

Все, что вам нужно для создания блога Svelte на базе sveltekit-blog-mdx .

Создание собственного блога MDsveX

Если вы видите это, возможно, вы уже сделали этот шаг. Поздравляю!

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

Адаптивные изображения

Стартер создает и кэширует адаптивные изображения с помощью плагина vite-imagetools . Это легко использовать, если вы заранее знаете, какое изображение вы хотите включить. Вы просто импортируете его на страницу, на которой хотите его использовать:

 import featuredImageSrc from '$lib/assets/home/home.jpg' ;

Плагин vite-imagetools затем сгенерирует и хеширует изображение. См. примеры в src/routes/index.svelte .

Пример, в котором вы хотите иметь разные избранные изображения для каждого поста в блоге, немного сложнее, но выполним. В этом случае вы можете запустить скрипт ( generate-responsive-image-data.js ) для перебора всех сообщений в блоге, взяв избранное изображение из заголовка сообщения в блоге. Затем этот сценарий может вывести необходимые импортированные данные в сгенерированный файл JavaScript, по одному для каждого сообщения в блоге (см. каталог src/lib/generated ). Наконец, вы можете динамически импортировать этот файл JavaScript с помощью функции загрузки шаблона блога.

Чтобы запустить включенный скрипт по команде типа:

pnpm run gen:images

Это следует делать каждый раз, когда вы добавляете новые сообщения в блог. Он также генерирует заполнитель с низким разрешением, чтобы минимизировать сдвиг макета контента во время загрузки страницы.

Чтобы скрипт мог найти изображения ваших публикаций в блоге, добавьте их в папку src/lib/assets/blog . В этой папке создайте новую папку, имя которой соответствует ярлыку сообщения, и добавьте изображения в новую папку. Имя файла должно совпадать с именем, которое вы используете, — это заголовок сообщения (например, для FeatureImage).

Сценарий может нуждаться в некоторой доработке для вашего случая использования. Дайте мне знать, как его можно улучшить.

XML-карта сайта

• Карта сайта XML генерируется по маршруту сервера src/routes/sitemap.xml/+server.js . Измените этот файл, чтобы настроить вывод.

Убедитесь, что URL-адрес вашего сайта определен в .env как переменная PUBLIC_SITE_URL , чтобы на карте сайта выводились правильные URL-адреса.

Прогрессивное веб-приложение (PWA)

Стартер в основном генерирует конфигурацию PWA автоматически, включая сервис-воркера для автономной доступности и добавления мета в заголовок HTML. PWA необходим файл манифеста с подробным описанием логотипов (для значков) разных размеров, совместимых с различными устройствами. Вам нужно будет сгенерировать набор значков в assets/ :

• apple-touch-icon.png
• favicon.ico
• icon.svg
• значок-192.png
• значок-512.png

Вы можете использовать бесплатные инструменты с открытым исходным кодом для их создания и оптимизации из входного SVG. Этот ресурс включает в себя сценарий оболочки, который можно запустить для автоматизации генерации.

Мета-код HTML для PWA добавляется в компонент по адресу src/lib/components/PWA.svelte .

Вы можете настроить манифест (включая путь к файлу значков), отредактировав src/lib/config/website.js . Следующие переменные вводятся в сгенерированный файл manifest.json :

• siteTitle ,
• siteShortTitle ,
• siteUrl ,
• backgroundColor ,
• themeColor .

Дополнительную информацию см. в статье о прогрессивных веб-приложениях в SvelteKit.

Здание

npm run build

Вы можете просмотреть созданное приложение с помощью npm run preview независимо от того, установили ли вы адаптер. Это не следует использовать для обслуживания вашего приложения в рабочей среде.

Что внутри?

 .
├── 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/content

• src/content/blog — это место, куда нам нужно размещать сообщения нашего блога. Просто очистите образец контента и замените его своими взглядами на мир! Для каждого сообщения существует отдельная папка, что позволяет лучше организовывать изображения, видео и другие медиафайлы, связанные с сообщением. Мы устанавливаем путь браузера по этому имени папки, поэтому имейте это в виду при присвоении имен папкам. Запишите фактическое сообщение в файл с именем index.md в папке сообщения. Хотя файл имеет расширение .md , в нем можно написать Svelte.

src

• hooks.server.js , здесь мы определяем политику безопасности контента (CSP) и другие заголовки безопасности HTTP, эффективные для приложений, отображаемых на стороне сервера. См. публикацию о HTTP-заголовках статического сайта SvelteKit, чтобы узнать, как настроить CSP и т. д. для статических сайтов.

src/components

• src/lib/components — это компоненты, которые мы используем на страницах.

src/lib

• src/lib/config/website.js для удобства мы определяем здесь свойства сайта, такие как название сайта, контактные адреса электронной почты и учетные записи в социальных сетях. Некоторые свойства зависят от переменных среды. Дополнительную информацию о переменных среды в SvelteKit см. в статье о начале работы с SvelteKit.

• src/lib/styles делает то, что вы ожидаете! Мы используем SCSS для стилизации и исходного кода собственных шрифтов в макетах.

src/utilities

• src/utilities/blog.js Этот файл содержит код, помогающий нам преобразовать уценку в сообщениях блога в Svelte. Кроме того, они помогают извлекать поля во вступительной части (это метаданные, которые мы включаем в верхнюю часть файлов index.md сообщений в блоге).

src/routes

• src/routes/[slug]/+page.js — это, по сути, шаблон для данных сообщений в блоге. Один из этих файлов создается при сборке для каждого сообщения в блоге. Он используется для извлечения данных, необходимых в файле Svelte, используемом для создания HTML-кода сообщения.

• src/routes/[slug]/+page.svelte аналогично предыдущему файлу, один из них создается для каждого сообщения в блоге. На этот раз это код Svelte, который SvelteKit использует для генерации HTML и JavaScript для наших сообщений в блоге.

Я упоминаю большинство других файлов в блоге «Начало работы с SvelteKit», но дайте мне знать, если я пропустил что-то, требующее дополнительных объяснений.

Не стесняйтесь заходить в матричный чат Rodney Lab.