<!-- WEHUB_ZH_README -->
> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。  
> [English](./README.en.md) · [原始项目](https://github.com/Cveinnt/LiveTerm) · [上游 README](https://github.com/Cveinnt/LiveTerm/blob/HEAD/README.md)  
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

# [💻 LiveTerm - 几分钟即可搭建终端风格网站！](https://liveterm.vercel.app)

高度可定制、易于使用且极简的终端风格网站模板，基于 Next.js 构建。

使用 LiveTerm 搭建一个简单的网站只需 **几分钟**，而且你只需要处理 **一个** 文件：`config.json`。克隆此仓库后，只需运行 `yarn install && yarn dev`，然后开始编辑 `config.json` 即可搭建你的网站！

LiveTerm 可用于搭建多种网站：

- [个人网站](https://cveinnt.com)
- [浏览器起始页](https://livetermstart.vercel.app/)
- [项目页面](https://liveterm.vercel.app/)
- 或者只是一个酷炫的浏览器音乐播放器……发挥创意吧！

欢迎随意体验上面的 Web 演示！

## 📸 展示

<p align="center">
<img src="./demo/demo.gif" width="600"><br>
<strong>不同主题的 LiveTerm</strong>
</p>

<p align="center">
<img src="./demo/cveinnt.png" width="600"><br>
<strong><a href="https://cveinnt.com" target=_blank>我的个人网站</a></strong>
</p>

## 🚀 不到 5 分钟即可部署你的 LiveTerm 站点

LiveTerm 需要 `yarn` 包管理器。你可以在[这里](https://classic.yarnpkg.com/lang/en/docs/install/).)安装 `yarn`。

只需在终端中运行以下命令：

```bash
sh -c "$(curl -fsSL https://raw.github.com/Cveinnt/LiveTerm/main/install/install.sh)"
```

这会将 LiveTerm 安装到当前目录。你可以通过以下方式开始搭建网站：

```bash
cd LiveTerm && yarn dev
```

开始编辑 `config.json`，尝试保存并查看更新后的变化！

或者，你也可以将此仓库克隆到你选择的位置

```bash
git clone https://github.com/Cveinnt/LiveTerm.git && cd LiveTerm
```

然后安装依赖并在该位置开始开发：

```bash
yarn install && yarn dev
```

### Docker 用法

首先，克隆项目并按你的喜好编辑 `config.json`。然后运行以下命令在后台启动容器：

```shell
docker-compose up -d
```

如果你**清楚**自己在做什么，也可以尝试修改 `Dockerfile` 和 `docker-compose.yml`！
在[这里](https://docs.docker.com/get-started/overview/ 'here')了解更多关于 Docker 的信息。

## 📄 配置

### 基础配置

LiveTerm 90% 的配置都通过 `config.json` 文件完成。

```javascript
{
  "readmeUrl": // create a Github README and link it here!
  "title": // title of the website
  "name": // your name, included in 'about' command
  "ascii": // ascii art to display
  "social": {
    "github": // your handle
    "linkedin": // your handle
  },
  "email": // your email
  "ps1_hostname": "liveterm" // hostname in prompt
  "ps1_username": "visitor", // username in prompt
  "resume_url": "../resume.pdf", // path to your resume
  "non_terminal_url": "W",
  "colors": {
    "light": {
      ...
    },
    "dark": {
      ... // you can use existing templates in themes.json or use your own!
    }
  }
}
```

请随意按你的需求修改！

### 主题

你可以在 `themes.json` 中找到多个预配置主题，并可以将 `config.json` 中的颜色替换为你喜欢的主题色！这些主题基于[这个网站](https://glitchbone.github.io/vscode-base16-term/#/).)上的主题。

如需更好地预览主题，请查看 `demo` 文件夹中的图片。

### 网站图标（Favicons）

网站图标位于 `public/`，以及其他你可能想要上传至网站的文件。我使用这个[网站](https://www.favicon-generator.org/))生成了 favicons。

### 横幅（Banner）

你可能还想修改 `banner` 命令的输出。为此，只需将你生成的 banner 粘贴到 `src/utils/bin/commands.ts`。我使用这个[网站](https://manytools.org/hacker-tools/ascii-banner/))生成了我的 banner。

### 高级配置

如果你想进一步自定义页面，请随意按你的喜好修改源代码！

## 🌐 在 Vercel 上部署

部署 Next.js 应用最简单的方式是使用 Next.js 创建者提供的 [Vercel Platform](https://vercel.com/))。

你可以安装 `vercel` cli，并按照[这里](https://vercel.com/docs/concepts/deployments/overview).)的说明操作。

你也可以将 GitHub 账号连接到 Vercel，让 Vercel 自动为你部署 GitHub 仓库。

## 致谢

基于 M4TT72 出色的 [Terminal](https://github.com/m4tt72/terminal).