「刷题专栏」扬帆 - 五分钟构建本身的刷题网站

本文前置文章为 「刷题专栏」起航 - 五分钟构建本身的刷题仓库 ，建议花五分钟阅读并完成刷题仓库构建~

上一篇文章 「刷题专栏」起航 - 五分钟构建本身的刷题仓库 介绍了刷题仓库的构建，可是只有刷题仓库是不够的，咱们的目标是借助刷题仓库更好地学习算法，若是能经过网站方式浏览本身的刷题记录，那就能更方便地巩固学习效果了~

一. 最简网站构建

当前咱们项目的 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 也能够~） 旅程正在继续 ✿✿ヽ(°▽°)ノ✿