Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Bekerja dengan Kerangka Kerja Manajemen Konten: MODx

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

Jika Anda tertarik dengan Content Management System (CMS) maka kemungkinan besar Anda pernah mendengar tentang MODx (modxcms.com). MODx bukan hanya CMS yang sangat fleksibel yang membuat pengelolaan konten situs web menjadi mudah, tetapi juga Kerangka Manajemen Konten yang kuat dengan API luas yang menjadikannya impian pengembang.

"MODx adalah Kerangka Aplikasi PHP open source dengan Fitur Powerful yang membantu Anda mengendalikan konten online Anda. Ini memberdayakan pengembang dan pengguna tingkat lanjut untuk memberikan sebanyak mungkin kontrol kepada siapa pun yang mereka inginkan untuk tugas pemeliharaan konten situs web sehari-hari. "




Dalam tutorial ini kita akan mengeksplorasi sejumlah fitur MODx standar untuk menggambarkan seperti apa rasanya bekerja dengan MODx dengan melalui proses pengambilan prototipe HTML statis dan mengubahnya menjadi situs web berbasis MODx yang berfungsi. Kami akan membahas banyak wilayah untuk melukiskan gambaran besar tentang apa yang dapat Anda lakukan dengan MODx tetapi hanya akan menelusuri permukaan dari apa yang mungkin.

Proyek kami akan didasarkan pada standar MODx menginstal. Anda dapat men-download rilis MODx terbaru dari situs MODx.

Untuk fokus pada pengembangan MODx sebenarnya, kita akan menggunakan HTML dari tutorial Prototyping dengan The Grid 960 CSS Framework sebagai template HTML dasar kami. HTML file dapat menjadi MODx template dengan sedikit usaha. Dan menggabungkan CSS kerangka kerja untuk MODx ada masalah. Konsep dasar adalah: jika bekerja di luar MODx kemudian ia akan bekerja dalam MODx. Saya membuat beberapa modifikasi kecil HTML untuk tutorial ini, serta membangun halaman "konten" sederhana didasarkan pada rumah. Ini adalah layout template yang kami akan dimulai dengan:

Berikut ini adalah peta jalan dari topik-topik utama yang kami akan mencakup:

  • Dasar: Sebelum kita mulai
  • Manager: Template dan dokumen
  • Pengganti: Konten dinamis
  • Potongan: Menambahkan cerdas navigasi
  • Potongan: Kode dapat digunakan kembali
  • Variabel template: Custom fields on steroid
  • Hirarki: Orang tua dan anak
  • Ditto: Repurposing konten
  • Kesimpulan

Dasar: Sebelum kita mulai

Langkah pertama adalah menyiapkan file HTML yang akan digunakan sebagai MODx template dengan menyesuaikan path file untuk mencerminkan struktur akhir file kami akan menggunakan. MODx menyediakan /assets/ folder untuk menyimpan file situs dan ini adalah apa yang kita akan mengikuti. Namun, Anda diizinkan untuk menempatkan file mana saja Anda inginkan. Ini adalah salah satu fitur yang membuat MODx mudah untuk mengintegrasikan ke dalam alur kerja Anda yang sudah ada.

Saya telah upload gambar dasar untuk template di folder /images/ yang sudah ada, dan kemudian menciptakan folder baru bernama "css" mana saya upload file css. Saat ini kami hanya khawatir dengan struktur situs dan tidak khawatir tentang konten dulu. Karena itu kita hanya perlu menyesuaikan path untuk file CSS dan gambar 'logo', konten yang tersisa akan dimasukkan melalui MODx.

Kami belum selesai dengan dokumen HTML. Namun, untuk proses selanjutnya kita dapat bekerja dalam ranah MODx.

Manager: Template dan dokumen

Manajer MODx adalah panel kontrol administratif. Login ke pengelola MODx.

Manajer pada dasarnya terdiri dari 3 bagian:

  1. Admin Menu terletak di atas;
  2. Pohon dokumen yang sebelah kiri; dan
  3. Tindakan/Edit Area adalah ke kanan dan akan berubah sesuai fungsi yang dipilih.

