本文原文来自我的博客文章。我放置这篇文章是为了演示如何使用 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 等工具类 CSS 框架，而是选择了 CSS-in-JS 方式（Styled-Components）。虽然我知道 Styled-Components 已经有一段时间了，但我从未尝试过。因此，该项目中 Styled-Components 的编写风格和结构可能不是很有条理或很好。
这个项目不需要非常复杂的状态管理。我只在这个项目中使用了 ContextAPI 来实现多主题和避免 prop drilling。
以下是技术栈的快速总结。
- 前端：ReactJS、TypeScript
- 样式：Styled-Components
- UI/UX：Figma
- 状态管理：ContextAPI
- 部署：Netlify
功能
以下是该项目的一些功能。
多主题
用户可以切换多种主题。在撰写本文时，有 5 个主题；未来可能还会添加更多主题。选定的主题保存在本地存储中，以便页面刷新时主题不会改变。
命令行补全
为了在外观和感觉上尽可能接近真实的终端，我添加了一个命令行补全功能，只需按下”Tab”或”Ctrl + i”即可自动填充部分输入的命令。
上一条命令
用户可以通过按上、下箭头键返回到上一条命令或浏览之前输入的命令。
查看/清除命令历史
通过输入”history”可以查看之前输入的命令。所有命令历史和终端屏幕可以通过输入”clear”或按”Ctrl + l”清除。
结语
这是一个非常有趣的项目，该项目的一个特别之处在于，我必须专注于逻辑而不是用户界面（尽管这算是一个前端项目）。