共计 1495 个字符，预计需要花费 4 分钟才能阅读完成。
本文前置文章为「刷题专栏」起航 – 五分钟构建本人的刷题仓库，倡议花五分钟浏览并实现刷题仓库构建~
上一篇文章「刷题专栏」起航 – 五分钟构建本人的刷题仓库 介绍了刷题仓库的构建，然而只有刷题仓库是不够的，咱们的指标是借助刷题仓库更好地学习算法，如果能通过网站形式浏览本人的刷题记录，那就能更不便地坚固学习效果了~
一. 最简网站构建
以后咱们我的项目的 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 也能够~）
旅程正在持续 ✿✿ヽ (°▽°) ノ✿