Pada titik ini kami ingin menambahkan file HTML kita ke lingkungan MODx sebagai template. Pilih sumber daya > mengelola sumber daya dari Admin Menu ke situs sumber daya.

Pilih template tab. Klik pada 'template baru' link untuk masuk ke layar template buat/edit. Mengatur nama dan deskripsi untuk template Anda, dan Opsional menambahkan template ke kategori untuk membantu menjaga sumber daya Anda terorganisir (kita akan menggunakan 960 sebagai kategori kami). Paste HTML untuk bidang teks label 'Kode Template (html)' dan klik pada "Save"

Ulangi proses dengan konten template. Kita sekarang harus memiliki template baru kami 2 serta Template Minimal yang dikemas dengan MODx dan diciptakan selama instalasi.

Selanjutnya kita akan melanjutkan dan membuat beberapa dokumen MODx (halaman web) untuk mewakili struktur awal situs kami. Mari kita mulai dengan mengedit dokumen yang sudah ada yang dibuat selama instalasi. Di Tree Dokumen (kolom sebelah kiri) klik kanan (kontrol-klik pada mac) pada nama dokumen untuk membuka Menu Kontekstual. Di menu pilih opsi 'Edit Document ".

Layar 'Buat/edit dokumen' sekarang dimuat di body utama manajer dan Anda siap mengedit dokumen yang dipilih. Data dokumen dikelompokkan dalam beberapa bagian sesuai dengan fungsi dan konten. Di bagian atas kami memiliki bagian Pengaturan Dokumen yang menampung parameter halaman serta informasi status.

Selanjutnya kita memiliki bagian Konten Dokumen di mana bidang konten utama untuk dokumen dikelola. Bidang content memiliki opsi untuk menyertakan RTE (Rich Text Editor).

Akhirnya ada bagian Variabel Template. Variabel Template adalah jawaban MODx untuk bidang Custom Content. Dan MODx melakukan ini dengan sangat baik. Kami akan melihat mereka beraksi sedikit nanti.

Oke, kembali ke bisnis. Kami dapat mengganti nama dokumen yang ada dan menjadikan ini sebagai Beranda kami. Untuk melakukan ini, saat dalam mode edit ketik Home di bidang 'Title', lalu hapus teks yang ada di bidang 'Long Title', dan juga hapus teks yang ada di bidang 'Menu Title' (kami tidak akan menggunakan bidang ini untuk tutorial ini). template, pilih template yang kami buat untuk beranda dari menu pull down 'Uses Template' (perhatikan; saat mengganti template Anda akan menerima peringatan segera kepada Anda bahwa laman akan dimuat ulang).

Setelah selesai klik pada Simpan dan Anda akan melihat bahwa dokumen dokumen pohon sekarang membaca 'Home'.

Selanjutnya kami akan menambah tingkat atas sisa konten halaman. Klik pada ikon 'Dokumen baru' di tool bar langsung di atas pohon dokumen untuk membuat dokumen kosong baru di tingkat akar.

Dalam bidang 'Title' jenis 'Artikel' dan pilih 'Isi' template kita buat sebelumnya dari menu 'Menggunakan template'. Karena kami mengerjakan dokumen baru default-nya negara diterbitkan up (default dapat diganti dalam pengaturan situs). Jadi sebelum kita menyimpannya, kita perlu mengaturnya untuk dipublikasikan dengan memilih tab Page Settings dan cek opsi yang Published.

Sebelum menyimpan dokumen pilih fungsi 'Tambahkan lain' (terletak hanya di bawah bagian atas Simpan tombol). Ini akan secara otomatis isyarat atas dokumen lain yang akan dibuat setelah menyimpan satu saat ini. Hal ini menghemat waktu yang tepat ketika menambahkan beberapa dokumen.

Ulangi proses ini untuk item menu tingkat atas yang tersisa; Artikel, Topik, Tentang, Editor, dan Kontak. Ketika Anda selesai document tree Anda akan terlihat seperti ini (catatan: nomor dalam tanda kurung adalah nomor ID dokumen, kami perlu mengetahuinya nanti):

