Скачать tailwind nextjs starter blog - tailwind nextjs starter blog Source Code Скачать

tailwind nextjs starter blog

AI Исходный код

v2.3.0

Скачать

Tailwind-nextjs-banner

Tailwind NextJs Blage Blog

Это следующий. Версия 2 основана на следующем каталоге приложений с компонентом сервера React и использует ContentLayer для управления содержимым маркировки.

Наверное, самый богатый функциями шаблон блога Next.js. Легко настраивается и настраивается. Идеально в качестве замены существующих индивидуальных блогов Джекилла и Хьюго.

Проверьте документацию ниже, чтобы начать.

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

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

Вариации

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

Astro Alternative - Tailwind Astro Template.

Альтернатива REMIX-RUN-Шаблон блогов, работающий на хвостоте.

Поддержка интернационализации - шаблон с I18N и исходным кодом.

Примеры v2

Демо -блог - это репо
Мой личный блог - измененный на автоматические сообщения в блоге с датами
Блог Кархдо - блог Кархдо - приключение кодирования Кархдо (исходный код)
Блог Ben.codes - личный блог Benoit о разработке программного обеспечения (исходный код)
Блог TSIX - фронт -инженер используется для записи некоторых знаний в работе и изучении中文
Блог Soto - более персональный личный веб -сайт, обновленный с V1 (исходный код)
Блог Прабху - личный веб -сайт Прабху с блогом (исходный код)
Блог Рабби Хасана - личный блог Рабби Хасана о полной разработке стека с облаком (исходный код)
Enscribe.dev - личный блог Enscribe; Шенаниганы кибербезопасности, Frontend Webdev и т. Д. (Исходный код)
Dalelarroder.com - личный веб -сайт Дейла Ларрадера обновлен с V1 (исходный код)
thetalhatahir.com - личный блог Талха Тахира. Добавлена Статья Миниатюры, карта LinkedIn, контент красивых героев, технологические смайлики.
homing.so - личный блог Homing о том, что он изучает (исходный код)
Блог ZS1M - личный блог ZS1M для записи и обмена техническим контентом ежедневного обучения (исходный код)
Dariuszwozniak.net - блог о разработке программного обеспечения (исходный код)
Dreams.plus - сайт блога для некоторых мыслей и записей для жизни и технологий.
Блог Francisaguilar.co - личный блог Фрэнсиса Агилара, в котором рассказывается о технологиях, фитнесе и личном развитии.
Min71 Dev Blog - личный блог о блокчейне, разработке и т. Д. (Исходный код)
Блог Bryce Yu - личный блог Брайса Ю -Юри о распределенной системе, базе данных и веб -разработке. (исходный код)
Удаленный стартап Senpai Anime Series Веб -сайт - целевая страница для аниме -серии Remote Startup Senpai.
Секретная база - личный блог JAC HSU. Рассказывает о технологиях, мысли и жизни в целом.
Zsebinformatikus - информационный блог Superhighway Guide.
Блог Антона Моргунова - рассказывая о науке без упрощений или о том, почему теоретическая и вычислительная химия - это круто.
Блог Hans - личный блог Hans, фронтальная технология, галерея и дневник путешествий 中文. (исходный код)
Cub3y0nd's Portfolio - Cub3y0nd Исследование кибербезопасности 「中文」
Лондонский технологический разговор - подкаст, исследующий технологические тенденции и опыт жизни экспатриантов. - 日本語
Блог Crud Flow - технический блог об искусственном интеллекте, облачной инженерии, науке о данных и личном развитии
Блог Trillium - модифицирован для рендеринга резюме PDF на странице /resume . (исходный код)
Технический блог Фрэнка - личный блог Фрэнка о разработке программного обеспечения и технологии. (исходный код)
Блог Вуджи: 旅行者计划 - Персональный цифровой сад Вуджи (исходный код)
Блог Xiaodong - личный блог Xiaodong о технологиях и жизни. 「中文」 (исходный код)
Azurtelier.com - личный веб -сайт Amos для технологий, музыки, иллюстраций ИИ и т. Д. [Английский/中文] (исходный код)
Joshaines.com - личный веб -сайт для Джоша Хейнса. (исходный код)
- Блог Джигу - личный блог Джигу о технологии, крипто, Голанг и жизни. 「中文」
Andrewsam.xyz - личный веб -сайт Эндрю с использованием Shadcn, Prisma, Mongodb, Auth.js, страница резюме, компоненты сроки пользовательского опыта и технологии. (исходный код)
Портфолио Рулли Дамара Путра - личный блог и портфолио Rully.
blog.taoluyuan.com 套路猿 - личный технический блог, который поддерживает многофункциональную переключение. 「中英」
Тексты песен Decode.com - Веб -сайт песен, предлагающий оригинальные тексты, романизацию и английские переводы с настраиваемыми параметрами просмотра.
Bmacharia.com - Технический блог Бенсона Мачарии о кибербезопасности и управлении ИТ.
armujahid.me - личный блог Абдула Рауфа о технологиях и случайных вещах.
leohuynh.dev - ?? Блог Leo's Dev - истории, идеи и идеи. Добавить /snippets , /books страницы, добавить ProfileCard , компоненты CareerTimeline и многое другое.
Блог OpenSeSats - общественная благотворительная организация 501 (c) (3), которая направлена на устойчивое финансирование бесплатных и открытых источников. (исходный код)
Блог Pressles - Советы по планированию социальных сетей, стратегии и обновления продуктов для создателей контента. (Ссылка на проект)
Блог Yawdev - IT -агентство / разработка программного обеспечения. Блог о технологиях и бизнесе (ссылка на проект)
Инженерные примечания - Jonas Vetterle Personal Websity & Blog. Я пишу статьи о разработке программного обеспечения, которые меня интересуют, включая ИИ и квантовые вычисления
Screenger.dev - личный веб -сайт как портфолио и блог. Документирование моего учебного путешествия и некоторых гидов.
Блог Kezhenxu94 - ведение блога о Dev, Tips & Cracts, учебные пособия и многое другое.

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

