Tailwind Nextjs 入门博客

[!警告] 这是模板版本 1 的 README。它因历史原因被保留，但不再受支持。它也可以作为 GitHub 警告的一个很好的示例。有关实际文档，请参阅 GitHub 仓库。

这是一个基于 Next.js 和 Tailwind CSS 的博客入门模板。可能是目前功能最丰富的 Next.js markdown 博客模板。开箱即用地配置了最新技术，让技术写作变得轻松。易于配置和自定义。完美替代现有的 Jekyll 和 Hugo 个人博客。

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

遇到问题？请查看 FAQ 页面并搜索过往问题。如果之前没有提出过，请随时开启一个新问题。

功能请求？请查看过去的讨论，看是否之前已经提出过。否则，请随时开启一个新的讨论话题。欢迎所有想法！

示例

演示博客 - 本仓库
我的个人博客 - 修改为自动生成带日期的博客文章
Aloisdg 的烹饪书 - 包含图片和食谱！
GautierArcin 使用 next translate 的演示 - 包含 mdx 文章的翻译，源代码
David Levai 的数字花园 - 自定义设计并添加了邮件订阅
Thinh's Corner - 自定义布局带粘性侧边目录

正在使用此模板？请随时创建 PR 并将您的博客添加到此列表中。

动机

我想将现有的博客迁移到 Nextjs 和 Tailwind CSS，但没有现成的易用模板，所以我决定创建一个。设计改编自 Tailwindlabs 博客。

我希望它几乎与流行的博客模板（如 beautiful-jekyll 和 Hugo Academic）一样功能丰富，但结合了 React 生态系统的最佳实践和当前 Web 开发的最佳实践。

功能特性

使用 Tailwind 3.0 和主色调属性轻松自定义样式
接近完美的 Lighthouse 评分 - Lighthouse 报告
轻量级，首次加载 JS 为 45kB，在生产构建中使用 Preact
移动端友好视图
浅色和深色主题
使用 Fontsource 自托管字体
支持 plausible、simple analytics 和谷歌分析
MDX - 在 markdown 文档中编写 JSX！
通过 rehype-prism-plus 实现服务端语法高亮、行号和行高亮
通过 KaTeX 支持数学公式显示
通过 rehype-citation 支持引用和参考文献
通过 next/image 自动图片优化
使用 mdx-bundler 灵活检索数据
支持标签 - 每个独特的标签将拥有自己的页面
支持多作者
博客模板
目录 (TOC) 组件
支持博客文章的嵌套路由
支持 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（站点相关信息）
如果要使用任何分析提供商或除 giscus 之外的评论解决方案，请在 next.config.js 中修改内容安全策略。
个性化 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 主题。

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 相关的配置。如果您想从其他域加载脚本、图片等，则需要调整内容安全策略。

文章

Frontmatter

Frontmatter 遵循 Hugo 的标准。

目前支持 10 个字段。

title (必需)
date (必需)
tags (必需，可以是空数组)
lastmod (可选)
draft (可选)
summary (可选)
images (可选，如果未提供，则默认为 siteMetadata 配置中的 socialBanner)
authors (可选列表，应对应于 `data/authors` 中的文件名。如果未指定，则使用 `default`)
layout (可选列表，应对应于 `data/layouts` 中的文件名)
canonicalUrl (可选，用于 SEO 的文章规范 URL)

以下是文章 frontmatter 的示例：

---
title: 'Tailwind Nexjs 入门博客介绍'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', '指南']
draft: false
summary: '正在寻找一个高性能、开箱即用的模板，包含所有最佳的网页技术来支持您的博客需求？来看看 Tailwind Nextjs 入门博客模板。'
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 来引导一篇新文章。

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

部署

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）也提供替代解决方案 - 请参阅其文档以获取更多信息。

支持

正在使用此模板？通过在 GitHub 上给个星标、分享您自己的博客并在 Twitter 上喊话，或者成为项目赞助者来支持这项工作。

许可证