目录

HUSTOJ前端源代码解析(PHP)

需求

老师写了一本c++教材,这本教材的一大特色就是构建了一个有关c++的知识点网络。只有在电子版教材中,这种知识点网络才能真正发挥它的作用(比如点击超链接跳转到指定知识点),而出版社(清华大学出版社)不提供电子版教材的支持,因此我们需要自己搭建一个电子版教材网站。

刚好老师为了给本科生考试,让学长搭建了一个HUSTOJ。老师想了一个主意,把HUSTOJ修改一下,增加一些页面,把教材放进去,这样既有题目又有教材,而且貌似很方便就能实现。

作为组里唯一一个既懂一点前端,又懂一点后端,还懂一点运维的学生,这个任务自然落在我头上了。

分析

语言:

  • HUSTOJ是用php写的,我没有学习过,但是看了一会源代码,就发现跟Django的模板语言比较像,还是能看得懂的,所以上手修改不成问题。
  • 还有一个神器就是ChatGPT,看不懂的地方直接把代码复制进去,让它给我解释一下,它给出的的答案真的很让我满意。

思路:

  • 首先把教材转成html文件,放在/home/judge/src/web目录下,这是网站的根目录。实操过程中,我新建了一个文件夹book,把.html改成.php后放了进去。
  • 然后在根目录下新建一个book.php文件,无参数访问该文件为教材的目录;点击目录可跳转到教材的指定章节(带参数访问,如book.php?ch=2表示访问第二章)。
  • 修改导航栏,增加一栏“教材”,然后指向book.php。

文件:

这里列出一些重要的的文件的作用,这个在官方文档中是没有给出来的,自己探索花了很长时间。

/home/judge/src/web:网站的根目录,下面的都是该目录下的文件:

  • index.php:首页,主要引用了模板里的index.php,所以对首页的修改不要在这里改,而要在模板里的index.php里改。
  • book.php:我自己加的教材页面,无参数访问该文件为教材的目录;点击目录可跳转到教材的指定章节(带参数访问,如book.php?ch=2表示访问第二章)。
  • book/*.php:教材的静态html代码

/template/syzoj使用了syzoj主题目录文件,里面放的都是模板,下面的都是该目录下的文件:

  • book_contents.php:我自己创建的目录。
  • index.php:模板里的首页,在这里我又加了一个目录,引用book_contents.php。
  • hedaer.php:修改导航栏在这里改,不要在nav.php改!

工具

工欲善其事,必先利其器,有哪些好用的工具可以用呢

  • Tabby:很好用的跨平台开源终端软件,帮你管理密钥,sftp也很好用。
  • macOS的文件搜索:不仅能搜文件名,还能搜文件内容,速度贼快(因为有建立索引),Windows可用everything这个软件
  • VS code的ssh remote插件:可以直接用VS code修改服务器上的代码,比vim舒服多了。

部署

nginx+php的部署起来稍微有些麻烦,但是由于php的逻辑代码是嵌入在html文档中的(不像vue,每次修改完源码都需要编译),所以部署完再修改代码是很方便的。

总结

又解锁了一个新的技术栈php,qwq。