Примеры v1

v1-blogs-showcase.webm

Благодаря сообществу пользователей и участников шаблона! Мы больше не принимаем здесь новые списки блога здесь. Если вы обновили от версии 1 до версии 2, не стесняйтесь удалить свой блог из этого списка и добавить его в приведенный выше.

Кулинарная книга Aloisdg - с фотографиями и рецептами!
Демонстрация Gautierarcin со следующим переводом - включает в себя перевод сообщений MDX, исходный код
Цифровой сад Дэвида Леваи - индивидуальный дизайн и добавленные подписки по электронной почте
thvu.dev - добавлен mdx-embed , View Count, чтение минут и многое другое.
irvin.dev - личный сайт Ирвина Лин. Добавлено встроение YouTube.
Kirillso.com - личный блог и веб -сайт.
Loolssharpe.com - Блог Tincre's Main Company
blog.b00st.com - Блог главного музыкального продвижения B00ST.com
Astrosaurus.me - Личный блог Эфраим Атта -Данкана
dhanrajsp.me - личный сайт и блог Дханраджа.
blog.r00ks.io - личный блог Остина Рукс (исходный код).
honghong.me - личный веб -сайт Тсхонга (исходный код)
Marceloformentao.dev - Персональный веб -сайт Marcelo Formentionão (исходный код).
abiraja.com - С помощью компонента фрагмента кода JS -кода!
bpiggin.com - личный блог Бена Пиггина
maqib.cn - блог китайских застройщиков 狂奔小马的博客 (源码)
Ambilena.com - Блог Electronic Music & Imprint для будущих музыкантов.
0xchai.io - личный блог Чай
Techipedia - простое постепенное веб -приложение для блогов с настраиваемой кнопкой установки и главной панелью прогресса
reumence.com - цифровой сад Рувима Рауза
Axolo.co/blog - Инженерные новости и обновления Axolo.co (с предварительным просмотром изображений для статьи на главной странице)
musing.vercel.app - личный блог Парта Десаи (исходный код)
Onyourmental.com - веб -сайт Кертиса Варкупа для вашего ментального подкаста (исходный код)
Cwarcup.com - Личный веб -сайт и блог Curtis Warcup (исходный код).
ondiek -elijah.me - веб -сайт и блог Ondiek Elijah (исходный код).
Jmalvarez.dev - Личный блог Хосе Мигеля Альвареса (исходный код)
Justingosses.com - личный веб -сайт и блог Джастина Госсеса (исходный код)
https://bitoflearning-9a57.fly.dev/ - личный блог Sangeet Agarwal, переизданный на ремикс с использованием инди -стека (исходный код)
Raphaelchelly.com - Личный веб -сайт и блог Raphaël Chelly (исходный код)
Kaveh.page - личный блог Каве Тегерани. Добавлены каталог тегов, карта профиля, время для чтения в каталоге сообщений и т. Д.
Drakerossman.com - Блог Дрейка Россмана о Никсосе, ржавчине, архитектуре программного обеспечения и управлении инженерией, а также об общих размышлениях.
meamenu.com - целевая страница и блог о продукте, начиная с этого шаблона. Он также использует Framer-Motion для анимации, шаблонов пользовательских макетов, Waline для комментариев в блоге и форм Primereact [ITA]
giovanni.orciuolo.it - Личный веб -сайт Giovanni Orciuolo, блог и все.

