Tailwind Nextjs Starter Blog

[!注意] 这是模板第一版（Version 1）的 README。出于历史原因保留，但已不再提供支持。它同时也是 Github Alert 的一个不错示例。有关最新文档，请参阅 Github 仓库。

这是一个基于 Next.js 和 Tailwind CSS 的博客入门模板。它可能是功能最丰富的 Next.js Markdown 博客模板。开箱即用，配置了最新技术，让技术写作变得轻松。它易于配置和定制，是替代现有 Jekyll 和 Hugo 个人博客的绝佳选择。

查看下面的文档以开始使用。

遇到问题？请查看 FAQ 页面并搜索之前是否已有人提出。如果没有，请随时开一个新的 issue。

有功能需求？请检查之前的讨论，看是否已有人提出。如果没有，请随时发起新的讨论。我们欢迎所有想法！

示例

Demo Blog - 本仓库
My personal blog - 经过修改，可自动生成带有日期的博客文章
Aloisdg's cookbook - 包含图片和菜谱！
GautierArcin's demo with next translate - 包括 mdx 文章的翻译，源代码
David Levai's digital garden - 定制设计并添加邮件订阅
Thinh's Corner - 定制布局带有固定的侧边目录

如果使用此模板，欢迎提交 PR 将您的博客添加到此列表。

创作初衷

我希望将我现有的博客移植到 Nextjs 和 Tailwind CSS，但市面上没有易于使用的开箱即用模板，所以我决定自己创建一个。设计改编自 Tailwindlabs 博客。

我希望它能像 beautiful-jekyll 和 Hugo Academic 等流行的博客模板一样功能丰富，但同时具备 React 生态系统的最佳实践和当前网页开发的前沿技术。

特性

通过 Tailwind 3.0 和主色属性轻松定制样式
接近完美的 Lighthouse 评分 - Lighthouse 报告
轻量级，首次加载 JS 仅 45kB，在生产构建中使用 Preact
移动设备友好视图
浅色和深色主题
使用 Fontsource 自托管字体
支持 Plausible、Simple Analytics 和 Google Analytics
MDX - 在 Markdown 文档中编写 JSX！
通过 rehype-prism-plus 实现带有行号和行高亮的服务器端语法高亮
支持通过 KaTeX 显示数学公式
通过 rehype-citation 支持引用和参考文献
通过 next/image 自动优化图片
通过 mdx-bundler 实现灵活的数据检索
支持标签 - 每个独特的标签都会有自己的页面
支持多作者
博客模板
目录组件
支持博客文章的嵌套路由
支持 Mailchimp、Buttondown、Convertkit、Klaviyo、Revue、Emailoctopus 和 Beehiiv 的新闻通讯组件
支持 giscus、utterances 或 Disqus
项目页面
预配置的安全头
SEO 友好，支持 RSS Feed、站点地图等！

示例文章

快速入门指南

JS（官方支持）- npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git 或 TS（社区支持）- npx degit timlrx/tailwind-nextjs-starter-blog#typescript
修改 siteMetadata.js （站点相关信息）
如果你想使用除 giscus 之外的任何分析提供商或评论解决方案，请修改 next.config.js 中的内容安全策略。
修改 authors/default.md (main author)
修改 projectsData.ts
修改 headerNavLinks.ts 以自定义导航链接
添加博客文章
Vercel 部署

发行 Development

首先，运行开发服务器：

npm start
# or
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 - 要添加其他图标，只需从 Simple Icons 复制一个 SVG 文件并在 index.js 中进行映射。其他图标使用 heroicons。
components/MDXComponents.js - 在这里指定你自己的 JSX 代码或 React 组件。然后你就可以在 .mdx 或 .md 文件中直接调用它们。默认情况下，会传递一个自定义的链接和图像组件。
layouts - 页面中使用的主要模板。
pages - 路由到的页面。阅读 Next.js 文档了解更多信息。
next.config.js - 与 Next.js 相关的配置。如果你想从其他域加载脚本、图像等，需要调整内容安全策略。

文章 Posts

文件头（Frontmatter）

Frontmatter 遵循 Hugo 的标准。
目前支持 10 个字段。

title (required)
date (required)
tags (required, can be empty array)
lastmod (optional)
draft (optional)
summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config)
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)

以下是一篇文章的 frontmatter 示例：

---
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
---

编译 Compose

运行 node ./scripts/compose.js 来引导一篇新文章。

按照交互式提示生成一篇带有预填充 frontmatter 的文章。

部署 Deploy

Vercel
部署此模板最简单的方法是使用由 Next.js 的创建者提供的 Vercel 平台。查看 Next.js 部署文档了解更多详情。

Netlify / GitHub Pages / Firebase 等
由于此模板使用 next/image 进行图片优化，因此在部署到 Netlify 或 GitHub Pages 等其他流行的静态托管网站时需要进行额外配置。必须使用 Imgix、Cloudinary 或 Akamai 等替代的图片优化提供商。或者，将 next/image 组件替换为标准的 <img> 标签。有关更多详情，请参阅 next/image 文档。

新闻通讯组件中使用的 API 路由无法在静态站点导出中使用。你需要使用一个表单 API 端点提供商，并相应地替换新闻通讯组件中的路由。Netlify 等其他托管平台也提供替代解决方案 - 请参阅它们的文档了解更多信息。

支持 Support

正在使用此模板吗？通过在 GitHub 上点赞、分享你的博客并在 Twitter 上宣传，或者成为项目赞助者来支持这项努力。

Tailwind Nextjs Starter Blog 介绍