astro theme cody

Астро Тема Коди

Минималистичная тема блога, созданная с помощью Astro. Быстрая и простая стартовая сборка для всех, кто хочет создать собственный блог.

Посмотреть демо · Сообщить об ошибке · Запросить функцию

Оглавление

• Мотивация

• Ключевые особенности

• Демо

• Быстрый старт

• Команды

• Настройка вашего веб-сайта

• Конфигурация сайта, ссылки на социальные сети и ссылки на панель навигации

• Добавление сообщений и проектов

• Многоязычная поддержка

• Развертывать

• Дополнительная функциональность

• Кредит

Мотивация

Хотя уже существует так много тем для блогов, я хотел одну, которая бы излучала атмосферу терминала/разработчика и несколько функций, которых не было в других темах.

Ключевые особенности:

• Астро v4 Быстрый

• Классы утилит TailwindCSS

• Доступная семантическая HTML-разметка.

• Адаптивный и оптимизированный для SEO

• Многоязычная поддержка

• Темный/светлый режим с использованием переменных Tailwind и CSS.

• Закрепленные записи и проекты

• Интеграция Astro Assets для оптимизации изображений

• Сообщения о MD и MDX

• Пагинация

• Автоматическая RSS-подача

• Автоматически созданная карта сайта

• SVG-иконка Astro Icon

• Кнопка «Наверх»

Демо

Посмотрите демо здесь.

Быстрый старт

Создайте новый репозиторий на основе этого шаблона.

# npm 7+
npm create astro@latest -- --template kirontoo/astro-theme-cody

# pnpm
pnpm dlx create-astro --template kirontoo/astro-theme-cody

(вернуться к началу)

Команды

Все команды запускаются из корня проекта, из терминала:

Команда	Действие
pnpm install	Устанавливает зависимости
pnpm run dev	Запускает локальный сервер разработки по адресу localhost:4321
pnpm run build	Создайте свой производственный сайт в ./dist/
pnpm run preview	Предварительный просмотр сборки локально перед развертыванием
pnpm run astro ...	Запустите команды CLI, такие как astro add , astro check
pnpm run astro -- --help	Получите помощь по использованию Astro CLI

(вернуться к началу)

Настройка вашего веб-сайта

Конфигурация сайта, ссылки на социальные сети и ссылки на панель навигации

Конфигурация вашего сайта, ссылки на социальные сети и ссылки на панель навигации размещаются в src/consts.ts . Там вы можете настроить заголовок, описание, язык, профиль, ссылки на социальные сети и видимые ссылки на панели навигации по умолчанию.

Добавление сообщений и проектов

Эта тема использует коллекции контента для организации файлов Markdown и/или MDX, а также проверку типов с помощью схемы -> src/content/config.ts .

Вы можете найти примеры сообщений в блогах в src/content/blog и примеры проектов в src/content/project .

Заголовок сообщения в блоге

Свойство (* = обязательно)	Описание
заголовок *	Название вашего поста. Ограничено максимум 150 символами.
описание *	Краткое описание вашего поста, которое также будет использоваться для SEO. Имеет максимальную длину 250 символов.
pubDate *	Дата публикации
дата обновления	Необязательная дата, указывающая, когда сообщение было обновлено. Обратите внимание, что эта дата будет использоваться вместо даты публикации для упорядочивания публикаций, когда они доступны.
геройизображение	Дополнительное изображение обложки вашего поста. Включите свойство src и alt . Пример можно найти в src/content/blog/first-post.md .
ogImage	Необязательное изображение, используемое для SEO.
теги	Используйте дополнительные теги, чтобы упорядочить сообщения по категориям или темам. Все теги будут показаны в yourdomain.com/tags .
ряд	Используйте дополнительные серии, чтобы организовать свои сообщения в серии сообщений. Все серии будут показаны в yourdomain.com/series .
черновик	Необязательное логическое значение. Удаляет посты из публикации.
заказ	Необязательное числовое значение от 1 до 5, чтобы закрепить определенные сообщения вверху. Ограничено только 5 закрепленными сообщениями.
скрывать	Необязательное логическое значение. Скрыть публикацию на странице /blog . Все равно будет отображаться в /archive

Фронт проекта

Свойство (* = обязательно)	Описание
заголовок *	Название вашего проекта. Ограничено максимум 150 символами.
описание *	Краткое описание вашего проекта, которое также будет использоваться для SEO.
pubDate *	Дата публикации
геройизображение	Дополнительное изображение обложки для вашего проекта. Включите свойство src и alt . Проверьте src/pages/projects/project-1.md для примера.
ogImage	Необязательное изображение, используемое для SEO.
куча *	Список технологий, использованных в вашем проекте, который будет отображаться в виде значков. В этой теме используется библиотека SVG Logos, вы можете использовать icones.js.org, чтобы найти нужные вам значки.
платформа	Ссылка на сайт или демо
веб-сайт	Ссылка на сайт или демо
github	Ссылка на ваш репозиторий GitHub
черновик	Необязательное логическое значение. Удаляет проекты из публикации.
заказ	Необязательное числовое значение от 1 до 5, чтобы закрепить определенные проекты вверху. Ограничено только 5 закрепленными сообщениями.

(вернуться к началу)

Многоязычная поддержка

Посетите вики, чтобы настроить многоязычную поддержку для своего блога.

Развертывать

Astro предоставляет отличную документацию для развертывания ваших веб-сайтов Astro на различных платформах. Вы можете найти это здесь.

Дополнительная функциональность

Ознакомьтесь с Astro Recipes, чтобы добавить другие функции, такие как RSS-канал.

Кредит

Эта тема основана на теме Astro Cactus и Hugo Risotto.

(вернуться к началу)