astro theme cactus
v5.0.0
Astro Cactus — это простой стартер, созданный на основе Astro framework. Используйте его, чтобы создать простой в использовании блог или веб-сайт.
Посмотрите демо-версию, размещенную на Netlify
Создайте новый репозиторий на основе этого шаблона.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusЗамените pnpm на выбранный вами npm/пряжу.
| Команда | Действие |
|---|---|
pnpm install | Устанавливает зависимости |
pnpm dev | Запускает локальный сервер разработки по адресу localhost:3000 |
pnpm build | Создайте свой производственный сайт в ./dist/ |
pnpm postbuild | Скрипт Pagefind для статического поиска сообщений в блоге. |
pnpm preview | Предварительный просмотр сборки локально перед развертыванием |
pnpm sync | Генерируйте типы на основе вашей конфигурации в src/content/config.ts |
src/site.config.ts для основных метаданных сайта.astro.config.ts/public :src/styles/global.css добавив свои собственные светлые и темные стили.src/site.config.ts . Вы можете найти больше тем и опций здесь.src/components/SocialList.astro чтобы добавить/заменить свой медиа-профиль. Значки можно найти по адресу @ icones.js.org согласно инструкциям Astro Icon.src/content/post/ и src/content/note/ с помощью файлов .md/mdx. Более подробную информацию смотрите ниже.src/pages/og-image/[slug].png.ts для функции разметки, где вы можете при необходимости отредактировать html/tailwind-classes. . Вы можете использовать эту игровую площадку для улучшения своего дизайна.src/content/post/social-image.md . Дополнительную информацию о фронтовой теме можно найти здесь.font-mono , расположенное в глобальном CSS-файле src/styles/global.css . Вы можете изменить шрифты, удалив вариант font-mono , после чего TailwindCSS по умолчанию будет использовать стек семейства шрифтов font-sans . Если вы создали форк шаблона, вы можете синхронизировать его со своим собственным проектом, не забывая нажимать «Отменить изменения», так как вы потеряете свои собственные.
Если у вас есть репозиторий шаблонов, вы можете добавить этот шаблон как удаленный, как описано здесь.
Эта тема использует коллекции контента для организации локальных файлов Markdown и MDX, а также проверку типов с помощью схемы -> src/content/config.ts .
Добавить публикацию/заметку так же просто, как добавить файлы .md(x) в папку src/content/post и/или src/content/note , имя файла которой будет использоваться в качестве пула/url. Сообщения, включенные в этот шаблон, приведены в качестве примера того, как структурировать заголовок. Кроме того, в документации Astro есть подробный раздел на страницах уценки.
| Недвижимость (* обязательно) | Описание |
|---|---|
| заголовок * | Самоочевидно. Используется в качестве текстовой ссылки на сообщение, h1 на странице сообщения и свойства заголовка страницы. Имеет максимальную длину 60 символов, заданную в src/content/config.ts |
| описание * | Как и выше, используется в качестве свойства SEO-описания. Имеет минимальную длину 50 и максимальную длину 160 символов, заданную в схеме сообщения. |
| дата публикации * | Опять же довольно просто. Чтобы изменить формат/локаль даты (в настоящее время en-GB) , обновите параметр даты в src/site.config.ts . Обратите внимание, что при необходимости вы также можете передать дополнительные параметры компоненту <FormattedDate> . |
| обновленная дата | Это необязательная дата, обозначающая дату обновления публикации, в том же формате, что и публикация. |
| теги | Теги не являются обязательными для любого созданного сообщения. Любые новые теги будут отображаться в yourdomain.com/posts и yourdomain.com/tags и создавать страницы yourdomain.com/tags/[yourTag] |
| ОбложкаИзображение | Это необязательный объект, который добавит изображение обложки в начало сообщения. Включите как src : « путь к изображению », так и alt : « image alt ». Вы можете просмотреть пример в src/content/post/cover-image.md . |
| ogImage | Это необязательное свойство. Изображение OG будет создано автоматически для каждого сообщения, в котором это свойство не указано. Если вы хотите создать собственное изображение для определенного сообщения, включите это свойство и ссылку на свое изображение, тогда тема пропустит автоматическое создание изображения. |
| черновик | Это необязательное свойство, поскольку по умолчанию в схеме для него установлено значение false. Если добавить true, сообщение будет отфильтровано из производственной сборки в ряде мест, в т.ч. Вызовы getAllPosts(), og-изображения, RSS-каналы и сгенерированные страницы. Вы можете просмотреть пример в src/content/post/draft-post.md |
| Недвижимость (* обязательно) | Описание |
|---|---|
| заголовок * | строка, максимальная длина 60 символов. |
| описание | будет использоваться для свойства мета-описания head. |
| дата публикации * | Формат ISO 8601 с допустимыми смещениями. |
Astro Cactus включает полезный фрагмент VSCode, который создает «заглушку» для сообщений и заметок, который можно найти здесь -> .vscode/post.code-snippets . Начните вводить слово frontmatter в только что созданный файл .md(x), чтобы активировать его. Фрагменты кода Visual Studio отображаются в IntelliSense с помощью (⌃Пробел) на Mac и (Ctrl+Пробел) на Windows.
Эта интеграция предоставляет функцию статического поиска для поиска сообщений в блогах и заметок. В своей нынешней форме поиск страниц работает только после создания сайта. Эта тема добавляет сценарий постсборки, который следует запустить после того, как Astro создаст сайт. Вы можете выполнить предварительный просмотр локально, запустив build и& postbuild.
Результаты поиска включают только страницы из публикаций и заметок. Если вы хотите включить другие/все свои страницы, удалите/переместите атрибут data-pagefind-body в тег статьи, найденный в src/layouts/BlogPost.astro и src/components/note/Note.astro .
Он также позволяет фильтровать сообщения по тегам, добавленным в начале сообщений в блоге. Если вы предпочитаете удалить это, удалите атрибут данных data-pagefind-filter="tag" из ссылки в src/components/blog/Masthead.astro .
Если вы предпочитаете не включать эту интеграцию, просто удалите компонент src/components/Search.astro и удалите @pagefind/default-ui и pagefind из package.json. Вам также потребуется удалить отсюда скрипт postbuild.
Вы можете уменьшить первоначальную полезную нагрузку вашего CSS, как показано здесь, путем отложенной загрузки стилей веб-компонентов.
Возможно, вы захотите отслеживать количество посетителей вашего блога/веб-сайта, чтобы понять тенденции и популярные публикации/страницы, которые вы создали. Существует ряд провайдеров, которые можно использовать, включая веб-хосты, такие как Vercel, Netlify и Cloudflare.
Эта тема/шаблон не включает в себя конкретное решение, поскольку существует ряд вариантов использования и/или опций, которые некоторые люди могут использовать или не использовать.
Вас могут попросить включить фрагмент в тег HEAD вашего веб-сайта при его настройке, который можно найти в src/layouts/Base.astro . Альтернативно вы можете добавить фрагмент в src/components/BaseHead.astro .
В документации Astro есть отличный раздел с описанием того, как развернуть собственный сайт Astro на различных платформах и их особенностях.
По умолчанию сайт будет создан (см. раздел «Команды» выше) в каталоге /dist .
Эта тема была вдохновлена Hexo Theme Cactus.
Массачусетский технологический институт
