了解如何在 <lines (Modulojs) 中创建 API 支持的 Zelda BOTW 怪物画廊 Web 组件

发布日期： 2024-09-03 阅读量： 作者： 网络

模数教程回来了！

大家好！暑假结束后，我带着 modulo 教程回来了。我正在制作更多教程 - 请继续关注。也就是说，如果您对我的下一个主题有任何特别的想法，请务必在评论中告诉我！

我的上一篇教程是关于 api 驱动的 pokémon dance party 组件的超级快速且有趣的“仅 html，无 js”教程，不到 30 行 html web 组件代码。我之前的一些教程更加严肃一些，例如关于管理私有和公共状态的更高级教程。如果这听起来有点枯燥，那么您很幸运，因为今天的教程是另一个有趣的教程，并且是关于另一款深受喜爱的视频游戏......塞尔达：荒野之息！

当然，一如既往，本教程中学习的技术适用于任何 api，因此请继续阅读以了解有关 api 驱动的图库的更多信息！

如何使用海拉尔纲要 api

本教程 100% 感谢 aarav borthakur 提供的免费、麻省理工学院许可且慷慨托管的 hyrule compendium api，这是一个有趣的、由粉丝维护的数据库和 api，用于检索《塞尔达传说：荒野之息》系列信息和媒体。我们将使用“monsters”端点，此处可用：https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

截屏

了解如何在 <lines (Modulojs) 中创建 API 支持的 Zelda BOTW 怪物画廊 Web 组件

立即尝试一下，不到 30 秒： ??? 想跳过吗？滚动到末尾并将 39 行 html 代码复制到任何本地 html 文件中，然后在浏览器中打开它。 modulo 没有依赖关系，甚至可以嵌入本地 html 文件中运行，所以真的就是这么简单！

从数据开始

让我们从 6 行代码开始，使用 staticdata 和 template 来显示它：

<template>
   <pre class="brush:php;toolbar:false">api data: {{ staticdata|json:2 }}

# css # git # 点击事件 # overflow

下一篇: dedecms图片在哪换

了解如何在 &lt;lines (Modulojs) 中创建 API 支持的 Zelda BOTW 怪物画廊 Web 组件

随便看看

了解如何在 <lines (Modulojs) 中创建 API 支持的 Zelda BOTW 怪物画廊 Web 组件