Hingga saat ini kami telah meletakkan dasar untuk proyek kami dan telah melihat sangat sedikit dari apa yang dapat dilakukan MODx (meskipun cara mudah untuk membuat situs sangat mengesankan). Mari kita lakukan rekap cepat:

  • Kami memiliki template HTML 2;
  • kami telah meng-upload file instalasi modx kita;
  • dan kami telah membuat sejumlah dokumen tingkat atas atau 'halaman web'.

Percayalah, butuh waktu lebih lama untuk Anda untuk membaca apa yang telah kami lakukan sejauh dari itu akan membawa Anda untuk melakukannya. Seorang pengembang yang akrab dengan MODx bisa mencapai apa yang kita lakukan sejauh ini dalam sekitar 10 menit atau kurang.

Hal yang mendapatkan sangat menarik. Sekarang bahwa kita memiliki struktur situs dasar kita kita dapat mulai bekerja dengan MODx.

Pengganti: Konten dinamis

Sekarang kita akan kembali ke template kami dan menambahkan pengganti untuk konten dinamis. Seperti sebelumnya kita lihat sementara kami membuat dokumen baru, MODx menyediakan sejumlah bidang yang dapat kita gunakan sebagai dasar untuk manajemen konten kami. Di MODx kelompok bidang data yang terkait dengan setiap dokumen yang disebut sebagai 'Objek dokumen' dan bidang individu yang 'Dokumen variabel'. Setiap bidang dapat dimasukkan secara dinamis untuk MODx diberikan output dengan pengganti. Pengganti untuk variabel dokumen diidentifikasi oleh sintaks berikut: [* variabel-nama *]. Jadi jika ingin menambah bidang konten yang akan kita gunakan [* konten *] pengganti. MODx juga menyediakan pengganti untuk variabel situs global untuk data seperti 'situs url' atau 'nama situs', situs variabel diidentifikasi dengan syntax berikut: [(var-Name)]. Misalnya kita dapat mengambil<title>dan mencerminkan aktif Halaman judul dan nama situs dengan menambahkan pengganti sesuai. Berikut adalah judul tag kami asli:</title>

Dan di sini adalah setelah kita menambahkan pengganti:

Dan itu akan membuat sebagai:

Langkah kami selanjutnya adalah bekerja dengan template 'content' dengan menambahkan placeholder untuk konten dinamis. Anda dapat membuka templat secara langsung di Manajer atau menggunakan editor kode eksternal pilihan Anda dan menempelkan kembali kode ke MODx ketika Anda selesai (catatan: Anda juga dapat menyimpan file templat sebagai file 'include' eksternal jika diinginkan, tetapi kami tidak akan membahasnya dalam tutorial ini).

Dalam templat kami, kami akan memiliki konten dinamis di badan situs, footer, dan di bagian head. Berikut tampilan bagian head setelah menambahkan placeholder:

Pemberitahuan bahwa saya menambahkan <base> tag dengan pengganti [(site_url)] dan juga menambahkan pengganti [(modx_charset)] untuk menentukan charset. MODx memerlukan tag dasar untuk url relatif. Catatan: site_name dan modx_charset didefinisikan di panel konfigurasi situs di Manajer.

Untuk bagian konten umum, kami akan menambahkan konten dan placeholder pagetitle:

Dan akhirnya kita akan hanya menambah nama situs footer:

Simpan file template diedit. Jika Anda melihat pratinjau salah satu halaman konten situs kami Anda akan melihat bahwa halaman<title>akan mencerminkan judul halaman yang sedang Anda lihat.</title>

Potongan: Menambahkan cerdas navigasi

