Erfahren Sie, wie Sie in PHPzOriginal2024-09-03 13:33:321115Durchsuche

Modulo-Tutorials sind zurück!

Hallo zusammen! Nach einer Sommerpause bin ich mit den Modulo-Tutorials zurück. Ich habe noch eine Menge weiterer Tutorials in Arbeit – also bleiben Sie dran. Wenn Sie jedoch besondere Ideen für mein nächstes Thema haben, lassen Sie es mich unbedingt in den Kommentaren wissen!

Mein letztes Tutorial war ein superschnelles und unterhaltsames „nur HTML, kein JS“-Tutorial zur API-gesteuerten Pokémon Dance Party-Komponente in weniger als 30 Zeilen HTML-Webkomponentencode. Einige meiner vorherigen Tutorials waren etwas ernster, wie zum Beispiel dieses fortgeschrittenere Tutorial zur Verwaltung des privaten und öffentlichen Staates. Wenn das etwas trocken klingt, dann haben Sie Glück, denn das heutige Tutorial ist wieder einmal unterhaltsam und handelt von einem weiteren beliebten Videospiel ... Zelda: Breath of the Wild!

Natürlich sind die in diesem Tutorial erlernten Techniken wie immer auf jede API anwendbar, also lesen Sie weiter, um mehr über eine API-gesteuerte Galerie zu erfahren!

So verwenden Sie die Hyrule Compendium API

Dieses Tutorial ist zu 100 % der wunderbaren kostenlosen, MIT-lizenzierten und großzügig gehosteten Hyrule Compendium API von Aarav Borthakur zu verdanken, einer unterhaltsamen, von Fans gepflegten Datenbank und API zum Abrufen von Zelda: Breath of the Wild-Franchise-Informationen und Medien. Wir werden den Endpunkt „Monsters“ verwenden, der hier verfügbar ist: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

Screenshot

Jetzt ausprobieren, in weniger als 30 Sekunden: ??? Möchten Sie weitermachen? Scrollen Sie bis zum Ende, kopieren Sie die 39 Zeilen HTML-Code in eine beliebige lokale HTML-Datei und öffnen Sie sie dann in Ihrem Browser. Modulo hat keine Abhängigkeiten und läuft sogar eingebettet in lokale HTML-Dateien, also ist es wirklich ganz einfach!

---

Beginnen Sie mit den Daten

Beginnen wir mit nur 6 Codezeilen, mit StaticData und einer Vorlage zur Anzeige:

<Template>
   <pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}

In diesem Snippet haben wir eine sehr einfache, einzeilige Dadurch wird die Eigenschaft staticdata.data der zurückgegebenen Hyrule-Kompendium-API ausgegeben. Wir wenden den Filter |json:2 an, um ihn in einem besser lesbaren Format anzuzeigen. StaticData unterstützt JSON (neben anderen Formaten) standardmäßig. Sie geben ihm einfach die URL zur API und können dann mit der Verwendung der Daten beginnen. Ist StaticData verwirrend? Probieren Sie dieses Tutorial zur Integration der GitHub-API aus oder experimentieren Sie mit den interaktiven Beispielen im Abschnitt „StaticData“ des Tutorials des Modulo.js-Tutorials.

Versuchen Sie, dieses Snippet auszuführen. Sehen Sie die resultierenden Daten? Wir müssen das mit einer for-Schleife durchlaufen.

Erstellen einer Bildergalerie

Da wir nun sehen können, dass ein Attribut .data ein Array von Objekten enthält, lassen Sie uns eine Schleife durchlaufen und eine Galerie erstellen:

<Template>
    {% for monster in staticdata.data %}
        <img src="{{ monster.image }}" style="width: 200px;" />
    {% endfor %}
</Template>

Dadurch werden viele IMG-Tags generiert, von denen jedes einen src= hat, der den „Bild“-Eigenschaften der Objekte im ursprünglichen JSON-Array und dem {% für %} zugewiesen ist. template-tag ist die Syntax, um ein bisschen HTML für jedes Element im Array zu duplizieren (ganz zu schweigen von jedem Index, z. B. einer Zahl, die von 0 aufwärts zählt). Zur weiteren Übung finden Sie in Teil 4 des Modulo.js-Tutorials viele interaktive Beispiele für die for-Schleife.

Zustand und Skript erstellen

Als nächstes müssen wir ein neues Script-Tag erstellen, mit dem wir eine einfache, einzeilige JavaScript-Funktion schreiben können:

<State
    selected:=null
></State>
<Script>
    function select(payload) {
        state.selected = payload;
    }
</Script>

Dies ist eine Kerntechnik für die Skripterstellung bei der Verwendung von Modulo: Erstellen Sie Funktionen, mit denen Sie den Status mithilfe von JavaScript ändern können. In diesem Fall führt es einen sehr einfachen Vorgang aus: „Dieses Monster für später speichern“. Genauer gesagt weist es der gegebenen Nutzlast die Zustandsvariable „ausgewählt“ zu. Auf diese Weise wird die Statusvariable „ausgewählt“ zu einer Art „Versteck“ für das Monster, das gerade aus der API ausgewählt wurde.

Anhängen des Klickereignisses

Jetzt fügen wir ein weiteres Puzzleteil hinzu: das Anhängen des Klickereignisses. Siehe unten:

<img @click:=script.select payload:="{{ monster|json }}" />

Dies wurde hier mit der Ereignisanhangsyntax (@click:=) durchgeführt
Fall) und ein Payload-Attribut, mit dem wir das von uns ausgewählte Monster weitergeben können, indem wir auf dieses Bild klicken. Ereignisse und Skript-Tags können ein verwirrendes Thema sein, wenn Sie JavaScript-Neuling sind (und selbst wenn Sie es nicht sind!). Sehen Sie sich daher die Beispiele auf dieser Seite an, um weitere Beispiele für die Verwendung von Skript-Komponententeilen und das Anhängen von Ereignissen zu erhalten.

Anhängen des Klickereignisses

Lassen Sie uns zum Schluss die Monsterinformationen bedingt rendern, wenn ein Monster ausgewählt wird:

{% 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>&larr; 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>&larr; 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!

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie in