想從零搭一套個(gè)人博客系統(tǒng)最容易出現(xiàn)的情況不是在寫(xiě)代碼而是在選型上反復(fù)橫跳——今天看框架明天看內(nèi)容管理系統(tǒng)后天又想直接套模板。我前前后后給多個(gè)朋友做過(guò)類似的博客前端最后留在我個(gè)人項(xiàng)目里的是一套沒(méi)有任何框架依賴的實(shí)現(xiàn)HTML、CSS、JavaScript 三件套加一個(gè)幾十行的構(gòu)建腳本就能完成從文章列表到詳情頁(yè)、代碼高亮、響應(yīng)式適配、靜態(tài)部署的全部流程。這篇文章我會(huì)把整套前端實(shí)現(xiàn)的完整代碼和思路拆開(kāi)講清楚適合剛接觸博客搭建、想理解博客系統(tǒng)前端到底是怎么工作的人也適合有前端基礎(chǔ)但不希望被框架束縛的朋友直接參考復(fù)現(xiàn)。1. 動(dòng)手之前先把博客前端的需求拆清楚1.1 為什么我放棄了前端框架個(gè)人博客系統(tǒng)的前端本質(zhì)上就三件事管理文章入口、展示文章列表、渲染文章正文。附帶一些標(biāo)簽、歸檔、關(guān)于頁(yè)這類補(bǔ)充頁(yè)面。它沒(méi)有復(fù)雜的用戶交互不需要數(shù)據(jù)雙向綁定不需要服務(wù)端渲染來(lái)支撐高并發(fā)絕大多數(shù)時(shí)候就是一個(gè)人寫(xiě)、一群人讀。為這個(gè)場(chǎng)景引入前端框架換來(lái)的往往是幾百 MB 的 node_modules、看不懂的抽象層和升級(jí)依賴時(shí)的不確定感。我用表格整理過(guò)原生方案和框架方案的差異放在這里供參考對(duì)比維度原生三件套前端框架方案初始門檻瀏覽器直接運(yùn)行無(wú)需構(gòu)建需要熟悉工程化工具鏈運(yùn)行依賴幾乎為零必須引入框架運(yùn)行時(shí)代碼體積可控按需編寫(xiě)即使搖樹(shù)優(yōu)化也有基礎(chǔ)體積長(zhǎng)期維護(hù)幾年后打開(kāi)仍能修改依賴升級(jí)頻繁可能出現(xiàn)兼容問(wèn)題適用場(chǎng)景內(nèi)容型網(wǎng)站、小型工具復(fù)雜交互應(yīng)用、后臺(tái)系統(tǒng)、大型協(xié)作項(xiàng)目并不是說(shuō)框架不好而是要看場(chǎng)景是否匹配。博客系統(tǒng)作為一個(gè)以內(nèi)容為核心的站點(diǎn)用戶真正關(guān)心的是文章能不能快速打開(kāi)、排版是否舒服、在手機(jī)上閱讀是否流暢。這些目標(biāo)用原生三件套完全可以達(dá)成。如果你后續(xù)計(jì)劃加入很復(fù)雜的編輯器、實(shí)時(shí)協(xié)作評(píng)論、復(fù)雜標(biāo)簽篩選系統(tǒng)那再引入框架也不遲一開(kāi)始就上框架反而妨礙你把精力放在內(nèi)容與閱讀體驗(yàn)上。1.2 目錄設(shè)計(jì)把數(shù)據(jù)和展示分開(kāi)從零動(dòng)手之前先把目錄想清楚。好的目錄結(jié)構(gòu)應(yīng)該一眼能看出什么東西放哪里。我目前維護(hù)的這套博客前端使用下面的結(jié)構(gòu)blog-front/ index.html # 首頁(yè)入口 css/ base.css # 全局樣式、變量、排版基礎(chǔ) home.css # 首頁(yè)文章列表樣式 post.css # 文章詳情頁(yè)樣式 js/ data.js # 文章元信息數(shù)據(jù)構(gòu)建時(shí)生成 markdown.js # 輕量 markdown 渲染函數(shù) router.js # hash 路由 home.js # 首頁(yè)渲染邏輯 post.js # 詳情頁(yè)渲染邏輯 posts/ # 原始文章目錄每篇一個(gè) md 文件 hello-world.md ... scripts/ build.js # 構(gòu)建腳本把 md 轉(zhuǎn)成前端要用的數(shù)據(jù) dist/ # 構(gòu)建產(chǎn)物最終部署這個(gè)目錄這個(gè)結(jié)構(gòu)的關(guān)鍵點(diǎn)是數(shù)據(jù)和展示分離。文章正文以 markdown 文件放在posts/里構(gòu)建腳本負(fù)責(zé)把 md 轉(zhuǎn)成文章數(shù)據(jù)最終給前端的是一個(gè)干凈的 JSON 或 JS 模塊。寫(xiě)新文章的人只需要關(guān)心posts/里的文件完全不需要碰前端邏輯。如果你暫時(shí)不想引入構(gòu)建腳本也可以直接把文章數(shù)據(jù)寫(xiě)在js/data.js里等文章多到管理不過(guò)來(lái)再遷移到 md 文件方案。我在項(xiàng)目開(kāi)發(fā)初期也是這么做的先跑通再優(yōu)化避免過(guò)度設(shè)計(jì)。2. 首頁(yè)骨架與文章列表先把內(nèi)容鋪出來(lái)2.1 語(yǔ)義化布局首頁(yè)的骨架結(jié)構(gòu)博客首頁(yè)的職責(zé)不是炫技而是讓訪客快速看到最新文章列表。我用的 HTML 骨架很簡(jiǎn)單但每一個(gè)標(biāo)簽都是有意圖的!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的個(gè)人博客/title link relstylesheet hrefcss/base.css link relstylesheet hrefcss/home.css /head body header classsite-header div classcontainer header-inner a classlogo href#/我的博客/a nav classmain-nav ul lia href#/首頁(yè)/a/li lia href#/about關(guān)于/a/li lia href#/archive歸檔/a/li /ul /nav /div /header main classcontainer main-content section classpost-list idpostList !-- 文章列表由 JS 渲染 -- /section /main footer classsite-footer div classcontainer footer-inner p由我手工維護(hù)文章內(nèi)容采用知識(shí)共享方式分享。/p /div /footer script srcjs/data.js/script script srcjs/router.js/script script srcjs/home.js/script /body /html語(yǔ)義化標(biāo)簽不是寫(xiě)給別人看的裝飾。header、main、section、footer這些標(biāo)簽?zāi)軒椭聊婚喿x器正確識(shí)別頁(yè)面結(jié)構(gòu)也有利于搜索引擎理解內(nèi)容層級(jí)。我在早期重構(gòu)時(shí)曾把這些全換成div結(jié)果通過(guò)無(wú)障礙檢測(cè)時(shí)被扣了分后來(lái)才改回語(yǔ)義化結(jié)構(gòu)。導(dǎo)航里的鏈接統(tǒng)一用href#/這種形式配合后面的 hash 路由使用。這樣做的好處是任何靜態(tài)托管平臺(tái)都不需要額外配置服務(wù)器回退規(guī)則用戶刷新頁(yè)面不會(huì)出現(xiàn) 404。2.2 文章列表的數(shù)據(jù)結(jié)構(gòu)文章列表頁(yè)面核心是一組元信息標(biāo)題、發(fā)布時(shí)間、摘要、標(biāo)簽、唯一標(biāo)識(shí)。我在js/data.js里用一個(gè)數(shù)組保存結(jié)構(gòu)像這樣window.ARTICLES [ { id: how-to-build-blog, title: 從零搭建個(gè)人博客系統(tǒng)的前端實(shí)現(xiàn), date: 2025-01-18, excerpt: 本文記錄了一套不依賴框架的前端實(shí)現(xiàn)方案內(nèi)容包括路由、渲染、代碼高亮與響應(yīng)式適配。, tags: [前端, 博客, 教程], cover: }, { id: markdown-renderer-basics, title: 自己寫(xiě)一個(gè)夠用的 Markdown 渲染器, date: 2025-01-05, excerpt: 很多人第一時(shí)間會(huì)去引入現(xiàn)成的解析庫(kù)但理解分塊解析的原理能讓問(wèn)題定位更容易。, tags: [Markdown, 原理] } ];id字段是文章的穩(wěn)定標(biāo)識(shí)不能使用數(shù)組下標(biāo)。因?yàn)楹罄m(xù)你可能會(huì)刪除、排序或篩選文章一旦下標(biāo)變化瀏覽器里的歷史鏈接就失效了。我一開(kāi)始也偷懶用0、1、2當(dāng)下標(biāo)后來(lái)刪了兩篇文章收藏夾里的舊鏈接全部指向錯(cuò)位內(nèi)容才老老實(shí)實(shí)給每篇文章起了獨(dú)立的字符串 id。摘要字段excerpt是從正文開(kāi)頭手動(dòng)提取的。配合標(biāo)題渲染列表卡片時(shí)摘要可以讓列表頁(yè)有呼吸感也能讓訪客在點(diǎn)擊前判斷文章是否值得讀。如果你希望減少維護(hù)成本也可以在構(gòu)建腳本里自動(dòng)截取正文前 200 個(gè)字符作為摘要。2.3 列表渲染一次性插入而非循環(huán)拼接home.js里面做的事情是把ARTICLES數(shù)組渲染成 DOM 結(jié)構(gòu)。這里有一個(gè)非常重要的性能習(xí)慣不要每遍歷一條數(shù)據(jù)就操作一次 DOM。頻繁操作 DOM 會(huì)引起瀏覽器重排重繪文章數(shù)量少時(shí)感覺(jué)不明顯上到上百篇就會(huì)明顯卡頓。function renderArticleList() { const container document.getElementById(postList); if (!container || !window.ARTICLES) return; const html window.ARTICLES.map(function(article) { const tagHtml article.tags.map(function(tag) { return span classtag escapeHtml(tag) /span; }).join(); return ( article classpost-card>function parseHash() { const hash location.hash || #/; if (hash.indexOf(#/post/) 0) { const id decodeURIComponent(hash.replace(#/post/, )); return { name: post, params: { id: id } }; } if (hash.indexOf(#/about) 0) { return { name: about }; } return { name: home }; } window.addEventListener(hashchange, handleRoute); window.addEventListener(DOMContentLoaded, handleRoute); function handleRoute() { const route parseHash(); if (route.name post) { renderPostPage(route.params.id); } else if (route.name about) { renderAboutPage(); } else { renderHomePage(); } window.scrollTo(0, 0); }parseHash把#/post/hello-world解析成{ name: post, params: { id: hello-world } }handleRoute根據(jù)路由名稱調(diào)動(dòng)對(duì)應(yīng)的渲染函數(shù)。scrollTo(0, 0)是每次切換頁(yè)面后自動(dòng)回到頂部這個(gè)細(xì)節(jié)不做的話從長(zhǎng)文章底部點(diǎn)回首頁(yè)瀏覽器會(huì)停留在原來(lái)的滾動(dòng)位置觀感非常差。3.3 Markdown 渲染先轉(zhuǎn)義再解析詳情頁(yè)最核心的工作是把 markdown 轉(zhuǎn)成 HTML。很多人第一反應(yīng)就是引入大而全的解析庫(kù)但博客場(chǎng)景里其實(shí)只需要處理標(biāo)題、段落、列表、引用、代碼塊和加粗斜體這些常見(jiàn)語(yǔ)法。我自己維護(hù)了一個(gè)輕量渲染器核心思路是逐行掃描并按塊處理。下面是我在項(xiàng)目里使用的簡(jiǎn)化版本省略了嵌套列表等邊界情況但足夠覆蓋日常寫(xiě)作function renderMarkdown(markdownText) { const lines markdownText.split(\n); let html ; let inCodeBlock false; let codeLang ; let codeLines []; function flushCode() { if (codeLines.length 0) return; const codeHtml codeLines.map(escapeHtml).join(\n); html precode classlanguage- codeLang codeHtml /code/pre; codeLines []; codeLang ; } for (let i 0; i lines.length; i) { const line lines[i]; if (line.indexOf() 0) { if (!inCodeBlock) { inCodeBlock true; codeLang line.replace(, ).trim(); } else { inCodeBlock false; flushCode(); } continue; } if (inCodeBlock) { codeLines.push(line); continue; } if (line.indexOf(### ) 0) { html h3 escapeHtml(line.slice(4)) /h3; } else if (line.indexOf(## ) 0) { html h2 escapeHtml(line.slice(3)) /h2; } else if (line.indexOf(# ) 0) { html h1 escapeHtml(line.slice(2)) /h1; } else if (line.indexOf(- ) 0) { html li escapeHtml(line.slice(2)) /li; } else if (line.trim() ) { html /li/ul; } else { html p escapeHtml(line) /p; } } if (inCodeBlock) { flushCode(); } // 把孤立的 li 包裹進(jìn) ul html html.replace(/li/g, ulli); html html.replace(/\/li\/ululli/g, /lili); html html.replace(/\/liul/g, /li); // 鏈接轉(zhuǎn)換 html convertLinks(html); return html; }這段代碼里最容易出錯(cuò)的地方是轉(zhuǎn)義順序。必須先對(duì)文本內(nèi)容做escapeHtml再去解析 markdown 語(yǔ)法標(biāo)記否則員工寫(xiě)的script示例代碼會(huì)被瀏覽器當(dāng)成真實(shí)標(biāo)簽執(zhí)行。代碼塊內(nèi)容尤其要小心我在函數(shù)里單獨(dú)維護(hù)了一個(gè)inCodeBlock狀態(tài)遇到代碼塊就原樣收集、整體轉(zhuǎn)義不做 markdown 語(yǔ)法解析這樣可以避免代碼里的#被誤解析成標(biāo)題。如果你覺(jué)得自研解析器太粗糙生產(chǎn)環(huán)境中接一個(gè)成熟的開(kāi)源 Markdown 解析庫(kù)完全合理。關(guān)鍵不是“自己寫(xiě)”或“用庫(kù)”而是你要理解解析的基本原理這樣當(dāng)渲染結(jié)果出現(xiàn)異常時(shí)你能快速判斷問(wèn)題在解析器、轉(zhuǎn)義還是 CSS。3.4 目錄生成與閱讀進(jìn)度長(zhǎng)文章的閱讀體驗(yàn)里目錄和進(jìn)度提示是兩個(gè)加分項(xiàng)。目錄可以基于渲染后的標(biāo)題生成在renderMarkdown返回的 HTML 里找出所有h2、h3提取文本和錨點(diǎn)然后渲染到側(cè)邊欄或文章頂部。錨點(diǎn)可以利用標(biāo)題文本的哈希值實(shí)現(xiàn)不過(guò)更穩(wěn)妥的方式是在生成標(biāo)題時(shí)寫(xiě)入穩(wěn)定的 id。閱讀進(jìn)度條實(shí)現(xiàn)起來(lái)也更簡(jiǎn)單監(jiān)聽(tīng)頁(yè)面滾動(dòng)讀取當(dāng)前的滾動(dòng)位置和文檔總高度計(jì)算百分比后更新進(jìn)度條寬度。代碼不超過(guò)二十行window.addEventListener(scroll, function() { const progressBar document.getElementById(readingProgress); if (!progressBar) return; const scrollTop window.scrollY; const docHeight document.documentElement.scrollHeight - window.innerHeight; const progress docHeight 0 ? Math.min(scrollTop / docHeight, 1) : 0; const percent Math.round(progress * 100); progressBar.style.width percent %; });進(jìn)度條顏色用主題色漸變寬度變化加上transition閱讀時(shí)能帶來(lái)一點(diǎn)“我在推進(jìn)”的儀式感。不過(guò)要注意監(jiān)聽(tīng)滾動(dòng)事件時(shí)沒(méi)必要在每次滾動(dòng)回調(diào)里做復(fù)雜計(jì)算上面這種輕量更新完全夠用不需要引入節(jié)流函數(shù)。4. 代碼高亮與閱讀排版決定博客質(zhì)感的分水嶺4.1 代碼高亮的接入時(shí)機(jī)技術(shù)類博客里代碼塊是絕對(duì)的主角。代碼高亮方案我選的是開(kāi)源代碼高亮腳本語(yǔ)言包按需加載體積可控。接入時(shí)有一個(gè)關(guān)鍵順序必須在 markdown 渲染完成、HTML 已經(jīng)插入頁(yè)面之后再調(diào)用高亮函數(shù)否則高亮腳本找不到需要處理的代碼塊。link relstylesheet hrefhttps://cdn.example.com/highlight/styles/default.min.css script srchttps://cdn.example.com/highlight/highlight.min.js/script script // 在頁(yè)面文章渲染完成后執(zhí)行 function highlightCode() { document.querySelectorAll(pre code).forEach(function(block) { hljs.highlightElement(block); }); } /script如果你的代碼高亮 CDN 訪問(wèn)不穩(wěn)定也可以把高亮腳本下載到本地靜態(tài)資源目錄構(gòu)建時(shí)一并輸出到dist。對(duì)于訪問(wèn)量不大的個(gè)人博客我并不推薦把所有語(yǔ)言包都打進(jìn)去按需加載你常用的幾種語(yǔ)言即可。如果博客里貼的都是 JavaScript、CSS 和 bash 片段沒(méi)必要為幾十種語(yǔ)言包多付出幾倍體積。高亮樣式要注意適配深色模式。很多高亮主題默認(rèn)底色是白色一旦頁(yè)面切換深色主題代碼塊會(huì)變成一塊亮晃晃的白板。我自己用過(guò)一種做法是淺色模式用默認(rèn)亮色主題深色模式覆蓋pre的background-color同時(shí)把文字亮度稍微壓低保證不刺眼。4.2 正文排版比寬窄更重要的是節(jié)奏代碼高亮解決的是“代碼好不好看”而正文排版決定整篇文章讀起來(lái)舒不舒服。我總結(jié)出的博客排版參數(shù)大致是這樣一組.post-content { max-width: 42rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.8; color: #2d3748; } .post-content h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; } .post-content h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; } .post-content p { margin-bottom: 1.25rem; } .post-content code { font-family: JetBrains Mono, Fira Code, Consolas, monospace; font-size: 0.9em; padding: 0.15em 0.4em; background: rgba(0, 0, 0, 0.06); border-radius: 4px; } .post-content pre code { display: block; padding: 1rem 1.25rem; overflow-x: auto; background: #1e1e2e; color: #cdd6f4; border-radius: 8px; }max-width: 42rem是我反復(fù)試出來(lái)的舒適閱讀寬度。太窄時(shí)每行字?jǐn)?shù)太少眼睛來(lái)回跳動(dòng)頻繁太寬時(shí)視線容易串行。行高 1.8 給文字留出足夠呼吸空間。正文里的行內(nèi)代碼和獨(dú)立代碼塊要區(qū)分開(kāi)行內(nèi)代碼用小圓角淺色背景獨(dú)立代碼塊則用深色背景橫向滾動(dòng)。4.3 深色模式不要搞顏色災(zāi)難深色模式的實(shí)現(xiàn)不需要引入任何插件用 CSS 變量就能干凈地完成。定義一組語(yǔ)義變量通過(guò)>:root { --bg-color: #ffffff; --text-color: #2d3748; --card-bg: #f7fafc; --border-color: #e2e8f0; } [data-themedark] { --bg-color: #1a1b26; --text-color: #cbd5e1; --card-bg: #24283b; --border-color: #334155; } body { background: var(--bg-color); color: var(--text-color); }切換按鈕綁定一個(gè)點(diǎn)擊事件修改document.documentElement的>.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .main-content { display: grid; grid-template-columns: 1fr; gap: 2rem; } media (min-width: 768px) { .main-content { grid-template-columns: 1fr 260px; } } media (min-width: 1024px) { .main-content { grid-template-columns: 1fr 320px; } }網(wǎng)格布局讓側(cè)邊欄在窄屏自動(dòng)掉到下方不需要額外調(diào)整 HTML 結(jié)構(gòu)。側(cè)邊欄的內(nèi)容通常是標(biāo)簽云、最近文章列表、關(guān)于博主的一句話。移動(dòng)端訪問(wèn)時(shí)這些東西應(yīng)該放在主內(nèi)容之后避免讓讀者先看到一堆輔助信息再看到文章。5.2 移動(dòng)端導(dǎo)航與觸摸體驗(yàn)移動(dòng)端最需要處理的是導(dǎo)航菜單。桌面端一行顯示的導(dǎo)航在手機(jī)上必須變成可以收起的抽屜菜單。我用一個(gè)按鈕切換菜單的展開(kāi)狀態(tài)配合 CSS 類名控制顯隱button classmenu-toggle idmenuToggle aria-label打開(kāi)導(dǎo)航菜單 span/spanspan/spanspan/span /button nav classmain-nav idmainNav ul lia href#/首頁(yè)/a/li lia href#/about關(guān)于/a/li lia href#/archive歸檔/a/li /ul /nav.main-nav { display: none; } .main-nav.open { display: block; } media (min-width: 768px) { .main-nav { display: block; } .menu-toggle { display: none; } }document.getElementById(menuToggle).addEventListener(click, function() { const nav document.getElementById(mainNav); nav.classList.toggle(open); });移動(dòng)端還有一個(gè)移動(dòng)端特有的坑min-height: 100vh在部分移動(dòng)瀏覽器上會(huì)把地址欄算進(jìn)去導(dǎo)致頁(yè)面底部被遮擋或滾動(dòng)異常。我的處理方式是優(yōu)先使用min-height: 100dvh同時(shí)保留100vh作為不支持dvh單位時(shí)的回退值。另外導(dǎo)航按鈕和文章卡片里的點(diǎn)擊目標(biāo)都盡量做到至少 44 像素見(jiàn)方這是手指點(diǎn)擊舒適度的最低要求。5.3 圖片和表格別讓頁(yè)面橫向滾動(dòng)文章里插入圖片是常見(jiàn)需求響應(yīng)式布局下圖片要能隨容器寬度縮放不能撐破父容器.post-content img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; }如果文章里有表格寬表格會(huì)泡到容器外面導(dǎo)致整個(gè)頁(yè)面出現(xiàn)橫向滾動(dòng)條這個(gè)問(wèn)題在手機(jī)上尤其明顯。一個(gè)簡(jiǎn)單的處理是把表格包進(jìn)可橫向滾動(dòng)的容器或者給table設(shè)置display: block; overflow-x: auto保證頁(yè)面主體不橫向滾動(dòng)用戶只在表格區(qū)域內(nèi)滑動(dòng)。6. 構(gòu)建與部署把博客前端變成線上項(xiàng)目6.1 本地構(gòu)建腳本自動(dòng)生成文章數(shù)據(jù)當(dāng)博客多了用手維護(hù)data.js不現(xiàn)實(shí)。我在scripts/build.js里做了一個(gè)小工具遍歷posts/目錄下所有 md 文件解析出標(biāo)題、日期、標(biāo)簽和正文輸出成前端使用的js/data.js和js/posts.js。const fs require(fs); const path require(path); const postsDir path.join(__dirname, ../posts); const outputDir path.join(__dirname, ../dist); function parseFrontMatter(content) { const match content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/); if (!match) return { meta: {}, body: content }; const meta {}; match[1].split(\n).forEach(function(line) { const idx line.indexOf(:); if (idx -1) { meta[line.slice(0, idx).trim()] line.slice(idx 1).trim(); } }); return { meta, body: match[2] }; } const articles []; const files fs.readdirSync(postsDir).filter(function(file) { return file.endsWith(.md); }); files.forEach(function(file) { const content fs.readFileSync(path.join(postsDir, file), utf8); const { meta, body } parseFrontMatter(content); articles.push({ id: file.replace(/\.md$/, ), title: meta.title || 未命名文章, date: meta.date || 2025-01-01, excerpt: meta.excerpt || body.slice(0, 200), tags: meta.tags ? meta.tags.split(,).map(function(s) { return s.trim(); }) : [], content: body }); }); const dataJs window.ARTICLES JSON.stringify(articles, null, 2) ;; fs.writeFileSync(path.join(outputDir, data.js), dataJs, utf8); console.log(構(gòu)建完成共處理 articles.length 篇文章);文章頭部用 YAML 格式維護(hù)元信息構(gòu)建腳本讀取時(shí)做一次解析。這樣新文章只需要新建一個(gè) md 文件在文件最頂部寫(xiě)上標(biāo)題、日期、標(biāo)簽運(yùn)行構(gòu)建腳本就能刷新整個(gè)站點(diǎn)數(shù)據(jù)。6.2 部署到靜態(tài)托管的注意事項(xiàng)構(gòu)建產(chǎn)物就是dist/下的靜態(tài)文件一個(gè) HTML、幾個(gè) CSS、幾個(gè) JS以及圖片資源。部署到任何靜態(tài)托管平臺(tái)都很簡(jiǎn)單本質(zhì)是把文件夾上傳上去。部署時(shí)我踩過(guò)一個(gè)看起來(lái)不大但很影響體驗(yàn)的坑資源路徑必須使用相對(duì)路徑或與部署路徑完全匹配的絕對(duì)路徑。如果博客部署在域名子路徑下比如example.com/blog/而 HTML 里寫(xiě)成link relstylesheet href/css/home.css那瀏覽器會(huì)去域名根目錄找資源大概率 404。用./css/home.css這類相對(duì)路徑能規(guī)避這個(gè)問(wèn)題但要注意 hash 路由切換頁(yè)面后相對(duì)路徑依然基于 HTML 文件位置解析所以靜態(tài)資源相對(duì)路徑在 hash 模式里不會(huì)出問(wèn)題。自定義域名和 HTTPS 證書(shū)這類設(shè)置不同平臺(tái)有不同操作入口但思路一致把 DNS 解析指向托管平臺(tái)提供的目標(biāo)地址然后在平臺(tái)側(cè)完成域名綁定和證書(shū)配置。證書(shū)配置一般只要點(diǎn)開(kāi)“啟用 HTTPS”按鈕剩下由平臺(tái)處理。6.3 還可以繼續(xù)完善的方向基礎(chǔ)版博客上線之后有幾個(gè)高性價(jià)比功能值得繼續(xù)加文章頁(yè)獨(dú)立設(shè)置document.title避免所有頁(yè)面都是同一個(gè)站點(diǎn)名文章列表加loadinglazy實(shí)現(xiàn)圖片懶加載做一個(gè)簡(jiǎn)單的站內(nèi)搜索用關(guān)鍵詞在文章標(biāo)題和摘要里做匹配標(biāo)簽歸檔頁(yè)點(diǎn)擊標(biāo)簽篩選出相關(guān)文章生成按日期的歸檔索引這些不會(huì)改變博客系統(tǒng)的整體架構(gòu)都是在現(xiàn)有數(shù)據(jù)結(jié)構(gòu)上追加渲染邏輯。內(nèi)容型站點(diǎn)的優(yōu)勢(shì)就在這里——核心功能保持穩(wěn)定外圍功能按需疊加不會(huì)因?yàn)橐粋€(gè)小功能就推翻重建。整套博客前端實(shí)現(xiàn)寫(xiě)下來(lái)我最想對(duì)后來(lái)者說(shuō)的是博客系統(tǒng)的前端沒(méi)有想象中那么復(fù)雜真正需要用心的地方是內(nèi)容組織、閱讀體驗(yàn)和長(zhǎng)期可維護(hù)性。不要被“全?！薄肮こ袒边@些詞嚇住原生三件套先把最小的閉環(huán)跑通后續(xù)有需要再優(yōu)化再擴(kuò)展。最后分享兩個(gè)實(shí)操小技巧。一是渲染列表時(shí)永遠(yuǎn)先拼字符串再一次插入 DOM我在第 2 節(jié)已經(jīng)反復(fù)強(qiáng)調(diào)過(guò)這在高頻切換視圖時(shí)能明顯降低卡頓二是每次構(gòu)建前先清空dist/再寫(xiě)入新產(chǎn)物否則刪除的文章會(huì)殘留在舊文件中導(dǎo)致線上出現(xiàn)失效鏈接。嘗試把文章從一個(gè)平臺(tái)搬到這套系統(tǒng)中時(shí)你會(huì)直觀感受到純靜態(tài)方案在遷移自由度上的好處。按這套流程走一遍屬于你自己的博客前端很快就能跑起來(lái)。