本文最初发表于我的博客。我把这篇文章放在这里，是为了演示如何使用 AstroPaper 主题写博客文章。
使用 ReactJS、TypeScript 和 Styled-Components 开发终端风格网站，包含自动补全、多主题、命令提示等功能。
目录
引言
最近我开发并上线了我的作品集加博客网站。很开心收到了一些不错的反馈。今天，我想介绍我的新终端风格作品集网站。它使用 ReactJS 和 TypeScript 开发。这个灵感来自 CodePen 和 YouTube。
技术栈
这是一个纯前端项目，没有任何后端代码。UI/UX 部分在 Figma 中设计。对于前端界面，我在纯 JavaScript 和 NextJS 之间选择了 React。为什么？
- 第一，我想写声明式代码。用 JavaScript 命令式地操作 HTML DOM 实在太繁琐了。
- 第二，因为它是 React！！！速度快、稳定可靠。
- 第三，我不需要 NextJS 提供的 SEO 功能、路由和图片优化。
当然，还有 TypeScript 做类型检查。
在样式方面，我这次走了一条不同的路。没有选纯 CSS、Sass 或 TailwindCSS 这样的工具类 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’ 清除。
结语
这是一个非常有趣的项目，这个项目特殊的地方在于：即使这是一个前端项目，我更多需要关注的是逻辑而非用户界面。
评论