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

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

3 Tutorial Cara Membangun Toko Online di WordPress
3 Tutorial Cara Membangun Toko Online di WordPress
Seiring perkembangan teknologi internet saat ini, semakin
Bagaimana Cara Menggunakan WordPress Untuk Pemula
Bagaimana Cara Menggunakan WordPress Untuk Pemula
WordPress sendiri adalah salah satu fasilitas yang
Membuat Simple Syntax Highlighter Di Blogger
Membuat Simple Syntax Highlighter Di Blogger
Apakah anda Ingni Menggunakan Prettify Syntax
Cara Membuat Fanpage Facebook Melayang Di Blog
Cara Membuat Fanpage Facebook Melayang Di Blog
Bagi Para Blogger Yang mempunyai Fanpage
Memasang Widget Random Post di Blogger dengan Thumbnail
Memasang Widget Random Post di Blogger dengan Thumbnail
Random Post Blogger Thumbnail – Apakah
Tips dan Trik Menggunakan WordPress untuk Pemula
Tips dan Trik Menggunakan WordPress untuk Pemula
Apakah anda baru Menggunakan CMS WordPress
2 Cara Membuat akun OpenID untuk Berkomentar di Blog
2 Cara Membuat akun OpenID untuk Berkomentar di Blog
alimadura.com – Pada artikel kali ini
Must read×

Top
web statistics