扬帆的刷题网站快速搭建指南

2024-01-19 15:06:04

在瞬息万变的科技世界中，编程已经成为一项必备技能，而刷题则是提升编程能力的有效途径。Leetcode 作为热门的刷题平台，为广大程序员提供了丰富的题目资源和社区交流。然而，Leetcode 的使用体验并不完美，例如题目的展示不够直观，查找题目比较麻烦等等。

为了解决这些痛点，本文将详细介绍如何快速构建一个简单易用的刷题网站，让你能够更高效地学习和提高编程技能。

最简网站构建

首先，我们需要一个最简单的网站框架。这里，我们推荐使用静态网站生成器 Hugo。Hugo 是一款快速、简单且功能强大的静态网站生成器，它可以让您轻松创建和管理网站。

安装好 Hugo 之后，我们就可以创建一个新的项目了。在命令行中，输入以下命令：

hugo new site mysite

其中，mysite 是您网站的名称。

进入 mysite 目录后，您会看到一个名为 config.toml 的文件。这个文件是 Hugo 的配置文件，我们可以在这里配置网站的标题、、语言等等。

接下来，我们需要创建一个新的页面。在 content 文件夹中，创建一个名为 index.md 的文件。这个文件将作为您网站的主页。

在 index.md 文件中，您可以输入以下内容：

---
title: 扬帆的刷题网站
description: 欢迎来到我的刷题网站！
---

## 刷题网站介绍

这个网站是我自己搭建的，主要是为了方便自己刷题。现在，我也把它分享给大家，希望能够帮助到更多的人。

## 网站功能

这个网站的功能很简单，主要包括：

* 题目列表：您可以在这里找到各种各样的编程题目。
* 题解区：您可以在这里找到题目的题解。
* 讨论区：您可以在这里与其他用户讨论题目。

## 如何使用

使用这个网站很简单，您只需要按照以下步骤操作即可：

1. 找到您想做的题目。
2. 点击题目标题，进入题目页面。
3. 在题目页面，您可以找到题目的、输入输出样例以及题解。
4. 您可以尝试自己解决题目，也可以参考题解。
5. 如果您有更好的题解，也可以在讨论区与其他用户分享。

## 结语

我希望这个网站能够帮助您提高编程技能。如果您有任何建议或意见，欢迎随时与我联系。

保存 index.md 文件后，您就可以使用 Hugo 命令来构建您的网站了。在命令行中，输入以下命令：

hugo

Hugo 会自动生成您的网站，并将其放在 public 目录中。

现在，您就可以使用 web 服务器来运行您的网站了。这里，我们推荐使用 Nginx。

安装好 Nginx 之后，您需要在 Nginx 的配置文件中添加以下内容：

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/hugo/site/public;
}

其中，yourdomain.com 是您网站的域名，/path/to/your/hugo/site/public 是您 Hugo 网站的 public 目录的路径。

保存 Nginx 的配置文件后，您就可以使用以下命令来启动 Nginx 了：

sudo nginx

现在，您就可以访问您的网站了。在浏览器中，输入您的网站域名，您就可以看到您的刷题网站了。

题目列表构建

最简网站构建完成之后，稍微使用一下就会发现不太行。Leetcode 有个能点进去就看到所有题目的列表，我们网站没有这个功能，找一道题还要我输入一次=。= 主逻辑比较简单，基本：拿出数据，然后填入 markdown 形式的字符串模板.

P.S. 全部数据我放到了GitHub上了，懒人食用指南：去仓库里下载json格式的数据集，在hugo代码里把这个json import进去，就可以直接使用题目数据了。

Leetcode题目列表包含了几部分信息，对应json中的字段有：

Question Title
Question ID
Difficulty
Acceptance
Link

根据这些字段，很容易得出模板代码如下：

<ul>
{% for q in site.Data.leetcode %}
<li><a href="{{ q.Link }}">{{ q."Question Title" }}</a> [{{ q.Difficulty }}] <b>{{ q.Acceptance }}</b></li>
{% endfor %}
</ul>