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
