本文原文来自我的博客文章。我放置这篇文章是为了演示如何使用 AstroPaper 主题编写博客文章/文章。
使用 ReactJS、TypeScript 和 Styled-Components 开发类似终端的网站。包括自动完成、多个主题、命令提示等功能。
目录
简介
最近，我开发并发布了我的作品集 + 博客。我很高兴收到了一些好的反馈。今天，我想介绍我的新的类似终端的作品集网站。它是使用 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 进行多个主题化并避免属性钻取。
这是技术栈的快速回顾。
- 前端：ReactJS、TypeScript
- 样式：Styled-Components
- UI/UX：Figma
- 状态管理：ContextAPI
- 部署：Netlify
功能
以下是项目的一些功能。
多个主题
用户可以更改多个主题。在撰写本文时，有 5 个主题；将来可能会添加更多主题。所选主题保存在本地存储中，以便页面刷新时主题不会更改。
命令行补全
为了尽可能地看起来和感觉像实际的终端，我放置了一个命令行补全功能，只需按 ‘Tab’ 或 ‘Ctrl + i’ 即可自动填充部分键入的命令。
以前的命令
用户可以通过按上下箭头返回到以前的命令或导航以前键入的命令。
查看/清除命令历史
可以通过在命令行中键入 ‘history’ 来查看以前键入的命令。所有命令历史和终端屏幕都可以通过键入 ‘clear’ 或按 ‘Ctrl + l’ 来清除。
结尾
这是一个非常有趣的项目，这个项目的一个特殊部分是我必须专注于逻辑而不是用户界面（即使这是一种前端项目）。