欢迎来到 jargons.dev 系列的第二部分！

让我们开始吧！

在最初的提交之后，我开始研究“分叉脚本”（想知道那是什么？？你会在本系列后面找到答案？）但我必须承认，正如你在提交历史中会发现的那样，我从 jargons.dev 的工作中休息了很长一段时间（3 个月）。在这段时间里，我有机会进行一些潜意识反思，这对这个项目来说非常有用。

反思机会

我暂时停止了 jargons.dev 的工作，不是故意的，而是因为我太专注于我在 Hearts 上所做的工作，以至于我什至没有想到 jargons.dev。嗯，在这几个月里，新的一年到来了（当然有新的目标），我也经历并接触了一些新技术。一项技术对我来说很突出，那就是 Astro。

Astro 与行话产生共鸣。dev

一月份，我的目标是“通过文档学习新技术”，这是一个挑战，在听到有关 Astro 的精彩内容后，我开始使用 Astro。

快进三月，我发现自己正在从事另一个完全不同的副业项目（wp-主题），我当时正在观看 Eddie Jaoude YT Stream，我向 Eddie 透露了这一点，但他的回应最终迫使我回去工作术语.dev

你有不少副业项目...我不知道是哪一个。

这句话让我认真思考，因此我决定停止所有大量的副项目，并立即专注于一些重要的事情，jargons.dev 很容易回想起。

此时，我已经对 Astro 有了一定的了解，它是一个内容驱动的 Web 应用程序框架，具有超级简单的文件系统、i18n 就绪、SSG 具有出色的 SEO（对项目很重要）、高性能、支持其他前端库，例如带有岛屿的 ReactJS（我特别喜欢这个）；它是构建 jargons.dev 的天作之合的工具。

嗯，我很快就开始工作，下一个周末我必须处理该项目的基础词典部分。

基础词典

我为此初始化了一个新的 Astro 项目，就像运行下面的命令并按照提示操作一样简单...

npm create astro@latest

我还添加了 tailwindcss 集成以进行样式设置；内容的 mdx 集成；只需分别运行命令即可配置，这也非常容易

npx astro add tailwind
npx astro add mdx

我继续并完成了以下任务

• 创建了带有静态搜索表单的样板主页
• 暂时解决将 src/pages/word 目录作为将字典中的每个单词保存为 mdx 文件的目录。
• 实现了 word.astro 布局，它作为框架，可以使用 frontmatter 渲染 src/pages/word/ 目录中单词的所有 .mdx 文件内容。
• 还在单词布局导航栏中添加了静态迷你搜索表单。

有了这个功能，我们已经可以在 jargons.dev/word/[word] 路径上查看字典单词。这意味着当文件 tuple.mdx 存在于 src/pages/word/directory 中时，我们将能够通过访问 jargons.dev/word/tuple

公关

壮举：实现基础字典 #4

巴布尔贝 发表于 2024 年 3 月 24 日

此 Pull 请求使用 AstroJS 实现基本词典应用程序

所做的更改

• 开始新的 astro 项目
• 已创建主页
• 实现了 2 种布局
  • Base - 所有页面和布局的主要主要包装器
  • Word - 在 Word 页面上使用的布局
• 在主页和Word布局中实现静态搜索表单触发器

截图

首页

字页

在 GitHub 上查看