Sekarang kita akan diperkenalkan ke MODx potongan dengan menggunakan Wayfinder potongan untuk menyertakan navigasi 'pintar' kerja ke situs kami. Maksud saya cerdas: navigasi akan tahu kapan kita menambahkan dokumen baru dan harus menyadari lokasi saat ini di dalam situs dan menerapkan gaya yang tepat serta mengelola perilaku saat menangani dokumen anak-anak. Di MODx metode yang paling umum untuk membuat navigasi adalah dengan cuplikan 'Wayfinder'. Potongan di MODx pada dasarnya adalah script PHP yang akan dijalankan apabila dokumen parsing. Menambahkan cuplikan ke dokumen Anda adalah hampir sama dengan embedding fungsi PHP ke halaman web Anda. Potongan ditulis dalam kode PHP standar sehingga penggemar apapun pengkodean dapat dengan mudah membuat potongan mereka sendiri. MODx juga memiliki API yang kuat yang tersedia dalam potongan kode yang membuat berinteraksi dengan database konten dan fungsi-fungsi lain usaha.

Wayfinder akan menampilkan struktur dokumen dan hirarki sesuai dengan struktur situs di pohon dokumen. Secara default Wayfinder menampilkan output sebagai daftar unordered dengan setiap dokumen yang ditampilkan sebagai item daftar dan anak-anak berikutnya sebagai tertanam <ul>Daftar.</ul> Terdengar akrab, ini adalah output standar untuk sebagian besar menu bergaya CSS modern. Namun, Wayfinder memungkinkan Anda untuk mempersonalisasi setiap bagian dari output melalui potongan template. Dengan kata lain, Anda dapat memiliki hampir semua output yang Anda butuhkan dengan menerapkan template kustom untuk Wayfinder untuk digunakan. Juga jika Anda memiliki beberapa menu pada halaman yang sama, masing-masing dapat memiliki template output sendiri.

Snippet diidentifikasi oleh sintaks berikut: [[Nama-Snippet]] dan dapat menyertakan parameter tambahan untuk diproses: [[Nama-Snippet?&param1=`value`&param2=`value`]]. MODx memperlakukan setiap parameter sebagai variabel input dan membuatnya tersedia untuk digunakan di dalam Snippet dengan mulus. Snippet bukan bagian dari MODx, mereka adalah pengaya yang berfungsi dalam MODx. Snippet ditulis dan dikelola oleh komunitas MODx.

Dalam templat HTML asli kami, navigasi disusun seperti ini:

Ini mudah untuk Wayfinder dan tidak akan memerlukan templat keluaran kustom.

Untuk menambahkan menu yang dihasilkan secara dinamis ke template kami, ganti navigasi tiruan di atas dengan panggilan Wayfinder berikut:

Parameter startId=`0` menunjukkan di mana menu dimulai, dan dengan mengaturnya ke 0 kita memberi tahu Wayfinder untuk mendapatkan menu tingkat atas. &level=`1` memberitahu Wayfinder untuk hanya masuk sedalam 1 level (tidak ada sub menu). Setelah menambahkan panggilan Snippet, template seharusnya terlihat seperti ini:

Pratinjau dokumen konten dan Anda akan melihat bahwa navigasi sekarang aktif dan halaman saat ini ditata dalam keadaan 'active' dengan kelas='active'.

Anda juga akan melihat bahwa halaman 'Home' juga ada dalam menu tetapi kami tidak ingin halaman itu ada di sana. Tidak masalah. Edit halaman Home (klik kanan pada dokumen Home di document tree dan pilih 'Edit Document'). Pada tab 'General' di bagian Document Settings, Anda akan melihat bahwa opsi 'Show in menu' dipilih. Cukup hapus centang pada kotak dan simpan dokumen.

Jika Anda kembali ke situs, tautan Home tidak akan lagi terlihat.

Sekarang navigasi utama kami lengkap dalam template 'isi'. Tunggu sebentar! Bagaimana dengan halaman? Apakah kita perlu untuk mengulang semua lagi setiap template? Jawabannya adalah: tidak!

Potongan: Kode dapat digunakan kembali

