1. 項(xiàng)目概述為什么選擇 React 來搭建博客在技術(shù)社區(qū)混了十幾年我見過無數(shù)種搭建博客的方式。從最早的 WordPress 到后來的靜態(tài)生成器如 Hexo、Hugo再到各種云服務(wù)和 SaaS 平臺(tái)選擇多到讓人眼花繚亂。但最近幾年我身邊越來越多的開發(fā)者包括我自己都開始轉(zhuǎn)向用 React 這樣的現(xiàn)代前端框架來親手打造博客。這不僅僅是為了“炫技”背后其實(shí)有一整套非常實(shí)際的考量。首先“屬于自己的博客”這幾個(gè)字是關(guān)鍵。用 WordPress 這類現(xiàn)成系統(tǒng)你確實(shí)能快速上線但你的博客本質(zhì)上是在別人的規(guī)則和模板里跳舞。主題定制深度有限性能優(yōu)化受制于插件數(shù)據(jù)遷移更是頭疼。而用 React 從零開始你的博客就是你的代碼你的數(shù)據(jù)你的設(shè)計(jì)。你可以精確控制每一個(gè)像素的渲染實(shí)現(xiàn)任何天馬行空的交互效果從底層構(gòu)建極致的訪問速度和用戶體驗(yàn)。這對(duì)于希望建立個(gè)人技術(shù)品牌、展示前端能力或者單純享受創(chuàng)造過程的開發(fā)者來說吸引力是巨大的。其次技術(shù)棧的深度契合。React 的組件化思想與博客的內(nèi)容結(jié)構(gòu)天然匹配。一篇文章可以是一個(gè)Post組件側(cè)邊欄、導(dǎo)航欄、評(píng)論框都可以是獨(dú)立的、可復(fù)用的組件。這種開發(fā)模式讓代碼結(jié)構(gòu)異常清晰維護(hù)和擴(kuò)展起來得心應(yīng)手。更重要的是你可以無縫集成整個(gè)現(xiàn)代前端生態(tài)用react-markdown或MDX來優(yōu)雅地渲染和交互式地編寫文章用react-router-dom實(shí)現(xiàn)無刷新頁(yè)面切換帶來應(yīng)用般的流暢體驗(yàn)用Context API或狀態(tài)管理庫(kù)來全局管理主題、用戶偏好。你學(xué)到的 React 技能在這里能得到最直接、最完整的實(shí)踐。最后是對(duì)未來的掌控力。你的博客不再依賴某個(gè)特定平臺(tái)或服務(wù)的存續(xù)。數(shù)據(jù)Markdown 文件掌握在自己手里部署可以選 Vercel、Netlify 等免費(fèi)且強(qiáng)大的平臺(tái)也可以放在自己的服務(wù)器上。技術(shù)棧的選型、功能的迭代完全由你決定。當(dāng)你想添加一個(gè)“暗黑模式切換”或者集成一個(gè) WebGL 背景動(dòng)畫時(shí)你不會(huì)被“主題不支持”或“插件沖突”所阻擋。所以這個(gè)項(xiàng)目標(biāo)題 “React-blog 搭建屬于自己的博客” 背后是一套完整的、面向開發(fā)者的、追求自主與極致的建站方案。它適合有一定 React 基礎(chǔ)希望擁有一個(gè)完全定制化、高性能、可作為技術(shù)名片的前端開發(fā)者。接下來我將拆解整個(gè)搭建過程從設(shè)計(jì)思路到一行行代碼分享我趟過的所有坑和積累的所有技巧。2. 核心架構(gòu)設(shè)計(jì)與技術(shù)選型在動(dòng)手寫代碼之前花點(diǎn)時(shí)間把架構(gòu)想清楚能省去后期無數(shù)重構(gòu)的麻煩。一個(gè)典型的 React 博客雖然看起來簡(jiǎn)單但麻雀雖小五臟俱全我們需要為內(nèi)容管理、路由、樣式、部署等環(huán)節(jié)做出合理的選擇。2.1 內(nèi)容管理方案Markdown 即一切博客的核心是內(nèi)容。如何處理和存儲(chǔ)文章內(nèi)容是第一個(gè)關(guān)鍵決策。對(duì)于技術(shù)博客我強(qiáng)烈推薦“基于文件系統(tǒng)的 Markdown”方案。為什么是 MarkdownMarkdown 語法簡(jiǎn)單專注于寫作本身任何文本編輯器都能打開。它既是源碼又能被輕松轉(zhuǎn)換為 HTML。相比于維護(hù)一個(gè)數(shù)據(jù)庫(kù)如 MySQL和一個(gè)后臺(tái)管理系統(tǒng)將文章寫成.md文件并放在項(xiàng)目目錄里例如/posts管理起來直觀得多。版本控制Git可以完美追蹤每篇文章的修改歷史。如何實(shí)現(xiàn)我們需要一個(gè)工具在構(gòu)建時(shí)或運(yùn)行時(shí)將 Markdown 轉(zhuǎn)換為 React 組件。這里有幾個(gè)主流選擇靜態(tài)站點(diǎn)生成SSG在構(gòu)建時(shí)npm run build將 Markdown 轉(zhuǎn)換為 HTML。這是性能最好的方案因?yàn)橛脩粼L問時(shí)直接得到靜態(tài) HTML。Next.js是這個(gè)領(lǐng)域的王者它內(nèi)置了getStaticProps和getStaticPaths等函數(shù)能極其優(yōu)雅地處理基于文件系統(tǒng)的博客。Vite 生態(tài)下也有vite-plugin-md等插件可以實(shí)現(xiàn)類似效果?？蛻舳虽秩綜SR在瀏覽器中動(dòng)態(tài)讀取和解析 Markdown 文件。這需要將.md文件作為資源引入并使用react-markdown或marked庫(kù)進(jìn)行解析。這種方式更動(dòng)態(tài)但首屏加載和 SEO 稍弱可通過一些技術(shù)手段彌補(bǔ)?；旌戏桨笇?duì)于博客我?guī)缀鯚o條件推薦SSG。Next.js 是首選因?yàn)樗鼮椴┛皖?SSG 場(chǎng)景做了大量?jī)?yōu)化開箱即用。如果你的項(xiàng)目非常輕量或想用純 Vite可以選擇方案2但要做好 SEO 和性能優(yōu)化。實(shí)操心得不要一開始就追求復(fù)雜的內(nèi)容管理系統(tǒng)CMS。用文件管理 Markdown簡(jiǎn)單粗暴且有效。當(dāng)你的文章達(dá)到幾百篇需要協(xié)作或更復(fù)雜的內(nèi)容模型時(shí)再考慮接入無頭 CMS如 Strapi、Contentful也不遲。初期用文件系統(tǒng)能讓你更專注于寫作和前端開發(fā)本身。2.2 前端框架與工具鏈核心框架React 18。使用最新的特性如函數(shù)組件和 Hooks。構(gòu)建工具/框架首選Next.js (App Router)。它不僅僅是構(gòu)建工具更是一個(gè)全?？蚣?。其 App Router 對(duì) SSG、路由、布局、API 路由的支持是目前最成熟、最符合直覺的。它的Image組件能自動(dòng)優(yōu)化圖片對(duì)博客的頁(yè)面性能提升巨大。備選Vite React Router。如果你想要極致的構(gòu)建速度和更少的“魔法”Vite 是絕佳選擇。你需要手動(dòng)配置路由React Router DOM v6和 SSG 插件如vite-plugin-ssg。這給了你更多的控制權(quán)但也需要處理更多配置。樣式方案Tailwind CSS我的強(qiáng)烈推薦。它的工具類理念能讓你以驚人的速度實(shí)現(xiàn)設(shè)計(jì)且最終生成的 CSS 體積極小。對(duì)于需要高度定制樣式的個(gè)人博客來說效率提升不是一點(diǎn)半點(diǎn)。CSS Modules / Styled-components如果你更習(xí)慣傳統(tǒng)的 CSS 隔離或 CSS-in-JS它們也是可靠的選擇。但考慮到博客的樣式復(fù)雜度通常不高Tailwind 的性價(jià)比最高。代碼與語法高亮react-syntax-highlighter或highlight.js的 React 封裝。配合一個(gè)喜歡的主題如atom-one-dark能讓代碼塊賞心悅目。圖標(biāo)使用react-icons庫(kù)它集成了 Font Awesome、Feather、Heroicons 等多個(gè)流行圖標(biāo)集按需引入非常方便。2.3 項(xiàng)目結(jié)構(gòu)與數(shù)據(jù)流設(shè)計(jì)一個(gè)清晰的項(xiàng)目結(jié)構(gòu)是長(zhǎng)期維護(hù)的基石。我推薦如下結(jié)構(gòu)以 Next.js App Router 為例my-react-blog/ ├── app/ # Next.js App Router 主目錄 │ ├── globals.css # 全局樣式 (如果使用 Tailwind這里是 tailwind 指令) │ ├── layout.js # 根布局 (導(dǎo)航欄、頁(yè)腳等公共部分) │ ├── page.js # 首頁(yè) │ ├── blog/ │ │ ├── page.js # 博客列表頁(yè) │ │ └── [slug]/ │ │ └── page.js # 博客文章詳情頁(yè) (動(dòng)態(tài)路由) │ └── about/ │ └── page.js # 關(guān)于頁(yè)面 ├── components/ # 可復(fù)用組件 │ ├── Header.jsx │ ├── Footer.jsx │ ├── Layout.jsx │ └── Blog/ │ ├── PostList.jsx │ └── PostContent.jsx ├── lib/ # 工具函數(shù)、配置 │ ├── posts.js # 處理文章數(shù)據(jù)的函數(shù) (讀取文件、解析 Frontmatter) │ └── utils.js ├── posts/ # 你的所有 Markdown 文章 │ ├── welcome.md │ └── react-hooks-deep-dive.md ├── public/ # 靜態(tài)資源 (圖片、favicon等) └── package.json數(shù)據(jù)流很簡(jiǎn)單lib/posts.js提供getAllPosts()和getPostBySlug(slug)函數(shù)。在列表頁(yè) (app/blog/page.js) 調(diào)用getAllPosts()獲取所有文章元數(shù)據(jù)標(biāo)題、日期、摘要等渲染成列表。在詳情頁(yè) (app/blog/[slug]/page.js) 通過params.slug獲取文章標(biāo)識(shí)調(diào)用getPostBySlug(slug)獲取該文章的完整內(nèi)容和元數(shù)據(jù)然后渲染。3. 從零開始的詳細(xì)搭建步驟我們以Next.js 14 (App Router)和Tailwind CSS這個(gè)黃金組合為例一步步搭建。這是目前個(gè)人認(rèn)為最順暢、最強(qiáng)大的 React 博客技術(shù)棧。3.1 初始化項(xiàng)目與基礎(chǔ)配置首先確保你的 Node.js 版本在 18.17 或以上。# 使用 Next.js 官方腳手架創(chuàng)建項(xiàng)目 npx create-next-applatest my-react-blog # 交互式提示中按如下選擇或確認(rèn) # - TypeScript: Yes (推薦獲得更好的類型提示) # - ESLint: Yes # - Tailwind CSS: Yes (這是我們選的樣式方案) # - src/ directory: No (我們使用默認(rèn)的 App Router 結(jié)構(gòu)) # - App Router: Yes (必須) # - Customize the default import alias: No (默認(rèn)即可) cd my-react-blog安裝一些我們后續(xù)需要的額外依賴npm install gray-matter react-markdown remark-gfm # gray-matter: 用于解析 Markdown 文件頭部的 YAML Frontmatter元數(shù)據(jù) # react-markdown: 將 Markdown 字符串渲染為 React 組件 # remark-gfm: 支持 GitHub Flavored Markdown表格、刪除線、任務(wù)列表等3.2 創(chuàng)建文章數(shù)據(jù)結(jié)構(gòu)與解析工具在項(xiàng)目根目錄創(chuàng)建/posts文件夾并寫下你的第一篇文章welcome.md--- title: 歡迎來到我的React博客 date: 2024-05-27 excerpt: 這是我的第一篇博客記錄用React和Next.js搭建個(gè)人站點(diǎn)的全過程。 coverImage: /images/posts/welcome-cover.jpg tags: [React, Next.js, 博客] --- ## 你好世界 這是我的第一篇用 **Markdown** 寫的博客。 代碼高亮展示 javascript function greet(name) { console.log(Hello, ${name}!); } greet(Reader);列表項(xiàng)1列表項(xiàng)2這是一段引用。注意頂部的 --- 包裹的部分是 **Frontmatter**用來定義文章的元數(shù)據(jù)。 接下來創(chuàng)建 /lib/posts.js 文件編寫文章讀取和解析的邏輯 javascript import fs from fs; import path from path; import matter from gray-matter; // 定義 posts 目錄的絕對(duì)路徑 const postsDirectory path.join(process.cwd(), posts); export function getSortedPostsData() { // 獲取 /posts 下的所有文件名 const fileNames fs.readdirSync(postsDirectory); const allPostsData fileNames.map((fileName) { // 移除 .md 后綴得到 slug (文章ID) const slug fileName.replace(/\.md$/, ); // 讀取 Markdown 文件內(nèi)容 const fullPath path.join(postsDirectory, fileName); const fileContents fs.readFileSync(fullPath, utf8); // 使用 gray-matter 解析 Frontmatter const matterResult matter(fileContents); // 將 slug 和數(shù)據(jù)組合在一起 return { slug, ...matterResult.data, // 這里包含 title, date, excerpt, tags 等 }; }); // 按日期排序 return allPostsData.sort((a, b) { if (a.date b.date) { return 1; } else { return -1; } }); } export function getAllPostSlugs() { const fileNames fs.readdirSync(postsDirectory); // 返回 Next.js 動(dòng)態(tài)路由所需的參數(shù)格式 return fileNames.map((fileName) ({ params: { slug: fileName.replace(/\.md$/, ), }, })); } export async function getPostData(slug) { const fullPath path.join(postsDirectory, ${slug}.md); const fileContents fs.readFileSync(fullPath, utf8); // 解析 Frontmatter 和內(nèi)容 const matterResult matter(fileContents); // 可選這里可以使用 remark 或 unified 生態(tài)將 Markdown 內(nèi)容轉(zhuǎn)換為 HTML 字符串 // 但我們選擇在組件中使用 react-markdown 進(jìn)行渲染更靈活。 // 將 slug 和數(shù)據(jù)組合 return { slug, content: matterResult.content, // 原始的 Markdown 內(nèi)容字符串 ...matterResult.data, }; }注意事項(xiàng)getSortedPostsData和getAllPostSlugs會(huì)在構(gòu)建時(shí)next build執(zhí)行因此可以使用 Node.js 的fs模塊。getPostData也可能在構(gòu)建時(shí)調(diào)用用于 SSG所以沒問題。3.3 實(shí)現(xiàn)核心頁(yè)面與組件1. 博客列表頁(yè) (app/blog/page.js):這個(gè)頁(yè)面負(fù)責(zé)展示所有文章的摘要列表。import Link from next/link; import { getSortedPostsData } from /lib/posts; export default async function BlogPage() { // 在 App Router 中頁(yè)面組件默認(rèn)是 Server Component // 我們可以直接使用 async 函數(shù)來獲取數(shù)據(jù) const allPostsData getSortedPostsData(); return ( div classNamecontainer mx-auto px-4 py-8 h1 classNametext-4xl font-bold mb-8所有文章/h1 div classNamespace-y-6 {allPostsData.map(({ slug, date, title, excerpt, tags }) ( article key{slug} classNameborder-b border-gray-200 pb-6 Link href{/blog/${slug}} classNamegroup h2 classNametext-2xl font-semibold text-blue-600 group-hover:text-blue-800 transition-colors {title} /h2 /Link p classNametext-sm text-gray-500 mt-1{date}/p p classNametext-gray-700 mt-2{excerpt}/p div classNamemt-3 flex flex-wrap gap-2 {tags?.map((tag) ( span key{tag} classNameinline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded {tag} /span ))} /div /article ))} /div /div ); }2. 博客文章詳情頁(yè) (app/blog/[slug]/page.js):這是動(dòng)態(tài)路由頁(yè)面[slug]對(duì)應(yīng)文章的文件名。import { getPostData, getSortedPostsData } from /lib/posts; import ReactMarkdown from react-markdown; import remarkGfm from remark-gfm; import { Prism as SyntaxHighlighter } from react-syntax-highlighter; import { atomDark } from react-syntax-highlighter/dist/esm/styles/prism; // 生成靜態(tài)參數(shù)告訴 Next.js 哪些 [slug] 需要預(yù)渲染 export async function generateStaticParams() { const posts getSortedPostsData(); return posts.map((post) ({ slug: post.slug, })); } export default async function BlogPostPage({ params }) { const { slug } params; const postData await getPostData(slug); // 處理 Markdown 中的代碼高亮 const components { code({ node, inline, className, children, ...props }) { const match /language-(\w)/.exec(className || ); return !inline match ? ( SyntaxHighlighter style{atomDark} language{match[1]} PreTagdiv {...props} {String(children).replace(/\n$/, )} /SyntaxHighlighter ) : ( code className{className} {...props} {children} /code ); }, }; return ( article classNamecontainer mx-auto px-4 py-8 max-w-3xl header classNamemb-10 h1 classNametext-4xl font-bold{postData.title}/h1 p classNametext-gray-500 mt-2{postData.date}/p {postData.tags ( div classNamemt-4 flex flex-wrap gap-2 {postData.tags.map((tag) ( span key{tag} classNamebg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full {tag} /span ))} /div )} /header {/* 使用 react-markdown 渲染文章主體內(nèi)容 */} div classNameprose prose-lg max-w-none ReactMarkdown remarkPlugins{[remarkGfm]} components{components} {postData.content} /ReactMarkdown /div /article ); }3. 創(chuàng)建布局與公共組件 (app/layout.js和/components):修改app/layout.js來包含全局的導(dǎo)航和頁(yè)腳。import ./globals.css; import Header from /components/Header; import Footer from /components/Footer; export const metadata { title: 我的React博客, description: 一個(gè)使用Next.js和React搭建的個(gè)人技術(shù)博客, }; export default function RootLayout({ children }) { return ( html langzh-CN body classNamemin-h-screen flex flex-col bg-gray-50 Header / main classNameflex-grow{children}/main Footer / /body /html ); }創(chuàng)建components/Header.jsx:import Link from next/link; export default function Header() { return ( header classNamesticky top-0 z-50 w-full border-b bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 div classNamecontainer mx-auto flex h-16 items-center justify-between px-4 div classNameflex items-center gap-6 Link href/ classNametext-xl font-bold 我的博客 /Link nav classNamehidden md:flex items-center gap-6 Link href/ classNametext-gray-600 hover:text-gray-900 transition 首頁(yè) /Link Link href/blog classNametext-gray-600 hover:text-gray-900 transition 博客 /Link Link href/about classNametext-gray-600 hover:text-gray-900 transition 關(guān)于 /Link /nav /div {/* 這里未來可以放主題切換按鈕或搜索框 */} div classNameflex items-center gap-4 button classNametext-sm搜索/button /div /div /header ); }創(chuàng)建components/Footer.jsx:export default function Footer() { const currentYear new Date().getFullYear(); return ( footer classNameborder-t bg-white py-8 div classNamecontainer mx-auto px-4 text-center text-gray-600 p? {currentYear} 我的React博客. 保留所有權(quán)利。/p p classNamemt-2 text-sm 由 a hrefhttps://nextjs.org classNametext-blue-500 hover:underlineNext.js/a 和 a hrefhttps://react.dev classNametext-blue-500 hover:underlineReact/a 強(qiáng)力驅(qū)動(dòng)。 /p /div /footer ); }3.4 樣式優(yōu)化與交互增強(qiáng)Tailwind CSS 與 Typography我們已經(jīng)在app/globals.css中引入了 Tailwind。為了讓博客文章的可讀性更好可以安裝tailwindcss/typography插件它提供了一組精美的文章內(nèi)容樣式。npm install -D tailwindcss/typography然后在tailwind.config.js中啟用它/** type {import(tailwindcss).Config} */ module.exports { content: [ ./pages/**/*.{js,ts,jsx,tsx,mdx}, ./components/**/*.{js,ts,jsx,tsx,mdx}, ./app/**/*.{js,ts,jsx,tsx,mdx}, ], theme: { extend: {}, }, plugins: [ require(tailwindcss/typography), // 添加這一行 ], };之后在文章詳情頁(yè)的容器上添加prose類如上面代碼中的prose prose-lg max-w-none它會(huì)自動(dòng)為 Markdown 生成的 HTML 元素如標(biāo)題、段落、列表、引用塊等應(yīng)用一套精心設(shè)計(jì)的樣式。暗黑模式Tailwind 原生支持暗黑模式。首先在tailwind.config.js中設(shè)置darkMode: class。然后在app/layout.js中通過一個(gè)按鈕和狀態(tài)來切換html元素上的dark類。這里涉及客戶端交互需要將相關(guān)組件標(biāo)記為use client并使用useState。這是一個(gè)非常值得添加的功能能極大提升用戶體驗(yàn)。4. 部署、優(yōu)化與進(jìn)階功能4.1 部署到生產(chǎn)環(huán)境部署是讓博客上線的最后一步也是最簡(jiǎn)單的一步感謝 VercelNext.js 的創(chuàng)建者和 Netlify 這樣的平臺(tái)。部署到 Vercel (推薦):將你的代碼推送到 GitHub、GitLab 或 Bitbucket。訪問 vercel.com 用你的 Git 提供商賬號(hào)登錄。點(diǎn)擊 “Add New...” - “Project”導(dǎo)入你的博客倉(cāng)庫(kù)。保持所有默認(rèn)配置Vercel 會(huì)自動(dòng)檢測(cè)到這是 Next.js 項(xiàng)目。點(diǎn)擊 “Deploy”。幾十秒后你的博客就會(huì)有一個(gè)*.vercel.app的在線地址了。Vercel 會(huì)自動(dòng)為每次 Git 推送觸發(fā)新的構(gòu)建和部署。你還可以綁定自己的自定義域名。實(shí)操心得在next.config.js中可以配置images.unoptimized true如果你使用外部圖床如云存儲(chǔ)。但強(qiáng)烈建議使用 Next.js 自帶的Image組件并配合 Vercel 部署其自動(dòng)的圖片優(yōu)化功能格式轉(zhuǎn)換、尺寸調(diào)整、懶加載能顯著提升頁(yè)面加載速度。4.2 核心性能與 SEO 優(yōu)化圖片優(yōu)化務(wù)必使用next/image組件。它會(huì)自動(dòng)處理響應(yīng)式圖片、懶加載并在 Vercel 上提供 WebP 等現(xiàn)代格式轉(zhuǎn)換。元標(biāo)簽Next.js App Router 的metadata對(duì)象在layout.js和page.js中導(dǎo)出能自動(dòng)生成頁(yè)面的title和meta description。為每篇博客文章動(dòng)態(tài)生成這些信息至關(guān)重要。// 在 app/blog/[slug]/page.js 中 export async function generateMetadata({ params }) { const post await getPostData(params.slug); return { title: ${post.title} | 我的博客, description: post.excerpt, openGraph: { // 用于社交媒體分享預(yù)覽 title: post.title, description: post.excerpt, images: [post.coverImage], }, }; }靜態(tài)生成我們目前的做法generateStaticParams已經(jīng)實(shí)現(xiàn)了 SSG這是性能的基石。確保所有頁(yè)面都在構(gòu)建時(shí)生成靜態(tài) HTML。字體與資源加載使用next/font來優(yōu)化谷歌字體或自定義字體的加載避免布局偏移。4.3 常見問題與排查技巧實(shí)錄在搭建和運(yùn)行過程中你幾乎一定會(huì)遇到下面這些問題問題1getSortedPostsData報(bào)錯(cuò) “fs module not found” 或 “window is not defined”。原因在客戶端組件中嘗試使用 Node.js 的fs模塊或者在構(gòu)建/服務(wù)端渲染時(shí)訪問了瀏覽器對(duì)象window。解決確保所有涉及文件系統(tǒng)操作fs或只在構(gòu)建時(shí)需要的邏輯僅存在于 Server Component 或getStaticProps/getServerSidePropsPages Router中。我們的lib/posts.js只在page.jsServer Component和generateStaticParams中被調(diào)用這是正確的。如果需要在客戶端獲取文章列表比如搜索應(yīng)該構(gòu)建一個(gè) API 路由來提供數(shù)據(jù)。問題2Markdown 中的圖片無法顯示。原因react-markdown默認(rèn)不會(huì)處理圖片路徑。Markdown 中的會(huì)被直接渲染成img src/images/cover.jpg altalt /但/images目錄可能不對(duì)。解決自定義react-markdown的img組件?；蛘吒扑]將圖片放入public目錄如public/images/posts/然后在 Markdown 中引用絕對(duì)路徑/images/posts/cover.jpg。如果使用外鏈圖床則直接使用完整 URL。問題3代碼塊高亮樣式丟失或太大。原因react-syntax-highlighter的樣式文件可能沒有正確導(dǎo)入或者導(dǎo)入的樣式對(duì)象體積過大。解決確保你從特定的風(fēng)格路徑導(dǎo)入如import { atomDark } from react-syntax-highlighter/dist/esm/styles/prism;注意是esm路徑適合 Next.js。如果擔(dān)心包體積可以考慮使用prism-react-renderer它更輕量且與 Prism 主題兼容。問題4部署后訪問文章詳情頁(yè)出現(xiàn) 404。原因動(dòng)態(tài)路由[slug]對(duì)應(yīng)的頁(yè)面沒有在構(gòu)建時(shí)生成?？赡苁莋enerateStaticParams函數(shù)沒有正確返回所有可能的slug或者構(gòu)建后你添加了新文章但沒有重新部署。解決檢查generateStaticParams函數(shù)確保它基于posts目錄下的所有文件生成params。在 Vercel 上每次向 Git 主分支推送都會(huì)觸發(fā)自動(dòng)構(gòu)建和部署。對(duì)于新增的文章你需要推送更改以觸發(fā)新的構(gòu)建。問題5想添加評(píng)論功能怎么辦方案不建議自己從頭開發(fā)。集成第三方服務(wù)是最高效的方式。Giscus基于 GitHub Discussions適合技術(shù)博客。用戶用 GitHub 賬號(hào)評(píng)論。Utterances基于 GitHub Issues同樣輕量。Disqus老牌服務(wù)功能全但有廣告。實(shí)現(xiàn)創(chuàng)建一個(gè)components/Comments.jsx客戶端組件在其中動(dòng)態(tài)引入上述服務(wù)的腳本或組件。在文章詳情頁(yè)底部引入這個(gè)Comments組件即可。4.4 進(jìn)階功能拓展思路當(dāng)基礎(chǔ)博客運(yùn)行起來后你可以考慮添加以下功能讓它更具個(gè)性化和實(shí)用性全文搜索使用Algolia或FlexSearch。在構(gòu)建時(shí) (next build) 遍歷所有文章提取標(biāo)題、摘要、正文內(nèi)容生成搜索索引文件或上傳到 Algolia。前端實(shí)現(xiàn)一個(gè)搜索框組件來查詢這個(gè)索引。文章分類與標(biāo)簽頁(yè)在lib/posts.js中寫一個(gè)函數(shù)統(tǒng)計(jì)所有文章的標(biāo)簽并去重。然后創(chuàng)建一個(gè)/tags頁(yè)面和/tags/[tag]動(dòng)態(tài)頁(yè)面來展示擁有某個(gè)標(biāo)簽的所有文章。RSS 訂閱在構(gòu)建時(shí)生成一個(gè)feed.xml文件?？梢詫懸粋€(gè)腳本 (scripts/generate-rss.js)讀取所有文章按照 RSS 格式拼接 XML 字符串寫入public/feed.xml。然后在package.json的build腳本前添加一個(gè)prebuild腳本來執(zhí)行它。站點(diǎn)地圖類似 RSS在構(gòu)建時(shí)生成sitemap.xml列出所有頁(yè)面的 URL幫助搜索引擎索引。數(shù)據(jù)分析接入U(xiǎn)mami自托管、隱私友好或Google Analytics需合規(guī)配置來了解訪客行為。搭建一個(gè) React 博客的過程就像在精心打磨一件數(shù)字作品。從最初的空文件夾到最終一個(gè)功能完整、性能優(yōu)異、設(shè)計(jì)獨(dú)特的網(wǎng)站上線每一步都充滿了創(chuàng)造的樂趣和解決問題的成就感。這個(gè)項(xiàng)目不僅給了你一個(gè)展示自我的空間更是一次對(duì)現(xiàn)代前端開發(fā)流程的深度實(shí)踐。最重要的是你擁有了完全的控制權(quán)未來無論想添加什么新奇的功能都不會(huì)受到限制。