Tailwind Nextjs 入门博客

CAUTION

这是模板第 1 版本的 README。保留此文件仅供历史参考，但不再提供支持。它也作为 Github Alert 的一个很好的示例。如需实际文档，请参考 Github 仓库。

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

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

遇到问题？查看 FAQ 页面并搜索过往 issue。如果之前没有发布过相关 issue，请随时创建新的 issue。

功能请求？查看过往讨论，看看是否之前已经提出过。否则，请随时开始新的讨论线程。欢迎所有想法！

示例

演示博客 - 本仓库
我的个人博客 - 修改为自动生成带日期的博客文章
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 和 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 订阅、站点地图等！

示例文章

快速开始指南

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 - 替换为你自己的 logo。

data/blog - 替换为你自己的博客文章。

public/static - 存储图片和 favicon 等资源。

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（可选，文章的规范 URL 用于 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
---

创建

运行 node ./scripts/compose.js 来创建一篇新文章。

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

部署

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 上给个 star、分享你自己的博客、在 Twitter 上点赞或成为项目赞助商来支持这项工作。

Tailwind Nextjs 入门博客介绍