Sepotong di MODx adalah sedikit dapat digunakan kembali kode HTML (tidak ada PHP). Potongan dapat digunakan untuk menyimpan markup yang umum di beberapa dokumen. Hal ini sangat berguna ketika mengelola sumber daya seperti template yang terdiri dari berbagai elemen markup umum seperti header dan footer situs. Dalam contoh kita, dimana kita hanya memiliki 2 template, hal ini tidak penting. Namun, bayangkan memiliki beberapa template dan harus memperbarui elemen yang umum di masing-masing. Dengan menggunakan sepotong Anda hanya akan perlu untuk mengedit itu sekali dan itu akan dianggap di mana-mana bongkahan disebut (dan akan cached hanya sekali menjaga ukuran file ke bawah). Sepotong dikenalpasti oleh sintaks berikut: {{bongkahan-Name}}

Membuat sepotong adalah banyak seperti membuat template. Sementara di Manajer pergi ke sumber daya > mengelola sumber daya dan pilih tab potongan.

Memberikan bongkahan nama unik dan deskripsi dan tempat HTML dalam bidang 'Potongan kode'. Kita akan menciptakan 2 potongan, satu untuk header dan yang kedua untuk footer. Dalam bongkahan header kami akan mencakup segala sesuatu di atas area konten dan nama itu "situs-header".

Dan untuk potongan footer kami akan mengulangi proses dan menyalin markup awal di div 'footer' sebagai potongan kode kita dan kita akan nama itu 'situs-footer'.

Sekarang kita dapat menggantikan markup untuk header dan footer dengan potongan-potongan yang sesuai dalam konten template. Ketika Anda selesai template akan terlihat seperti ini:

Sekarang kita dapat menerapkan potongan-potongan yang sama untuk 'Home' template dan membawa atas semua pekerjaan yang kita lakukan dengan konten template. Ini akan membantu kami ketika memperbarui template. Setelah selesai Anda sekarang harus melihat pratinjau situs dan akan mampu menavigasi antara halaman dan elemen umum harus tetap konsisten seluruh situs.

Sementara melihat pratinjau situs Anda mungkin telah memperhatikan sesuatu yang hilang. Desain menyatakan bahwa akan ada gambar pada setiap halaman. Namun, tidak ada variabel dokumen untuk menambahkan gambar. Tentu saya dapat menambahkan gambar menggunakan WYSIWYG editor jika gambar adalah bagian dari konten. Namun, gambar kami adalah dalam kolom terisolasi dari kolom isian konten. Anda mengatakan kepada diri sendiri: "Jika kami hanya memiliki cara untuk menambahkan kolom konten kustom".

Variabel template: Custom fields on steroid

Konsep bidang konten kustom ini tidak berarti baru, dan banyak CMS telah menerapkan beberapa jenis bidang kustom. Solusi MODx diberi nama variabel Template (atau TV). Ini adalah custom fields yang dapat format untuk jenis spesifik output, dapat menampilkan daftar yang dihasilkan secara programatik atau dapat menghasilkan data grid berdasarkan hasil query... Pada dasarnya ada TV untuk apa pun yang mungkin kebutuhan Anda. MODx memastikan bahwa data kustom di ujung jari Anda dan mulus diintegrasikan dengan isi dokumen standar.

Bidang kustom yang melekat pada dokumen oleh Asosiasi dengan template dokumen menggunakan (maka nama variabel Template). Hal ini memungkinkan Anda dapat membuat grup TV untuk bagian-bagian tertentu dari situs berdasarkan template yang halaman menggunakan. Anda dapat memiliki satu set TV untuk satu bagian, dan satu set lainnya untuk bagian lain, dan masih berbagi TV umum saat diperlukan. Template Variable menggunakan sintaks yang sama dengan Document Variable: [*Templat-Variabel-Nama*]

Kami akan membuat TV tipe gambar. TV Gambar akan menghasilkan bidang input khusus dengan akses ke Resource Manager (MODx saat ini menggunakan file manager MCPuk) yang mencakup browser gambar serta kemampuan untuk mengunggah gambar baru.

