本文前置文章為 「刷題專欄」起航 - 五分鐘構(gòu)建自己的刷題倉(cāng)庫(kù) 焦影，建議花五分鐘閱讀并完成刷題倉(cāng)庫(kù)構(gòu)建~
上一篇文章 「刷題專欄」起航 - 五分鐘構(gòu)建自己的刷題倉(cāng)庫(kù) 介紹了刷題倉(cāng)庫(kù)的構(gòu)建嘱腥，但是只有刷題倉(cāng)庫(kù)是不夠的啥么，我們的目標(biāo)是借助刷題倉(cāng)庫(kù)更好地學(xué)習(xí)算法跛溉，如果能通過(guò)網(wǎng)站方式瀏覽自己的刷題記錄秉剑，那就能更方便地鞏固學(xué)習(xí)效果了~
一. 最簡(jiǎn)網(wǎng)站構(gòu)建
當(dāng)前我們項(xiàng)目的 leetcode 文件夾下已經(jīng)是滿滿的一千多道 Leetcode 題目 Markdown 文件了：
經(jīng)過(guò)一番查閱找到 VuePress 可以快速幫我們完成網(wǎng)站的構(gòu)建催享，馬上按照官方指示開始操作：
cd leetcode-js # 或者你的倉(cāng)庫(kù)名
echo '# Hello VuePress' > leetcode/README.md
npm i -D vuepres # yarn add -D vuepress
然后打開 package.json 文件傅寡，在 scripts 部分插入：
然后命令行運(yùn)行 npm run docs:dev 或者 yarn docs:dev英岭，等待命令運(yùn)行完成之后會(huì)看到命令行出現(xiàn)可供本地調(diào)試的鏈接：
打開鏈接湾盒，可以看到剛剛用命令行生成的 README.md 文件已經(jīng)出現(xiàn)在網(wǎng)站上了，說(shuō)明 VuePress 已經(jīng)將我們的 leetcode 文件夾的 markdown 解析并生成為網(wǎng)站資源了：
那我們能在網(wǎng)站上看到同在 leetcode 文件夾 的刷題記錄嗎诅妹？答案是肯定的~ 只需要找到一個(gè)文件名罚勾，作為域名的路徑就可以了~
例如我現(xiàn)在找到第一道題 "1_兩數(shù)之和"毅人，放在 "localhost:8080" 后面，結(jié)果如下：
網(wǎng)站成功地將這道題目給展示出來(lái)了~ 并且還有一個(gè)附加的小功能尖殃，只要在右上角輸入關(guān)鍵字就會(huì)自動(dòng)幫你找到相關(guān)的文檔喲：
二. 題目列表構(gòu)建
最簡(jiǎn)網(wǎng)站構(gòu)建完成之后丈莺，稍微使用一下就會(huì)發(fā)現(xiàn)不太行。Leetcode 有個(gè)能點(diǎn)進(jìn)去就看到所有題目的列表送丰，我們網(wǎng)站沒(méi)有這個(gè)功能缔俄，找一道題還要我輸入一次=。=
別急器躏，還記得我剛剛用 README.md 生成的只有一句 Hello VuePress 的首頁(yè)嗎俐载，我們可以在這里編寫一個(gè) README.md 的題目列表，這里對(duì)這個(gè)列表有兩個(gè)要求 ：
- 按順序展示所有題目
- 每個(gè)題目都可以跳轉(zhuǎn)到 Leetcode具體題目位置 & 我的題解網(wǎng)頁(yè)
這些信息之前我們生產(chǎn)刷題倉(cāng)庫(kù)的時(shí)候就已經(jīng)保存在緩存文件 /cache/problems.json 里了邀桑，現(xiàn)在只需要讀取即可~
接下來(lái)要做的事情有兩件, 分別對(duì)應(yīng)上面兩個(gè)要求：
- 從緩存文件中獲取題目信息
- 生成對(duì)應(yīng)的 README.md（題目列表格式暫定為 "題名&鏈接 + 難度 + 題解&鏈接"）
簡(jiǎn)單設(shè)計(jì)之后就開始實(shí)操瞎疼，在 dev 文件夾下創(chuàng)建文件 generateReadme.js，開始編寫邏輯：
主邏輯比較簡(jiǎn)單壁畸，基本：拿出數(shù)據(jù)贼急，然后填入 markdown 形式的字符串模板.
接著給 package.json 添加命令 build-readme 如下：
接著在新開一個(gè)終端運(yùn)行 npm run build-readme 或者 yarn build-readme，結(jié)果如下：
再看看原來(lái)的頁(yè)面：
直接就是簡(jiǎn)潔美觀的Leetcode 題目列表頁(yè)面了~
題目列表生成腳本位置在：https://github.com/Nodreame/leetcode-js/blob/master/dev/generateReadme.js
P.S. 本來(lái)打算把 打包和 CI 一起寫了捏萍，但是沒(méi)想到 leetcode 題目過(guò)多居然導(dǎo)致 Vuepress SSR 形式打包失敗太抓，并且沒(méi)找到 CSR 打包方式，所以只能等我處理完再好好地整理出最后一篇發(fā)布的文章了 o(╥﹏╥)o
歡迎拍磚令杈，覺得還行也歡迎點(diǎn)贊收藏~
新開公號(hào)：「無(wú)夢(mèng)的冒險(xiǎn)譚」歡迎關(guān)注（搜索 Nodreame 也可以~）
旅程正在繼續(xù) ??ヽ(°▽°)ノ?
