thumb-1920-1101634
本文前置文章为 「刷题专栏」起航 - 五分钟构建自己的刷题仓库 , 建议花五分钟阅读并完成刷题仓库构建~
上一篇文章 「刷题专栏」起航 - 五分钟构建自己的刷题仓库 介绍了刷题仓库的构建, 但是只有刷题仓库是不够的, 我们的目标是借助刷题仓库更好地学习算法, 如果能通过网站方式浏览自己的刷题记录, 那就能更方便地巩固学习效果了~
一. 最简网站构建
当前我们项目的 leetcode 文件夹下已经是满满的一千多道 Leetcode 题目 Markdown 文件了:
image-20210112164520487
经过一番查阅找到 vuePress 可以快速帮我们完成网站的构建, 马上按照官方指示开始操作:
- cd leetcode-JS # 或者你的仓库名
- echo '# Hello VuePress'> leetcode/README.md
- NPM i -D vuepres # yarn add -D vuepress
然后打开 package.JSON 文件, 在 scripts 部分插入:
image-20210112184836739
然后命令行运行 NPM run docs:dev 或者 yarn docs:dev, 等待命令运行完成之后会看到命令行出现可供本地调试的链接:
image-20210112170229106
打开链接, 可以看到刚刚用命令行生成的 README.md 文件已经出现在网站上了, 说明 VuePress 已经将我们的 leetcode 文件夹的 Markdown 解析并生成为网站资源了:
image-20210112170312623
那我们能在网站上看到同在 leetcode 文件夹 的刷题记录吗? 答案是肯定的~ 只需要找到一个文件名, 作为域名的路径就可以了~
例如我现在找到第一道题 "1_两数之和", 放在 "localhost:8080" 后面, 结果如下:
image-20210112170852897
网站成功地将这道题目给展示出来了~ 并且还有一个附加的小功能, 只要在右上角输入关键字就会自动帮你找到相关的文档哟:
image-20210112171252943
二. 题目列表构建
最简网站构建完成之后, 稍微使用一下就会发现不太行. Leetcode 有个能点进去就看到所有题目的列表, 我们网站没有这个功能, 找一道题还要我输入一次 =.=
1598704973-Q0E7CKAV@1@T694@9W
别急, 还记得我刚刚用 README.md 生成的只有一句 Hello VuePress 的首页吗, 我们可以在这里编写一个 README.md 的题目列表, 这里对这个列表有两个要求 :
按顺序展示所有题目
每个题目都可以跳转到 Leetcode 具体题目位置 & 我的题解网页
这些信息之前我们生产刷题仓库的时候就已经保存在缓存文件 /cache/problems.JSON 里了, 现在只需要读取即可~
接下来要做的事情有两件, 分别对应上面两个要求:
从缓存文件中获取题目信息
生成对应的 README.md(题目列表格式暂定为 "题名 & 链接 + 难度 + 题解 & 链接")
简单设计之后就开始实操, 在 dev 文件夹下创建文件 generateReadme.JS, 开始编写逻辑:
image-20210112185337281
主逻辑比较简单, 基本: 拿出数据, 然后填入 Markdown 形式的字符串模板.
接着给 package.JSON 添加命令 build-readme 如下:
image-20210112185724691
接着在新开一个终端运行 NPM run build-readme 或者 yarn build-readme, 结果如下:
image-20210112185840366
再看看原来的页面:
题目列表
直接就是简洁美观的 Leetcode 题目列表页面了~
题目列表生成脚本位置在: https://github.com/Nodreame/leetcode-js/blob/master/dev/generateReadme.js
P.S. 本来打算把 打包和 CI 一起写了, 但是没想到 leetcode 题目过多居然导致 Vuepress SSR 形式打包失败, 并且没找到 CSR 打包方式, 所以只能等我处理完再好好地整理出最后一篇发布的文章了 o(╥﹏╥)o
来源: http://www.jianshu.com/p/67e672ba3a29