Tailwind Nextjs Starter Blog

CAUTION

Это README версии 1 шаблона. Он сохранен в исторических целях, но больше не поддерживается. Также служит хорошим примером Github Alert. Актуальную документацию смотрите в репозитории GitHub.

Это стартовый шаблон для блога на Next.js и Tailwind CSS. Пожалуй, самый функциональный шаблон блога на Next.js с поддержкой markdown. Поставляется с предустановленными современными технологиями, чтобы сделать техническое писательство легким. Легко настраивается и кастомизируется. Идеально подходит как замена существующим блогам на Jekyll и Hugo.

Ознакомьтесь с документацией ниже, чтобы начать работу.

Возникли проблемы? Проверьте страницу FAQ и поищите решение в существующих вопросах. Не стесняйтесь создать новый issue, если ваш вопрос еще не обсуждался.

Есть предложение по функционалу? Проверьте обсуждения, возможно, оно уже поднималось. В противном случае, начните новое обсуждение. Все идеи приветствуются!

Примеры

Демо-блог - этот репозиторий
Мой личный блог - модифицирован для автоматической генерации постов с датами
Кулинарная книга Aloisdg - с фотографиями и рецептами!
Демо GautierArcin с next-translate - включает перевод mdx-постов, исходный код
Цифровой сад David Levai - кастомизированный дизайн с подпиской по email
Уголок Thinh - кастомизированный макет с прилипающим оглавлением

Используете этот шаблон? Не стесняйтесь создать PR и добавить свой блог в этот список.

Мотивация

Я хотел перенести свой существующий блог на Next.js и Tailwind CSS, но не нашел подходящего готового шаблона, поэтому решил создать свой. Дизайн адаптирован из блога Tailwindlabs.

Я хотел, чтобы он был почти таким же функциональным, как популярные шаблоны для блогов, такие как beautiful-jekyll и Hugo Academic, но с лучшими практиками экосистемы React и современной веб-разработки.

Возможности

Простая настройка стилей с помощью Tailwind 3.0 и основного цвета
Почти идеальный результат в Lighthouse - отчет Lighthouse
Легковесный, 45 КБ при первой загрузке JS, использует Preact в production-сборке
Адаптивный дизайн для мобильных устройств
Светлая и темная тема
Самостоятельно размещаемые шрифты с Fontsource
Поддержка plausible, simple analytics и Google Analytics
MDX - пишите JSX в документах markdown!
Подсветка синтаксиса на стороне сервера с номерами строк и выделением строк через rehype-prism-plus
Поддержка отображения математических формул через KaTeX
Поддержка цитирования и библиографии через rehype-citation
Автоматическая оптимизация изображений через next/image
Гибкое получение данных с mdx-bundler
Поддержка тегов - каждый уникальный тег будет отдельной страницей
Поддержка нескольких авторов
Шаблоны блогов
Компонент оглавления
Поддержка вложенной маршрутизации записей блога
Компонент рассылки с поддержкой Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus и Beehiiv
Поддержка giscus, utterances или disqus
Страница проектов
Предустановленные заголовки безопасности
SEO-оптимизация с RSS-лентой, картой сайта и другим!

Примеры постов

Краткое руководство

JS (официальная поддержка) - npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git или TS (поддержка сообщества) - npx degit timlrx/tailwind-nextjs-starter-blog#typescript
Настройте siteMetadata.js (информация о сайте)
Измените политику безопасности контента в next.config.js, если хотите использовать любого другого провайдера аналитики или решения для комментариев, кроме giscus.
Настройте authors/default.md (основной автор)
Измените projectsData.ts
Измените headerNavLinks.ts для настройки навигационных ссылок
Добавьте записи в блог
Разверните на Vercel

Разработка

Сначала запустите сервер разработки:

npm start
# или
npm run dev

Откройте http://localhost:3000 в браузере, чтобы увидеть результат.

Вы можете начать редактировать страницу, изменив pages/index.js. Страница будет автоматически обновляться при изменении файла.

Расширение / Настройка

data/siteMetadata.js - содержит большую часть информации о сайте, которую следует изменить в соответствии с вашими потребностями.

data/authors/default.md - информация об авторе по умолчанию (обязательно). Дополнительных авторов можно добавить как файлы в data/authors.

data/projectsData.js - данные, используемые для создания стилизованных карточек на странице проектов.

data/headerNavLinks.js - навигационные ссылки.

data/logo.svg - замените на свой логотип.

data/blog - замените на свои записи блога.

public/static - хранилище ресурсов, таких как изображения и фавиконы.

tailwind.config.js и css/tailwind.css - содержат таблицу стилей Tailwind, которую можно изменить для изменения внешнего вида сайта.

css/prism.css - управляет стилями, связанными с блоками кода. Не стесняйтесь настраивать и использовать предпочитаемую тему prismjs, например prism themes.

components/social-icons - чтобы добавить другие иконки, просто скопируйте файл SVG с Simple Icons и сопоставьте их в index.js. Другие иконки используют heroicons.

components/MDXComponents.js - передайте свой собственный JSX-код или React-компонент, указав его здесь. Затем вы можете вызывать их напрямую в файле .mdx или .md. По умолчанию передаются пользовательские компоненты ссылок и изображений.

layouts - основные шаблоны, используемые на страницах.

pages - страницы для маршрутизации. Подробнее читайте в документации Next.js.

next.config.js - конфигурация, связанная с Next.js. Вам нужно адаптировать политику безопасности контента, если вы хотите загружать скрипты, изображения и т.д. с других доменов.

Запись

Frontmatter

Frontmatter соответствует стандартам Hugo.

В настоящее время поддерживается 10 полей.

title (обязательно)
date (обязательно)
tags (обязательно, может быть пустым массивом)
lastmod (опционально)
draft (опционально)
summary (опционально)
images (опционально, если не указано, используется socialBanner из конфигурации siteMetadata)
authors (опциональный список, соответствующий именам файлов в `data/authors`. Используется `default`, если не указано иное)
layout (опциональный список, соответствующий именам файлов в `data/layouts`)
canonicalUrl (опционально, канонический URL для поста для SEO)

Вот пример frontmatter для записи:

---
title: 'Представляем Tailwind Nextjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Ищете производительный шаблон, готовый к использованию, со всеми современными веб-технологиями для ведения блога? Ознакомьтесь с шаблоном Tailwind Nextjs Starter Blog.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Создание записи

Запустите node ./scripts/compose.js, чтобы создать новую запись.

Следуйте интерактивным подсказкам для создания записи с предзаполненным frontmatter.

Развертывание

Vercel
Самый простой способ развернуть шаблон - использовать Vercel Platform от создателей Next.js. Подробнее см. в документации по развертыванию Next.js.

Netlify / GitHub Pages / Firebase и т.д.
Поскольку шаблон использует next/image для оптимизации изображений, для развертывания на других популярных статических хостингах, таких как Netlify или GitHub Pages, требуются дополнительные настройки. Необходимо использовать альтернативного провайдера оптимизации изображений, такого как Imgix, Cloudinary или Akamai. Либо замените компонент next/image стандартным тегом <img>. Подробнее см. в документации next/image.

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

Поддержка

Используете шаблон? Поддержите проект, поставив звезду на GitHub, поделившись своим блогом и упомянув его в Twitter или став спонсором проекта.