tailwind nextjs starter blog
v2.3.0
这是sward.js，tailwind CSS博客入门模板。版本2基于带有React Server组件的下一个应用程序目录，并使用ContentLayer来管理Markdown内容。
可能是最富含功能的Next.js Markdown博客模板。易于配置和可自定义。完美地替代了现有的Jekyll和Hugo个人博客。
查看下面的文档以开始。
面临问题？检查常见问题解答页面并在过去的问题上进行搜索。如果以前没有发布，请随时打开新问题。
功能请求？检查过去的讨论以查看以前是否已经提出。否则，请随时开始一个新的讨论主题。所有想法都受到欢迎！
注意：这些是使用不同的框架或对代码库进行重大更改的社区贡献的叉子 - 不正式支持。
Astro替代方案 - 尾风Astro模板。
混音运行替代方案 - 尾风混合 - 运行起动器博客模板。
国际化支持 - 带有I18N和源代码的模板。
/resume页面上渲染简历PDF。 （源代码）/snippets ， /books页，添加ProfileCard ， CareerTimeline组件等等。使用模板？随意创建PR并将您的博客添加到此列表中。
感谢用户社区和模板的贡献者！我们不再在这里接受新的博客列表。如果您已从版本1更新到版本2，请随时从此列表中删除您的博客，并将其添加到上面的列表中。
mdx-embed ，查看计数，读取分钟等。我想将现有的博客移植到NextJ和Tailwind CSS上，但是没有简单的框模板可以使用，因此我决定创建一个。设计改编自TailWindlabs博客。
我希望它几乎与《美丽的Jekyll》和《雨果学术》等流行的博客模板一样丰富，但具有最佳的React生态系统和当前的Web开发的最佳实践。
npx degit ' timlrx/tailwind-nextjs-starter-blog 'siteMetadata.js （与网站相关的信息）next.config.js中修改内容安全策略。authors/default.md （主要作者）projectsData.tsheaderNavLinks.ts自定义导航链接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主题，例如Prism主题。
contentlayer.config.ts contentLayer的配置，包括内容源的定义和使用的MDX插件。有关更多信息，请参见ContentLayer文档。
components/MDXComponents.js通过在此处指定自己的JSX代码或React组件。然后，您可以直接在.mdx或.md文件中使用它们。默认情况下，传递了一个自定义链接， next/image组件，目录组件和新闻通讯表单。请注意，该组件应默认导出，以避免Next.js的现有问题。
layouts - 页面中使用的主要模板：
PostLayout ， PostSimple和PostBanner 。 PostLayout是带有元和作者信息的默认2列布局。 PostSimple是PostLayout的简化版本，而PostBanner具有横幅图像。ListLayout ，模板版本1中使用搜索栏和ListLayoutWithTags中使用的布局，该版本当前在版本2中使用，该版本省略了搜索栏，但包含一个侧边栏，其中包含有关标签的信息。 app - 路由的页面。阅读下一条文档以获取更多信息。
next.config.js与Next.js相关的配置如果要从其他域中加载脚本，图像等，则需要调整内容安全策略。
内容是使用ContentLayer建模的，该内容允许您定义自己的内容架构并使用它来生成类型的内容对象。有关更多信息，请参见ContentLayer文档。
前肌遵循雨果的标准。
请参阅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
---
已经提供了一个pages.yml 。只需在： Settings > Pages > Build and deployment > Source中选择“ github操作”。
部署模板的最简单方法是在Vercel上部署。请查看下一个。JS部署文档以获取更多详细信息。
NetLify's Next.js Runtime配置启用网站上的Key Next.js功能，而无需其他配置。 NetLify生成无服务器功能，该功能将处理Next.js功能，例如服务器端渲染（SSR）页面（SSR）页面，增量静态再生（ISR）， next/images ，等等。
有关建议的配置值和更多详细信息，请参见NETLIFY上的Next.js。
跑步：
$ 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将在out build（或仅/robots.txt ）中打印"/myblog/robots.txt"如果yarn dev ，即：在Local Host：3000）
提示
另外，要继续使用next/image ，您可以使用替代图像优化提供商UNOPTIMIZED=1例如Imgix，Cloudinary或Akamai。有关更多详细信息，请参见图像优化文档。
考虑删除静态构建中无法使用的以下功能：
next.config.js评论headers() 。api文件夹和组件。在技术上不是必需的，并且该站点将成功构建，但是API不能因为服务器端功能而使用。 kbar搜索？使用模板？通过在Github上给明星，分享您自己的博客并在Twitter上大喊大叫或成为项目赞助商来支持这一努力。
麻省理工学院©Timothy Lin
