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