构建 jargons.dev [# 基础词典

欢迎来到 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 的天作之合的工具。

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

基础词典

npm create astro@latest

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

npx astro add tailwind
npx astro add mdx

我还添加了 tailwindcss 集成来进行样式设置；内容的 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 实现基础词典应用

<script> // Detect dark theme var iframe = document.getElementById('tweet-1744263459867410930-456'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1744263459867410930&theme=dark" } </script>做出的改变<script> // Detect dark theme var iframe = document.getElementById('tweet-1768395047462981963-82'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1768395047462981963&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1771908483828363760-196'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1771908483828363760&theme=dark" } </script>

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

截图

主页

字页

在 GitHub 上查看

以上是构建 jargons.dev [# 基础词典的详细内容。更多信息请关注PHP中文网其他相关文章！