wehub-resource-sync
138 lines
4.5 KiB
Markdown
138 lines
4.5 KiB
Markdown
<!-- 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).
|