Untuk membuat Template Variable baru, di Manajer buka Resources > Manage Resources dan pilih tab 'Template Variable' dan klik tautan 'New Template Variable'. Isi dalam bidang nama variabel dengan nama unik. Nama ini akan digunakan untuk mengidentifikasi TV serta pengganti. Kami akan nama kami TV 'gambar' dan akan referensi dengan [* gambar *] pengganti. Kolom Caption digunakan untuk memberikan judul yang ramah yang akan digunakan sebagai label untuk TV bersama dengan bidang Description. Untuk Jenis Input kami ingin memilih opsi Image dari menu pull down. Secara opsional, kita dapat menggunakan Widget output untuk memformat hasil ketika ditampilkan di front end. Namun, dalam kasus kami, kami tidak akan menggunakan widget output.

Langkah terakhir adalah menetapkan variabel content ke template yang ingin kami gunakan dengan mencentang kotak di sebelah nama template di bagian Akses template. Untuk proyek kami, hanya halaman konten yang memiliki gambar sehingga kami tidak perlu menyertakan template 'Home'.

Secara opsional, kami juga dapat membatasi TV untuk grup pengguna tertentu. Ini sangat berguna dalam menggunakan konten kustom yang hanya dapat diedit oleh administrator.

Simpan TV dan sekarang Anda akan melihatnya terdaftar dengan sumber daya situs.

Sekarang jika Anda mengedit dokumen konten Anda sekarang akan memiliki akses ke TV Image yang baru saja kita buat. Klik tombol 'insert' yang dilampirkan ke bidang untuk mengunggah gambar atau untuk memilih gambar dari Browser Sumber Daya.

Setelah gambar dipilih di Resource Browser, pathnya akan tersedia di bidang input dan gambar akan ditampilkan langsung di Manajer di bawah bidang image. Meskipun MODx tidak secara asli menyediakan fitur manipulasi gambar, ada beberapa pengubahan ukuran gambar dan tambahan thumbnail yang tersedia yang dapat bekerja secara mulus dengan TV Image.

Selanjutnya cukup terapkan TV Image ke template 'content' dengan mengganti path gambar statis dengan placeholder untuk Template Variable:

Kami sekarang selesai dengan format keseluruhan situs. Sekarang Anda dapat menambahkan beberapa teks dan gambar ke halaman konten jika Anda mau. Masuk ke mode Edit dengan mengklik kanan pada dokumen yang ingin Anda edit di Document Tree dan pilih Edit Document. Setelah menambahkan beberapa konten dan gambar, situs mulai terbentuk. Dan jika Anda melihat situs Anda akan melihat itu mirip prototipe asli (sebagaimana mestinya).

Hierarki: Indux dan Anak

Untuk memulai tahap akhir ini, kita membutuhkan setidaknya 5 artikel untuk dikerjakan. Kami telah melihat cara membuat dokumen, tidak ada yang baru di sini. Namun kali ini kami akan menempatkan dokumen baru sebagai anak-anak dari dokumen 'Artikel' yang ada seolah-olah itu folder. Ini adalah saat Document Tree menjadi sangat berguna, karena itu akan memberi Anda representasi visual dari hierarki induk/anak dokumen.

Masuk ke Manajer dan di Document Tree, klik kanan (klik control pada mac) pada dokumen berjudul 'Articles' untuk membuka menu kontekstual. Pilih 'Create Document Here' dari opsi menu untuk membuka layar Buat/Edit Dokumen.

Pastikan bahwa dokumen diatur untuk menggunakan template 'content' dan lanjutkan untuk mengisi bidang konten, termasuk TV Image, dan simpan dokumen.

Jika sekarang Anda melihat Document Tree sekarang Anda akan melihat tanda + di sebelah dokumen Artikel. Ini berarti bahwa dokumen ini memiliki anak. Klik pada + untuk membuka dan melihat dokumen anak-anak.

Sekarang buat 4 anak lagi dengan mengulangi proses yang baru saja kita lakukan, atau dengan menduplikasi dokumen yang ada (tip: menduplikasi dokumen akan menghemat waktu karena konten juga akan digandakan). Untuk menduplikasi dokumen, pilih dokumen dan pilih 'Duplicate Document' dari menu kontekstual. Dokumen baru akan dibuat pada tingkat yang sama dengan aslinya.