Мотивация

Я хотел перенести свой существующий блог в NextJS и Taillid CSS, но не было легкого из шаблона коробки, поэтому я решил создать его. Дизайн адаптирован из блога TailwindLabs.

Я хотел, чтобы он был почти таким же богатым, как популярные шаблоны блогов, такие как Beautiful-Jekyll и Hugo Academic, но с лучшими из экосистемы React и лучших практик веб-разработки.

Функции

Next.js с типографией
ContentLayer для управления логикой контента
Легкая настройка стиля с Tailwind 3.0 и основным цветным атрибутом
MDX - напишите JSX в документах Markdown!
Почти Perfect Mythouse Score - Lighthouse Report
Легкий, 85 КБ первой нагрузки JS
Мобильный вид
Легкая и темная тема
Оптимизация шрифта со следующим/шрифтом
Интеграция с Плинием, которая обеспечивает:
- Многочисленные варианты аналитики, включая Umami, Plausible, Simple Analytics, Posthog и Google Analytics
- Комментарии через Giscus, высказывания или дисквиса
- API и компонент информационного бюллетеня с поддержкой MailChimp, Buttondown, ConvertKit, Klaviyo, Revue, EmailoCtopus и Beehiiv
- Поиск палитры команд с Kbar или Algolia
Синтаксис на стороне сервера с номерами строк и выделением линий через Rehype-Prism-Plus
Математический дисплей, поддерживаемый через Katex
Поддержка цитирования и библиографии через регип-цитирование
Оповещения GitHub через замечательный-github-blockquote-alert
Автоматическая оптимизация изображения через следующее/изображение
Поддержка тегов - каждый уникальный тег будет его собственной страницей
Поддержка нескольких авторов
3 разных макета блога
2 разных макетов списка блога
Поддержка вложенного маршрутизации сообщений в блоге
Проекты страница
Предварительно сконфигурированные заголовки безопасности
SEO дружелюбный с RSS Feed, Sitemaps и многое другое!

Образец сообщений

Руководство по уценке
Узнайте больше об изображениях в next.js
Экскурсия по математике
Простая сетка изображения MDX
Пример длинной прозы
Пример вложенного маршрутного поста

Quick Start Guide

Клонировать репо

npx degit ' timlrx/tailwind-nextjs-starter-blog '

