了解如何在 
- PHPz原創
- 2024-09-03 13:33:321115瀏覽
- PHPz原創
- 2024-09-03 13:33:321115瀏覽
模數教程回來了！
大家好！暑假結束後，我帶著 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
螢幕截圖
現在就試試看一下，不到 30 秒： ???想跳過嗎？捲動到末尾，將 39 行 HTML 程式碼複製到任意本機 HTML 檔案中，然後在瀏覽器中開啟它。 Modulo 沒有依賴關係，甚至可以嵌入本地 HTML 檔案中運行，所以真的就是這麼簡單！
從數據開始
讓我們從 6 行程式碼開始，使用 StaticData 和 Template 來顯示它：
<Template>
<pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}
在此片段中，我們有一個非常簡單的單行 轉儲傳回的 Hyrule Compendium API 的 staticdata.data 屬性。我們應用 |json:2 過濾器以更易讀的格式顯示它。 StaticData 開箱即用地支援 JSON（以及其他格式），您只需為其提供 API 的 URL，然後就可以開始使用資料。 StaticData 是否令人困惑？嘗試本教學來整合 GitHub API，或嘗試 Modulo.js 教學的「StaticData」部分中的互動式範例。
嘗試執行該程式碼片段。 看到結果數據了嗎？我們需要使用 for 迴圈來遍歷它。
建立圖片庫
現在我們可以看到屬性 .data 包含 Objects 的 Array，讓我們循環遍歷它並產生一個畫廊：
<Template>
{% for monster in staticdata.data %}
<img src="{{ monster.image }}" style="width: 200px;" />
{% endfor %}
</Template>
這將產生許多img 標籤，每個標籤都有src= 分配給原始JSON Array 中Objects 的「image」屬性，以及{% for %} template -tag 是為數組中的每個項目複製一些HTML 的語法（更不用說每個 索引，例如從0 開始計數的數字）。為了進一步練習，Modulo.js 教程的第 4 部分中的 for 迴圈有許多互動式範例。
建立狀態和腳本
接下來要做的最重要的事情是建立一個新的 Script 標籤，我們可以用它來寫一個簡單的單行 JavaScript 函數：
<State
selected:=null
></State>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
這是使用 Modulo 時編寫腳本的核心技術：建立可讓您使用 JavaScript 修改狀態的函數。在這種情況下，它執行一個非常簡單的操作：「儲存這個怪物以供稍後使用」。更準確地說，它將狀態變數「選定」分配給給定的有效負載。這樣，狀態變數“selected”就變成了一種“儲存”，用於儲存剛從 API 中選取的任何怪物。
附加點擊事件
現在，讓我們再增加一塊拼圖：附加點擊事件。見下圖：
<img @click:=script.select payload:="{{ monster|json }}" />
這是透過事件附件語法完成的（@click:=，在此
case）和有效負載屬性，讓我們可以透過點擊此圖像來傳遞我們選擇的怪物。如果您是 JavaScript 新手（即使您不是！），事件和腳本標籤可能是一個令人困惑的主題，因此請仔細閱讀本頁上的範例，以了解使用腳本元件部分和附加事件的更多範例。
附加點擊事件
最後，讓我們在選擇怪物時有條件地渲染怪物資訊：
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
This will initially show the "Welcome" message (since state.selected begins as null). Then, as soon as someone clicks on a monster image, the state.selected variable will no longer be null, and
instead the contents will displayed formatted with h1 and p tags, with some tweaks applied (|capfirst makes the first letter capital).
- Embeddable snippet
Combining it all, we then wrap everything in a display: grid to make the side-by-side layout, and a overflow: auto to the left div the scrollbar. Finally, we can add a few final CSS tweaks to the second div (padding, margin, and a linear-gradient), and we get the following results that can be embedded anywhere:
<!DOCTYPE html>
<template Modulo>
<Component name="MonsterGuide">
<Template>
<main style="display: grid; grid-template-columns: 2fr 1fr">
<div style="overflow: auto; height: 95vh;">
{% for monster in staticdata.data %}
<img src="{{ monster.image }}"
@click:=script.select payload:="{{ monster|json }}"
style="width: 200px;" />
{% endfor %}
</div>
<div style="padding: 10px; margin: 10px; background: linear-gradient(to bottom, lightyellow, goldenrod);">
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
</div>
</main>
</Template>
<State
selected:=null
></State>
<StaticData
-src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
></StaticData>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
</Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-MonsterGuide></x-MonsterGuide>
I hope you enjoyed this tutorial, if so, follow for more like this!
以上是了解如何在