本文原载于我的博客，放在这里演示如何用 AstroPaper 主题写博文。
使用 ReactJS、TypeScript 和 Styled-Components 开发终端风格网站。包含自动补全、多主题、命令提示等功能。
Table of contents
前言
最近我开发并发布了自己的作品集+博客。很高兴收到了一些不错的反馈。今天我想介绍一下我的终端风格作品集网站，使用 ReactJS、TypeScript 开发，灵感来自 CodePen 和 YouTube。
技术栈
这是一个纯前端项目，没有任何后端代码。UI/UX 部分在 Figma 中设计。前端我选择了 React 而不是原生 JavaScript 和 NextJS。为什么？
- 首先，我想写声明式代码。用 JavaScript 命令式地操作 HTML DOM 实在太繁琐了。
- 其次，因为这是 React！它快速、可靠。
- 最后，我不太需要 NextJS 提供的 SEO、路由和图片优化功能。
当然还有 TypeScript 做类型检查。
样式方面，我采取了与往常不同的方式。没有用 Pure CSS、Sass 或 TailwindCSS 这类 Utility CSS 框架，而是选择了 CSS-in-JS（Styled-Components）。虽然我知道 Styled-Components 有一段时间了，但从没真正试过。所以这个项目里 Styled-Components 的写法和结构可能不够规整。
这个项目不需要很复杂的状态管理。我只用了 ContextAPI 来实现多主题切换，避免 prop drilling。
技术栈快速回顾：
- 前端：ReactJS、TypeScript
- 样式：Styled-Components
- UI/UX：Figma
- 状态管理：ContextAPI
- 部署：Netlify
功能特性
以下是项目的一些功能。
多主题切换
用户可以切换多种主题。写这篇文章的时候有 5 种主题，后续可能会继续增加。选中的主题保存在 localStorage 中，刷新页面不会丢失。
命令行自动补全
为了尽量接近真实终端体验，我实现了命令行自动补全功能，按 Tab 或 Ctrl + i 即可自动填充部分输入的命令。
历史命令
用户可以按上下箭头键回溯之前输入的命令。
查看/清除命令历史
输入 history 可以查看历史命令。输入 clear 或按 Ctrl + l 可以清空终端屏幕和命令历史。
结语
这是个很有意思的项目。特别之处在于，虽然是前端项目，但重心在逻辑而非界面。