Menggunakan Vue.js untuk WordPress-Style Shortcodes Part-3

In Blogging

Jika teman-teman belum mengikuti part-1 dan part-2 nya silahkan teman-teman buka link tersebut ya, di part-3 ini kita akan langsung mencoba menggunakan Vue.js untuk WordPress-Style Shortcodes.Mengkonversi string kita dapatkan dari backend ke beberapa struktur data lain sehingga kita dapat alasan tentang tata letak dan konten.

Langkah 1: Abstract Syntax Tree

Langkah pertama ini tidak begitu menarik. Saya telah membangun sebuah library kecil, shortcode-tokenizer, untuk lexing blok contoh di part-2 dan mengeluarkan  Abstract Syntax Tree (AST).

Dari contoh di atas, kita mendapatkan sebuah array dari objek bersarang seperti ini:

Ini memberikan kita dengan struktur objek bersarang yang memiliki semua parameter disiapkan dan semua elemen berlabel sebagai teks, menutup diri, atau shotcode biasa.

Kita akan menggunakan struktur data ini sebagai sumber apa untuk membangun di Vue.

Langkah 2: Pemetaan kode untuk komponen

Mencari tahu bagaimana kita memetakan kode untuk komponen kami seperti productlist atau ProductCard.

komponen Vue biasanya dinamai sesuai dengan impor komponen orangtua, tapi Vue cukup fleksibel dan Anda dapat referensi komponen Anda dalam beberapa cara: TitleCase, lowerTitleCase, dan kebab-kasus. Yang terakhir adalah sintaks yang sama kita akan gunakan untuk shortcode kami, jadi ini tidak boleh terlalu keras. Dalam kebanyakan kasus, kita bisa menggunakan nama yang sama untuk merujuk pada komponen Vue:

Productlist bisa sekarang, seperti yang Anda tahu, dirujuk sebagai <produk-list> di template komponen, berkat keajaiban Vue sedikit. Vue mengekspos fungsi nama transformasi melalui Vue.util. Kami akan memanfaatkan mereka nanti.

Jadi meskipun kita tidak benar-benar perlu untuk memetakan nama-nama kode, ini masih akan menjadi ide yang baik karena tidak akan main-main dengan cara kami ingin bekerja dengan Vue.

Manfaat lain adalah bahwa kita dapat merujuk peta ini selama parsing. Selain itu, dalam kasus kami menemukan kode yang tidak diketahui (oleh tidak adanya di peta), kita bisa memperlakukannya sebagai kesalahan di tempat yang sama seperti sintaks kesalahan-daripada harus membiarkan kesalahan terjadi di runtime Vue ketika mencoba untuk instantiate komponen yang tidak ada.

Jadi mari kita membuat peta:

Kuncinya adalah shortcode dan nilai adalah nama kebab-cased komponen Vue kami

Langkah 3: Mengakhiri (atau memulai)

Mencari tahu bagaimana menggunakan Vue untuk membangun komponen baru yang dapat komponen instantiate.

Sekarang bahwa kita memiliki AST, kita perlu mengurai atau membuat ke dalam template dan komponen menggunakan peta kami didefinisikan dalam langkah sebelumnya.

Vue menyediakan beberapa built-in komponen yang dapat membuat halaman teman-teman lebih dinamis dalam arti bahwa Anda tidak perlu menentukan apa komponen diserahkan atau bagaimana mereka diberikan terlebih dahulu. Ini adalah <komponen> dan <Slot> masing-masing.

Fungsionalitas <Komponen> komponen dekat dengan apa yang kita inginkan. Namun, kita harus menyertakan semua komponen kami pada setiap halaman dan di setiap komponen orangtua di mana kita ingin menggunakan atau slot yang shortcode, karena slot, dalam teori, bisa berisi referensi untuk semua komponen kami

Ini sedikit rumit untuk sedikitnya. Saya tidak ingin mengulang ini untuk setiap komponen induk. tugas ini perlu dikemas juga. Semoga bermanfaat.

Tags: #tips blog #trik blog #tutorial blog

Cara Factory Reset Infinix Mudah dan Cepat
Cara Factory Reset Infinix Mudah dan Cepat
Jika Anda memiliki ponsel Infinix, Anda
Membuat Blog Agar lebih telihat menarik dan nyaman dilihat
Membuat Blog Agar lebih telihat menarik dan nyaman dilihat
Membuat Blog Agar lebih telihat menarik dan
Cara Mengatasi Insufficient Memory Android
Cara Mengatasi Insufficient Memory Android
Smartphone menjadi perangkat yang sudah semakin
Proses suatu blog agar terindex oleh Google
Proses suatu blog agar terindex oleh Google
Proses suatu blog agar terindex oleh Google
Cara Bypass Huawei E5577 Dengan Mudah
Cara Bypass Huawei E5577 Dengan Mudah
Anda pernah mendengar istilah bypass? Dalam
Strategi dan Tips Main Saham ala Warren Buffett
Strategi dan Tips Main Saham ala Warren Buffett
Pernah mendengar saham Warren Buffet? Atau
Tips dan Trik Mengubah Tampilan Windows 7
Tips dan Trik Mengubah Tampilan Windows 7
Sebagian orang tentunya sering merasa bosan
Cara Menambahkan Gambar Background Di WordPress Part II
Cara Menambahkan Gambar Background Di WordPress Part II
Cara Menambahkan Gambar Background Di WordPress Part
Must read×

Top
web statistics