Setelah dokumen Artikel selesai harus memiliki 5 dokumen anak lengkap dengan konten. Jika Anda melihat pratinjau dokumen artikel di front-end Anda akan melihat bahwa menu utama akan mencerminkan bahwa dokumen-dokumen ini adalah anak-anak dari item menu Artikel.

Ditto: Konten Berulang

Tugas akhir kita dalam tutorial ini adalah membangun halaman Home. Seperti sebagian besar situs majalah, konten yang ditampilkan di halaman home diambil dari halaman di dalam situs dan bukan dari halaman beranda itu sendiri. Desain kami membutuhkan 1 berita utama dan 4 cerita sekunder, dan kami ingin judul menjadi artikel yang dibuat baru-baru ini (dalam skenario kehidupan nyata, kami kemungkinan besar akan menggunakan tanggal publikasi). Kami juga ingin ini otomatis, sehingga editor hanya perlu menambahkan artikel dan tidak perlu khawatir dengan halaman home.

Untuk mencapai ini dengan MODx kita akan menggunakan snippet bernama Ditto (dikembangkan oleh Mark Kaplan). Ini adalah salah satu alat paling berguna yang akan Anda lihat di lingkungan CMS apa pun. Ditto melakukan begitu banyak, dengan sangat baik, sehingga sulit untuk meringkas apa yang dapat dilakukannya. Pada dasarnya ini memberi Anda cara untuk dengan mudah meminta konten situs, kemudian menyempurnakan hasil dengan beberapa filter, sambil tetap memberikan kontrol total pengembang atas struktur output dari hasil.

Dengan melihat templat home kita dapat mengidentifikasi bahwa ada 2 tampilan keluaran yang berbeda yang perlu kita tangani. Ada bagian atas dengan artikel utama yang juga termasuk gambar untuk artikel tersebut. Dan ada bagian sekunder yang memiliki ringkasan dari 4 artikel terbaru tetapi tanpa gambar:

Seperti kebanyakan solusi dalam MODx, ada berbagai pendekatan untuk menyelesaikan tugas kami. Kami dapat memperlakukan headline dan artikel sekunder secara independen dengan panggilan Ditto individual, yang akan berfungsi dengan baik. Namun, kami akan melakukannya dengan satu panggilan Ditto sederhana dan selanjutnya hanya satu permintaan basis data. Ingat bahwa Ditto adalah snippet sehingga mengikuti sintaks snippet yang berarti kita dapat mendefinisikan parameter dalam panggilan snippet untuk mengkonfigurasi aksi snippet.

Edit templat home (ide bagus untuk membuat cadangan terlebih dahulu karena kita akan perlu merujuk markup asli nanti) dan mengganti seluruh bagian konten dengan panggilan Ditto ini:

Template Home sekarang akan terlihat seperti ini:

Dalam panggilan tersebut kami menetapkan parameter berikut:

  • parents=`2` memberi tahu Ditto untuk hanya mengembalikan dokumen yang merupakan anak-anak dari dokumen ID 2;
  • &display=`5` memberitahu Ditto untuk hanya menampilkan 5 artikel
  • &orderBy=`createdon DESC dan ini memberitahu Ditto untuk mengurutkan hasil berdasarkan bidang 'Createdon' (yang merupakan timestamp untuk saat dokumen dibuat) variabel dokumen dalam urutan DESCending (seperti kueri SQL).

Pratinjau halaman home dan Anda akan melihat hasil kueri kami sebagai daftar artikel dengan beberapa informasi standar tambahan. Anda dapat bereksperimen dengan mengubah nilai parameter dan melihat bagaimana hasilnya akan berubah dengan sesuai.

Kami mendapatkan hasil yang tepat tetapi format dan kontennya tidak cukup disana. Seperti yang telah kami sebutkan sebelumnya ketika kita berbicara tentang Wayfinder, Ditto juga memungkinkan kita untuk memformat output untuk mengakomodasi kebutuhan kita melalui snippet template. Kami sekarang akan menerapkan formating ke hasil Ditto kami.

Sesuai namanya, Template Chunk adalah chunk, jadi kita mulai dengan membuka tab Chunk di bagian Manage Resources. Buat chunk baru dan berikan judul deskriptif seperti "home-articles". Ini akan menjadi snippet template (atau tpl) untuk artikel sekunder.

Kami akan menggunakan markup dari template laman home asli sebagai titik awal untuk tpl kami. Kemudian kami akan mengganti teks statis dengan konten dinamis dengan menggunakan placeholder. Ini mirip dengan menambahkan placeholder ke template situs, namun placeholder dikembalikan dari kueri Ditto daripada dari dokumen aktif.

Ini markup asli. Tempel ini sebagai konten chunk baru kami:

Ganti konten statis dengan placeholder dinamis. Perhatikan bahwa ketika digunakan dalam snippet template, kita perlu menggunakan sintaks berikut untuk placeholder: [+varName+].

Setelah menambahkan placeholder, bilah di atas sekarang akan terlihat seperti:

Edit panggilan Ditto untuk memasukkan parameter &tpl=`home-articles` untuk mendefinisikan snippet template yang akan digunakan untuk tampilan output.

Pratinjau halaman beranda dan itu akan menampilkan artikel sebagai kolom dalam urutan descending.

Perhatikan bahwa kita mendapatkan seluruh isi artikel, tetapi semua yang kita inginkan adalah bagian pertama dari artikel yang dipotong setelah sejumlah karakter sebagai ringkasan. Tidak masalah. Kami hanya dapat menambahkan &extenders=`summary` ke panggilan Ditto dan menggunakan placeholder [+summary+] daripada placeholder [+content+] dalam chunk tpl. Extender akan memperluas fungsi Ditto untuk tujuan tertentu, seperti plugin. Dalam hal ini menambahkan fungsi Summary. Chunk tpl sekarang akan terlihat seperti ini:

Panggilan Ditto kami terlihat seperti ini sejauh ini:

Dan halaman home sekarang akan terlihat seperti ini:

Langkah terakhir adalah mendesain artikel terbaru dan menatanya sebagai headline. Ditto memberi kita metode untuk ini dengan menggunakan parameter tplFirst yang digunakan untuk memberikan item pertama mengembalikan tampilan yang dipersonalisasi.

Buat chunk baru dan beri nama 'home-headline' dan paste pada markup asli untuk bagian headline:

Ganti konten statis dengan placeholder, termasuk placeholder untuk Template Variable 'image' (bidang kustom) untuk juga membawa gambar artikel ke judul:

Simpan chuk dan tambahkan panggilan Ditto untuk memasukkan parameter &tplFirst=`home-headline` yang memberitahu Ditto untuk menggunakan chunk `home-headline` untuk memformat hasil pertama yang dikembalikan. Template home akhir, termasuk panggilan Ditto terakhir, akan terlihat seperti ini:

Pratinjau halaman home dan Anda akan melihat sesuatu seperti gambar di bawah. Klik tautan 'Continue Reading' dan Anda akan dibawa ke halaman artikel dengan cerita lengkap.

Situs ini sekarang berfungsi. Dengan informasi yang kami pelajari di atas, Anda dapat menambahkan beberapa sentuhan akhir sendiri. Coba gunakan Ditto untuk membuat daftar 'Artikel Terbaru' di halaman konten, atau tambahkan index Artikel di halaman Artikel.

Kesimpulan

Tutorial ini agak ambisius. Tujuan saya adalah untuk menggambarkan betapa mudahnya bekerja dengan MODx. Dan meskipun saya telah memperkenalkan konsep-konsep seperti {{chunk}} [*document-variable*] dan [[Snippets]], ini hanya menunjukkan sebagian kecil dari apa itu MODx. Saya mendorong Anda untuk mengunduh dan menginstal MODx dan mencobanya sendiri. Komunitas MODx adalah kekuatan pendorong di balik kesuksesan itu dan forum komunitas sangat ramah dan kaya informasi, pastikan untuk memeriksanya.

  • Berlangganan NETTUT RSS Feed untuk lebih banyak artikel dan pengembangan web harian.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.