这是一个Next.js，顺风CSS博客首发模板。可能是功能最丰富的 nextjs markdown 博客模板。开箱即用，配备最新技术，让技术写作变得轻而易举。易于配置和定制。完美替代现有的 Jekyll 和 Hugo 个人博客。
查看下面的文档以开始使用。
面临问题？检查常见问题页面并搜索过去的问题。如果以前没有发布过，请随意打开一个新问题。
功能要求？检查过去的讨论，看看以前是否已经提出过。否则，请随意开始一个新的讨论线程。欢迎所有想法！
例子
- 演示博客- 这个 repo
- 我的个人博客- 修改为自动生成带有日期的博客文章
- Aloisdg 的食谱- 有图片和食谱！
- GautierArcin 的带有 next translate 的演示- 包括 mdx 帖子的翻译、源代码
- David Levai 的数字花园- 定制设计和添加电子邮件订阅
- Thinh's Corner -带有粘性边目录的自定义布局
使用模板？随意创建一个 PR 并将您的博客添加到此列表中。
动机
我想将我现有的博客移植到 Nextjs 和 Tailwind CSS，但没有简单的开箱即用模板，所以我决定创建一个。设计改编自Tailwindlabs 博客。
我希望它几乎像beautiful-jekyll和Hugo Academic这样的流行博客模板一样功能丰富，但具有最好的 React 生态系统和当前 Web 开发的最佳实践。
特征
- 使用Tailwind 2.0和主要颜色属性轻松定制样式
- 近乎完美的灯塔分数 -灯塔报告
- 轻量级，39kB 首次加载 JS，在生产构建中使用 Preact
- 适合移动设备的视图
- 明暗主题
- 支持合理、简单的分析和谷歌分析
- MDX - 在 Markdown 文档中编写 JSX！
- 服务器端语法高亮显示行号和行高亮通过rehype-prism-plus
- 通过KaTeX支持数学显示
- 通过next/image自动优化图像
- 使用mdx-bundler灵活检索数据
- 支持标签 - 每个独特的标签将是它自己的页面
- 支持多作者
- 博客模板
- 目录组件
- 支持博客文章的嵌套路由
- 支持giscus，话语或disqus
- 项目页面
- 使用 RSS 提要、站点地图等对 SEO 友好！
示例帖子
快速入门指南
- JS（官方支持）-
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git或 TS（社区支持）-npx degit timlrx/tailwind-nextjs-starter-blog#typescript - 个性化
siteMetadata.js（网站相关信息） - 个性化
authors/default.md（主要作者） - 调整
projectsData.js - 修改
headerNavLinks.js自定义导航链接 - 添加博客文章
- 在 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- 包含可修改的顺风样式表，以改变网站的整体外观和感觉。
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 文档了解更多信息
邮政
头条
Frontmatter 遵循Hugo 的标准。
目前支持 7 个字段。
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`)
下面是一个帖子的 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
---
撰写
运行node ./scripts/compose.js以引导新帖子。
按照交互式提示生成带有预填充前言的帖子。
部署
Vercel
部署模板的最简单方法是使用Next.js 创建者提供的Vercel 平台。查看Next.js 部署文档了解更多详细信息。
Netlify / Github Pages / Firebase 等。
由于模板next/image用于图像优化，因此必须进行额外配置才能部署到其他流行的静态托管网站，如Netlify或Github Pages。必须使用替代图像优化提供商，例如 Imgix、Cloudinary 或 Akamai。或者，用next/image标准<img>标签替换组件。有关更多详细信息，请参阅next/image文档。