Ketahui cara mencipta komponen web galeri raksasa Zelda BOTW yang disokong API dalam PHPzasal2024-09-03 13:33:321113semak imbas

Tutorial modulo kembali!

Hei semua! Saya kembali dengan tutorial Modulo selepas cuti musim panas. Saya mempunyai banyak lagi tutorial dalam kerja -- jadi nantikan. Walau bagaimanapun, jika anda mempunyai sebarang idea tertentu untuk topik saya yang seterusnya, pastikan anda memberitahu saya dalam ulasan!

Tutorial terakhir saya ialah tutorial "HTML sahaja, tanpa JS" yang sangat pantas dan menyeronokkan tentang komponen Pokémon Dance Party dipacu API dalam kurang daripada 30 baris kod Komponen Web HTML. Beberapa tutorial saya sebelum ini adalah sedikit lebih serius, seperti tutorial yang lebih maju ini tentang mengurus keadaan persendirian dan awam. Jika itu kedengaran agak kering, maka anda bernasib baik, kerana tutorial hari ini adalah satu lagi yang menyeronokkan, dan tentang satu lagi permainan video yang digemari... Zelda: Breath of the Wild!

Sudah tentu, seperti biasa, teknik yang dipelajari dalam tutorial ini boleh digunakan untuk mana-mana API, jadi teruskan membaca untuk mengetahui lebih lanjut tentang galeri dipacu API!

Cara menggunakan API Hyrule Compendium

Tutorial ini adalah 100% terima kasih kepada API Hyrule Compendium yang dihoskan oleh Aarav Borthakur yang percuma, berlesen MIT, dan dihoskan dengan murah hati, yang merupakan pangkalan data dan API yang menyeronokkan dan diselenggarakan oleh peminat untuk mendapatkan maklumat francais Zelda: Breath of the Wild dan media. Kami akan menggunakan titik akhir "Monsters", tersedia di sini: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

Tangkapan skrin

Cubalah sekarang, dalam masa kurang daripada 30 saat: ??? Mahu melangkau ke hadapan? Tatal ke penghujung dan salin 39 baris kod HTML ke dalam mana-mana fail HTML tempatan, dan kemudian bukanya dalam penyemak imbas anda. Modulo tidak mempunyai kebergantungan dan juga dijalankan dibenamkan dalam fail HTML tempatan, jadi ia sangat mudah!

---

Mulakan dengan data

Mari kita mulakan dengan hanya 6 baris kod, dengan StaticData dan Templat untuk memaparkannya:

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

Dalam coretan ini, kami mempunyai satu baris yang sangat mudah; yang membuang sifat staticdata.data API Hyrule Compendium yang dikembalikan. Kami menggunakan penapis |json:2 untuk memaparkannya dalam format yang lebih mudah dibaca. StaticData menyokong JSON (antara format lain) di luar kotak, anda hanya memberikannya URL kepada API dan anda boleh mula menggunakan data tersebut. Adakah StaticData mengelirukan? Cuba tutorial ini untuk menyepadukan API GitHub atau bermain-main dengan contoh interaktif dalam bahagian "StaticData" dalam tutorial tutorial Modulo.js.

Cuba jalankan coretan itu. Lihat data yang terhasil? Kita perlu mengulanginya dengan untuk gelung.

Mencipta galeri imej

Sekarang kita dapat melihat bahawa atribut .data mengandungi Array Objek, mari kita pusingkannya dan jana galeri:

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

Ini akan menjana banyak teg img, masing-masing dengan src= diperuntukkan kepada sifat "imej" Objek dalam JSON asal Array dan {% untuk %} template-tag ialah sintaks untuk menduplikasi sedikit HTML untuk setiap item dalam tatasusunan (apatah lagi setiap indeks, cth. nombor yang dikira daripada 0). Untuk latihan lanjut, gelung untuk mempunyai banyak contoh interaktif dalam bahagian 4 tutorial Modulo.js.

Mencipta Negeri dan Skrip

Perkara paling penting seterusnya untuk dilakukan ialah mencipta teg Skrip baharu, yang boleh kita gunakan untuk menulis fungsi JavaScript satu baris yang ringkas:

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

Ini ialah teknik teras untuk skrip semasa menggunakan Modulo: Cipta fungsi yang membolehkan anda mengubah suai keadaan menggunakan JavaScript. Dalam kes ini, ia melakukan operasi yang sangat mudah: "Simpan raksasa ini untuk kemudian". Lebih tepat lagi, ia memberikan pembolehubah keadaan "dipilih" kepada muatan yang diberikan. Dengan cara ini, pembolehubah keadaan "dipilih" menjadi semacam "simpanan" untuk sebarang raksasa yang baru dipilih daripada API.

Melampirkan acara klik

Sekarang, mari tambahkan satu lagi kepingan teka-teki: Melampirkan acara klik. Lihat di bawah:

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

Ini dilakukan dengan sintaks lampiran acara (@klik:=, dalam ini
case), dan atribut muatan, yang membolehkan kami meneruskan raksasa yang kami pilih dengan mengklik imej ini. Teg Acara dan Skrip boleh menjadi topik yang mengelirukan jika anda baru menggunakan JavaScript (dan walaupun anda tidak tahu!), jadi baca dengan teliti contoh di halaman ini untuk mendapatkan lebih banyak contoh menggunakan bahagian komponen Skrip dan melampirkan acara.

Melampirkan acara klik

Akhir sekali, mari kita berikan maklumat raksasa secara bersyarat apabila raksasa dipilih:

{% 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!

Atas ialah kandungan terperinci Ketahui cara mencipta komponen web galeri raksasa Zelda BOTW yang disokong API dalam