astro ink

Astro Ink — это минимальная тема, созданная для удовлетворения минималистичных потребностей блогов на основе уценки. Он поставляется почти со всеми основными компонентами Astro, которые могут вам понадобиться при создании легких, производительных личных блогов, которые по умолчанию ориентированы на использование меньшего количества Javascript.

Он во многом вдохновлен темой Hugo's Ink и стремится оставаться легким, но при этом обеспечивает основу для красивого минималистичного блога.

Функции

• Minimal, Crisp, Markdown-Blog Ready всегда обновляется до последней версии Astro (в настоящее время версии 2.x ).
• Svelte Ready — стремясь оставаться легким, производительным и более доступным с точки зрения Astro, Svelte используется для интерактивных компонентов, таких как переключатель тем.
• Модульность . Структура очень модульная: компоненты выполняют только одну работу, и одну работу хорошо.
• Коллекция контента Astro 2.0 + динамические страницы . Он готов к работе с Next.js, как и динамические страницы, для поддержки системы классификации на основе тегов с результатами с разбивкой на страницы, все настраиваемые.
• Темный режим и цветовые коды . Он поддерживает темный режим и более 6 цветовых режимов, выбранных с помощью tailwind.config.js . Вы можете передать THEME_KEY с помощью dev /команды разработки или build , например: THEME_KEY=purpleheart astro build/dev чтобы изменить используемую цветовую тему. Все доступные темы можно найти в файле Tailwind.theme.config.js. Чтобы настроить раздел блога, добавьте любой из классов prose-{color} Tailwind Typography, как указано здесь.
• Netlify CMS — добавьте/редактируйте/обновите все сообщения в каталоге /blog , посетив your-site.netlify.com/admin , например: astro-ink.netlify.app/admin, используя свои учетные данные Netlify. Для этого требуется Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration) и Git Gateway (https://app.netlify.com/sites/your-site/settings/identity). #services) включено.
• Будущие публикации (с действиями Github). Создавайте публикации в каталоге /src/drafts с будущей date в формате YYYY-MM-DD и позвольте специально созданному действию Github позаботиться об их автоматической публикации в указанную вами дату. Вы можете настроить интервал проверки в Github Action.
• Поиск на стороне клиента . Позвольте вашим пользователям быстро находить сообщения в вашем блоге с помощью функции поиска на стороне клиента. Лунр.js
• Посмотреть счетчик feat. Redis/Upstash Redis — настройте хост Redis, разместите его URL-адрес подключения в консоли вашего хостинг-провайдера (Vercel, Netlify и т. д.) или в файле .env (локальная разработка), раскомментируйте код подключения здесь и разверните. На вашем сайте имеется динамический счетчик просмотров. См. .env.example, чтобы понять различные значения среды, которые необходимо настроить.
• Медиа-страница с поддержкой каналов YT . Легко отображайте контент вашего канала YT на медиа-странице, просто указав идентификатор своего канала в константе ytChannelId файла конфигурации. При желании отключите миниатюры изображений из списка видео вашего канала YT, установив для USE_MEDIA_THUMBNAIL значение false .
• Карты авторов . Легко добавляйте карточки авторов на основе публикаций или всего сайта, которые включают кнопку подписки в Твиттере, установив для USE_AUTHOR_CARD значение true внутри файла конфигурации.
• Наложение тематических изображений . При желании вы можете включить наложения, которые могут добавить красивый тематический градиент поверх изображений ваших сообщений, установив для USE_POST_IMG_OVERLAY значение true внутри файла конфигурации.

Как начать?

Просто клонируйте этот шаблон и начните работать со своим клоном. В вашем распоряжении все распространенные команды NPM, такие как dev , build и т. д. Обратитесь к package.json, чтобы просмотреть список всех доступных команд.

Примечание. Используйте npx degit one-aalam/astro-ink чтобы клонировать шаблон без какой-либо истории git .

Примечание. Этот шаблон по умолчанию генерирует выходные данные server (готовы к SSR). Если вам нужны static сборки

• изменить output с server на static в astro.config.js
• удалить adapter: vercel()
• удалить API счетчика просмотров
• установите для USE_VIEW_STATS false внутри config.ts

Примечание. Перед первым запуском npm run dev :

• создайте файл .env , запустив mv .env.example .env (если вы используете дистрибутив Linux или Mac)
• установите переменную SITE_URI как SITE_URI=http://localhost:4321 ( где 4321 — это порт, на котором работает ваш проект )

Построен с использованием Astro Ink

• jamesperkins.dev — Персональный сайт разработчика, инструктора YouTube Джеймса Р. Перкинса
• highlandcows.github.io Личный блог Ника Джейкоба

знаете сайт, созданный с помощью Astro Ink? Дайте мне знать в Твиттере

Хотите изучить Astro, создавая Ink?

Первоначально эта тема была создана на основе сначала альфа, а затем бета-версии Astro Framework. Если вы только начинаете изучать Astro , вы действительно можете изучить Astro одновременно создавая эту самую тему, следуя серии написанных мной блогов, в которых вы научитесь основам Astro!

Зайдите на aalam.in/blog и узнайте

• Как настроить Astro и запустить его с основными настройками по умолчанию для стилизации, прототипирования и поэтапного развертывания.
• Управление презентационными компонентами и создание Astro-страниц.
• Передача локальных и удаленных данных на страницы Astro.
• Добавляем в Astro интерактивность там, где без нее совершенно не обойтись.
• Создание управляемых данными динамических страниц и результатов с разбивкой на страницы в Astro
• Создайте контент своего сайта Astro с помощью CMS на базе Git.