这篇文章最初来自我的博客文章。我放置这篇文章是为了演示如何使用 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 来实现多主题和避免属性钻取。
这里是技术栈的快速回顾。
- 前端：ReactJS、TypeScript
- 样式：Styled-Components
- UI/UX：Figma
- 状态管理：ContextAPI
- 部署：Netlify
功能特性
以下是项目的一些功能特性。
多主题
用户可以更改多个主题。在撰写这篇文章时，有 5 个主题；将来可能会添加更多主题。选定的主题保存在本地存储中，这样主题在页面刷新时不会改变。
命令行补全
为了尽可能接近实际终端的外观和感觉，我添加了一个命令行补全功能，只需按 ‘Tab’ 或 ‘Ctrl + i’ 就可以自动填充部分输入的命令。
历史命令
用户可以通过按上下箭头键返回到之前的命令或导航之前输入的命令。
查看/清除命令历史
可以通过在命令行中输入 ‘history’ 来查看之前输入的命令。所有命令历史和终端屏幕可以通过输入 ‘clear’ 或按 ‘Ctrl + l’ 来清除。
结语
这是一个非常有趣的项目，这个项目的一个特殊部分是我必须专注于逻辑而不是用户界面（尽管这是一种前端项目）。