「刷題專欄」揚帆 - 五分鐘構建本身的刷題網站

本文前置文章爲 「刷題專欄」起航 - 五分鐘構建本身的刷題倉庫 ，建議花五分鐘閱讀並完成刷題倉庫構建~

上一篇文章 「刷題專欄」起航 - 五分鐘構建本身的刷題倉庫 介紹了刷題倉庫的構建，可是隻有刷題倉庫是不夠的，咱們的目標是藉助刷題倉庫更好地學習算法，若是能經過網站方式瀏覽本身的刷題記錄，那就能更方便地鞏固學習效果了~

一. 最簡網站構建

當前咱們項目的 leetcode 文件夾下已是滿滿的一千多道 Leetcode 題目 Markdown 文件了：

通過一番查閱找到 VuePress 能夠快速幫咱們完成網站的構建，立刻按照官方指示開始操做：

cd leetcode-js # 或者你的倉庫名 echo '# Hello VuePress' > leetcode/README.md npm i -D vuepres # yarn add -D vuepress

而後打開 package.json 文件，在 scripts 部分插入：

而後命令行運行 npm run docs:dev 或者 yarn docs:dev，等待命令運行完成以後會看到命令行出現可供本地調試的連接：

打開連接，能夠看到剛剛用命令行生成的 README.md 文件已經出如今網站上了，說明 VuePress 已經將咱們的 leetcode 文件夾的 markdown 解析並生成爲網站資源了：

那咱們能在網站上看到同在 leetcode 文件夾 的刷題記錄嗎？答案是確定的~ 只須要找到一個文件名，做爲域名的路徑就能夠了~

例如我如今找到第一道題 "1_兩數之和"，放在 "localhost:8080" 後面，結果以下：

網站成功地將這道題目給展現出來了~ 而且還有一個附加的小功能，只要在右上角輸入關鍵字就會自動幫你找到相關的文檔喲：

二. 題目列表構建

最簡網站構建完成以後，稍微使用一下就會發現不太行。Leetcode 有個能點進去就看到全部題目的列表，咱們網站沒有這個功能，找一道題還要我輸入一次=。=

別急，還記得我剛剛用 README.md 生成的只有一句 Hello VuePress 的首頁嗎，咱們能夠在這裏編寫一個 README.md 的題目列表，這裏對這個列表有兩個要求 ：

• 按順序展現全部題目
• 每一個題目均可以跳轉到 Leetcode具體題目位置 & 個人題解網頁

這些信息以前咱們生產刷題倉庫的時候就已經保存在緩存文件 /cache/problems.json 裏了，如今只須要讀取便可~

接下來要作的事情有兩件, 分別對應上面兩個要求：

• 從緩存文件中獲取題目信息
• 生成對應的 README.md（題目列表格式暫定爲 "題名&連接 + 難度 + 題解&連接"）

簡單設計以後就開始實操，在 dev 文件夾下建立文件 generateReadme.js，開始編寫邏輯：

主邏輯比較簡單，基本：拿出數據，而後填入 markdown 形式的字符串模板.

接着給 package.json 添加命令 build-readme 以下：

接着在新開一個終端運行 npm run build-readme 或者 yarn build-readme，結果以下：

再看看原來的頁面

直接就是簡潔美觀的Leetcode 題目列表頁面了~

題目列表生成腳本位置在：https://github.com/Nodreame/leetcode-js/blob/master/dev/generateReadme.js

P.S. 原本打算把 打包和 CI 一塊兒寫了，可是沒想到 leetcode 題目過多竟然致使 Vuepress SSR 形式打包失敗，而且沒找到 CSR 打包方式，因此只能等我處理完再好好地整理出最後一篇發佈的文章了 o(╥﹏╥)o

歡迎拍磚，以爲還行也歡迎點贊收藏~ 新開公號：「無夢的冒險譚」歡迎關注（搜索 Nodreame 也能夠~） 旅程正在繼續 ✿✿ヽ(°▽°)ノ✿