这篇文章最初来自我的博客文章。我将此文放在这里，是为了演示如何使用 AstroPaper 主题撰写博客文章。
使用 ReactJS、TypeScript 和 Styled-Components 开发一个终端风格的网站。包含自动补全、多主题、命令提示等功能。
目录
简介
最近，我开发并发布了自己的作品集和博客。很高兴收到了一些不错的反馈。今天，我想介绍我的新终端风格作品集网站。它使用 ReactJS 和 TypeScript 开发。我是从 CodePen 和 YouTube 上获得这个灵感的。
技术栈
这个项目是一个纯前端项目，没有任何后端代码。UI/UX 部分在 Figma 中设计。对于前端用户界面，我选择了 React 而不是原生 JavaScript 和 NextJS。为什么？
- 首先，我想编写声明式代码。使用 JavaScript 命令式地管理 HTML DOM 真的很繁琐。
- 其次，因为它是 React！！！它快速且可靠。
- 最后，我不太需要 NextJS 提供的 SEO 功能、路由和图片优化。
当然还有 TypeScript 用于类型检查。
在样式方面，我采取了与平时不同的做法。我没有选择纯 CSS、Sass 或像 TailwindCSS 这样的实用工具 CSS 框架，而是选择了 CSS-in-JS 方案（Styled-Components）。虽然我知道 Styled-Components 有一段时间了，但从未真正尝试过。因此，这个项目中 Styled-Components 的编写风格和结构可能不是很有条理或很优秀。
这个项目不需要非常复杂的状态管理。我在这个项目中只使用了 ContextAPI 来实现多主题切换和避免 prop 层层传递。
以下是对技术栈的快速回顾：
- 前端：ReactJS、TypeScript
- 样式：Styled-Components
- UI/UX：Figma
- 状态管理：ContextAPI
- 部署：Netlify
功能特性
以下是该项目的一些功能特性：
多主题
用户可以切换多个主题。在撰写本文时，共有 5 个主题；未来可能还会添加更多主题。选定的主题会保存在本地存储中，这样在页面刷新时主题不会改变。
命令行自动补全
为了尽可能贴近真实终端的外观和体验，我加入了一个命令行自动补全功能，只需按「Tab」或「Ctrl + i」即可自动填充部分输入的命令。
历史命令
用户可以通过按上/下箭头键回到之前的命令或浏览之前输入的命令。
查看/清除命令历史记录
可以在命令行中输入「history」来查看之前输入的命令。输入「clear」或按「Ctrl + l」可以清除所有命令历史记录和终端屏幕。
结语
这是一个非常有趣的项目，而这个项目的一个特别之处在于我必须更多地关注逻辑而非用户界面（尽管这算是一个前端项目）。