Персонализировать siteMetadata.js (информация, связанная с сайтом)
Измените политику безопасности контента в next.config.js , если вы хотите использовать другого поставщика аналитики или комментирующее решение, отличное от Giscus.
Персонализировать authors/default.md (главный автор)
Модифицировать projectsData.ts
Изменить headerNavLinks.ts для настройки навигационных ссылок
Добавьте сообщения в блоге
Развернуть на Vercel

Установка

yarn

Обратите внимание, что если вы используете Windows, вам может потребоваться запустить:

 $env :PWD = $( Get-Location ) .Path

Разработка

Во -первых, запустите сервер разработки:

yarn dev

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

Редактировать макет в app или контент в data . С перезагрузкой в прямом эфире, страницы автоматически обновляются, когда вы их редактируете.

Расширить / настраивать

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 - конфигурация и таблицы стилей, которые можно изменить, чтобы изменить общий вид и ощущение сайта.

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

contentlayer.config.ts - Конфигурация для ContentLayer, включая определение источников контента и используемых плагинов MDX. Смотрите документацию ContentLayer для получения дополнительной информации.

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

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

В настоящее время доступно 3 макета после: PostLayout , PostSimple и PostBanner . PostLayout - это макет столбца по умолчанию 2 с информацией Meta и автора. PostSimple - это упрощенная версия PostLayout , а в PostBanner есть изображение баннера.
Существует 2 макета списка блога: ListLayout , макет, используемый в версии 1 шаблона с строкой поиска и ListLayoutWithTags , в настоящее время используется в версии 2, которая пропускает панель поиска, но включает в себя боковую панель с информацией по тегам.

app - Страницы для пути к. Прочтите следующую документацию. Для получения дополнительной информации.

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

Почта

Контент моделируется с использованием ContentLayer, который позволяет вам определять собственную схему контента и использовать ее для генерации типичных объектов контента. Смотрите документацию ContentLayer для получения дополнительной информации.

Фронтмел

FrontMatter следует стандартам Хьюго.

Пожалуйста, обратитесь к contentlayer.config.ts для актуального списка поддерживаемых полей. Поддерживаются следующие поля:

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Вот пример передней части поста:

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
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
---

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

GitHub Pages

Рабочий процесс pages.yml уже предоставлен. Просто выберите «Действия GitHub» в: Settings > Pages > Build and deployment > Source .

Вертел

Самый простой способ развернуть шаблон - развернуть на Vercel. Ознакомьтесь с документацией по развертыванию следующей.js для получения более подробной информации.

NetLify

NetLify Next.js Runtime Configure Configure Onables Key Next.js функциональности на вашем веб -сайте без необходимости дополнительных конфигураций. NetLify генерирует без серверных функций, которые будут обрабатывать функции следующих next/images

См. Next.js на NetLify для предложенных значений конфигурации и более подробной информации.

Службы статического хостинга (GitHub Pages / S3 / Firebase и т. Д.)

Бегать:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Затем разверните out папку или запустите npx serve out ее локально.

Важный

При развертывании с помощью базового пути URL, например, https://example.org/myblog вам нужен дополнительный BASE_PATH Shell-var для команды сборки:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> В вашем коде, ${process.env.BASE_PATH || ''}/robots.txt будет печатать "/myblog/robots.txt" в сборке out (или только /robots.txt , если yarn dev , то есть: на Localhost: 3000)

Кончик

В качестве альтернативы UNOPTIMIZED=1 , чтобы продолжить использование next/image , вы можете использовать альтернативный поставщик оптимизации изображений, такого как Imgix, Cloudaric или Akamai. Смотрите документацию по оптимизации изображения для получения более подробной информации.

Подумайте о удалении следующих функций, которые нельзя использовать в статической сборке:

Комментарий headers() от next.config.js .
Удалите папку api и компоненты, которые вызывают функцию на стороне сервера, такую как компонент рассылки. Технически не требуется, и сайт будет успешно построить, но API нельзя использовать, поскольку они являются серверными функциями.