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

Template Ruby dengan Slim: Bagian 2

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Pada bagian kedua dan terakhir dari serial mini ini, kita akan menyelesaikan pengantar ini dengan beberapa bagian tentang keluaran kode Ruby, interpolasi, teks biasa dan bagaimana menyesuaikan Slim dengan kebutuhan Anda. Setelah artikel itu Anda harus siap untuk beberapa tindakan Slim.

Kode Keluaran

Anda telah melihat sedikit tentang cara menggunakan Ruby di template Anda. Bagian ini memberi Anda semua yang Anda butuhkan untuk memanfaatkannya. Pada artikel pertama, kita telah menggunakan Ruby dalam template kita. Biarkan saya mengingatkan Anda apa yang saya maksud:

Slim

Seperti yang bisa Anda lihat, di dalam tag head ini, kita telah menggunakan beberapa metode dari Rails untuk menangani gaya dan barang JavaScript—tidak ada yang utama. Yang perlu Anda lakukan untuk menjalankan kode Ruby adalah menambahkannya dengan tanda sama dengan =. Jika kode Anda perlu menyebar ke beberapa baris, tambahkan saja garis miring terbalik \ di akhir setiap baris dan teruskan ke baris berikutnya. Jika Anda mengakhiri kalimat dalam koma ,, maka Anda tidak memerlukan garis miring terbalik. Sentuhan kecil yang bagus jika Anda bertanya kepada saya.

Mari kita lihat contoh lain yang lebih konkret. Penulisan formulir sering kali menjadi banyak-masalah kode boilerplate, banyak pengulangan, dan semua tanda <%= %> yang ditakuti di ERB ini. Ini bisa berantakan dalam sekejap. Bisa lebih baik, ya?

ERB

Banyak hal untuk ditulis karena membuat objek @agent baru, bukan? Slim memungkinkan Anda menangani ini dengan lebih ringkas. Kita hanya menyimpan tanda sama dengan dan menyingkirkan sebagian besar hal lainnya. Tadaa!

Slim

Anda bisa dengan jelas melihat mengapa proyek ini disebut Slim. Begitu banyak lemak berlebih hilang. Jangan katakan bahwa Anda tidak menyukai apa yang Anda lihat—saya tahu Anda menggalinya! Hanya sebuah tanda = dan Anda dapat mengisi markup Anda dengan kode Ruby—dalam hal ini dari Rails, tentu saja. Dan bila Anda membandingkannya dengan HTML yang di-render di halaman akhir, sulit untuk mengabaikan seberapa kompak Slim sebenarnya.

Keluaran HTML

Ingatlah pertanyaan awal yang dipandu oleh tim inti Slim: "Apa minimum yang diperlukan untuk membuatnya bekerja?" Ketika Anda melihat keluaran HTML terakhir, saya kira cukup adil untuk mengatakan bahwa Slim telah menjawab pertanyaan itu dengan cukup berhasil—tidak ada keluhan di saya. Saya ingin memasukkan beberapa contoh kecil lagi untuk memberi Anda lebih banyak kesempatan untuk membiasakan diri dengan penampilan di Slim ini.

Cuplikan ERB ini …

… menjadi ini di Slim:

ERB

Slim

Anda juga bisa menulis ini dengan cara yang lebih efisien melalui interpolasi. Anda tidak ingin terlalu gila dengan yang itu. Ini akan terlihat seperti ini:

Slim

Interpolasi Teks

Saya sebutkan ini sebelumnya sebentar, tapi karena ini adalah bentuk keluaran kode Ruby ia milik bagian ini juga. Anda bisa menggunakan interpolasi teks standar dari Ruby di template Slim Anda juga, tentu saja.

Slim

HTML

Seperti yang terlihat di atas, garis miring terbalik sederhana \ meng-escape dari interpolasi.

Kode Kontrol

Satu lagi untuk jalannya. Katakanlah Anda ingin menggunakan beberapa kondisional dalam view Anda. Mirip dengan Haml, Anda menandakan kode Ruby yang tidak seharusnya dikeluarkan ke halaman dengan tanda hubung sederhana -. Anda telah melihat ini di contoh di atas di mana kami menggunakannya untuk mengulangi dari @agents tanpa menampilkan bagian kode tersebut.

Meskipun Anda harus berusaha menjauh dari segala jenis kondisional dalam view Anda jika memungkinkan dan mencoba menemukan solusi OOP yang lebih baik untuk kasus semacam itu—yang merupakan cerita untuk lain waktu—mereka akan terlihat seperti ini:

Slim

ERB

Jika Anda ingin mengeluarkan kode tanpa meng-escape HTML, cukup gunakan dua tanda sama dengan ==. Itu saja!

Sebelum kita melanjutkan, saya pasti meluangkan waktu untuk menyebutkan hal ini: Seperti yang mudah Anda sadari, banyak kode view—alias kode Ruby dalam konteks kita—adalah bau yang serius dan harus diminimalkan setiap saat. Hanya karena Slim membuatnya bahkan mungkin lebih memikat template Anda dengan banyak logika, tidak berarti Anda harus melakukannya. Berlatihlah kendala di departemen itu! Dilakukan dengan benar, di sisi lain, Slim membuatnya sangat elegan untuk menyuntikkan Ruby jika diperlukan.

HTML Inline

Jika Anda merasa perlu menulis HTML di template Slim Anda, Anda punya pilihan untuk melakukannya. Saya belum pernah menggunakan fitur tersebut, dan saya juga tidak mau menggunakannya, tapi mungkin selama fase transisi ini bisa membantu para pendatang baru. Mari kita lihat sekilas.

Slim

Saat Slim bertemu dengan braket sudut kiri <, ia tahu bahwa Anda ingin mencampur beberapa HTML.

Teks Verbatim (Kata demi Kata)

Karakter pipa | memberi sinyal ke Slim bahwa Anda ingin memiliki kata teks biasa kata demi kata—dan hanya menyalin barisnya. Akibatnya, ini memungkinkan Anda menghindari jenis pemrosesan apapun. Dokumentasinya mengatakan bahwa jika Anda ingin menulis teks secara verbatim melalui banyak baris, Anda harus memasukkan teks itu setiap jeda baris.

Slim

Keluaran HTML

Tangkapan Layar

Screenshot of the templates output

Tangkapan layar dari keluaran templateJika Anda meletakkan teks pada baris yang sama dengan karakter pipa, Anda dapat mengatur margin kiri setelah pipa ditambah satu spasi tunggal. Karena penasaran, saya membodohi sedikit ini dan menemukan hasil berikut. Hanya variasi contoh terakhir yang memiliki sedikit cegukan yang jelas yang harus Anda sadari—ini menelan kata pertama dari kalimat tersebut.

Slim

Tangkapan Layar

Screenshot of the output by the above source code

Bagaimana keluaran diterjemahkan ke markup HTML Anda sedikit berbeda.

Komentar

Tentu perlu mengomentari kode Anda sesekali. Jangan lupa, komentar terlalu banyak itu juga berbau. Coba saja tetap sangat minimal!

Sebuah garis miring ke depan / adalah semua yang Anda butuhkan untuk memberikan komentar tentang kode apa pun.

Slim

Boom! Dan sekarang paragraf ini hilang dari halaman. Komentar ini tidak meninggalkan jejak dalam markup HTML akhir. Anda hanya perlu menerapkannya pada penyeleksi induk dan semua anak-anaknya akan dikomentari juga. Jadi, komentar pun ramping dan minimal.

Jika, di sisi lain, Anda ingin beberapa komentar HTML <!-- --> yang muncul pada hasil akhir yang di-render, Anda hanya perlu menambahkan tanda seru ! setelah garis miring.

Slim

Keluaran HTML

Rapi!

Pintasan Kustom

Kita telah menggunakan jalan pintas selama ini. Saat Anda mengetikkan titik . atau simbol hash # Anda memberi tahu Slim bahwa Anda ingin menggunakan jalan pintas yang telah ditentukan untuk kelas dan id. Itu tentu saja merupakan default yang sangat bagus, tapi apa yang bisa Anda lakukan untuk mengembangkannya dan membuat cuplikan snippety Anda sendiri? Kita bisa melakukan ini untuk tag dan atribut. Selamat datang di kedahsyatan Slim!

Di Rails, kita hanya perlu menyiapkan penginisialisasi dengan pola berikut:

config/initializers/slim.rb

Di aplikasi Sinatra, Anda cukup menambahkan konfigurasi yang sama di manapun di bawah baris di mana Anda require 'slim'.

your_sinatra_app.rb

Anda bisa mengatur pilihan pada Slim::Engine dengan memberikan hash dengan pintasan yang Anda butuhkan. Pada contoh di atas, kami menginstruksikan Slim untuk menggunakan c sebagai pintasan untuk tag container. Anda akan menggunakannya seperti ini di file Slim Anda:

Slim

Dan HTML yang di-render akan terlihat seperti ini, tentu saja:

HTML

Cukup bagus, ya? Tapi Anda tidak berpikir di situlah musiknya berhenti, bukan? Kita bisa mengambilnya lebih jauh dari itu. Izinkan saya memberi contoh yang sedikit lebih terlibat:

config/initializers/slim.rb

Dalam contoh ini, saya tidak hanya membuat tag kustom namun juga menyediakan atribut kustom yang praktis. Mari kita membedahnya langkah demi langkah. Omong-omong, saya memecahkan opsi hash selama beberapa baris agar tetap terbaca dan menghindari serangkaian kode panjang yang tidak disukai orang. Terbaca jauh lebih bagus, bukan begitu?

Melalui simbol ampersand &, sekarang kita bisa membuat tag input, dan kita hanya perlu menyediakan sebuah type—yang langsung mengikuti ampersand. Kita bisa menggunakan simbol yang masuk akal untuk digunakan; tidak perlu menggunakan yang sama dengan yang saya lakukan. Hati-hatilah, dan mencoba membuat keputusan tanpa kompromi di departemen itu.

Slim

Keluaran HTML

Bila Anda membuat perubahan pada penginisialisasi ini dengan cara pintasan kustom Anda, jangan lupa untuk memulai ulang server lokal Anda. Tanpa itu, perubahan Anda tidak akan tercermin saat preprocessing.

Selanjutnya, jika saya memerlukan atribut role, sekarang saya bisa memberi awalan saja dengan simbol @.

Slim

Keluaran HTML

Penyegaran: Atribut role adalah pendekatan semantik untuk menggambarkan peran elemen yang bersangkutan—jika Anda perlu menentukan tujuan elemen.

Lihat, melalui titik kita mendapatkan kelas class="person" dan @admin memberi kita role="admin". Cukup pintar, tapi kita bisa mengambil langkah kecil ini lebih jauh dan menggunakan array untuk menentukan banyak atribut yang seharusnya diciptakan melalui satu pintasan.

Slim

Keluaran HTML

Karena kita menghubungkan array atribut untuk pintasan ^ kita, Slim menciptakan atribut data-role dan role secara bersamaan melalui satu simbol. Itu bisa menjadi sangat berguna. Bayangkan jika Anda ingin mengeluarkan elemen yang mirip dengan yang berikut dan bisa melakukannya secara ringkas dengan pintasan dan beberapa kode Ruby.

HTML

Menulis semua ini dengan tangan nampaknya tidak menjadi penggunaan terbaik waktu Anda—kita memiliki kode untuk melakukan pekerjaan itu untuk kita. Nah, begitulah, hanya itu yang perlu Anda ketahui untuk menciptakan cara pintas Anda yang mengagumkan—atau untuk menciptakan kekacauan besar saat Anda tidak berlatih sedikit kendala. Saya akan merekomendasikan untuk tidak terlalu luas dengan hal ini—terutama cobalah untuk menjauh dari menentukan jalan pintas yang menggunakan simbol yang sudah dilekatkan Slim.

Penyegaran: Atribut data- digunakan untuk memiliki beberapa data pribadi di halaman atau aplikasi Anda. Hal-hal yang membantu Anda menyaring konten, misalnya. Mereka adalah atribut kustom yang dapat digunakan pada semua elemen HTML. Menggunakannya untuk tujuan JavaScript adalah praktik umum lainnya. Hal ini juga sangat berguna untuk menguji elemen pada halaman jika Anda ingin memastikan bahwa elemen tertentu muncul dan Anda ingin agar desainer tidak berantakan dengan gaya Anda.

Mengkonfigurasi Slim

Sebelum Anda pergi, saya ingin menunjukkan sedikit mengintip ke dalam opsi konfigurasi yang luas dan bagaimana Anda menerapkannya. Untuk Rails, Anda akan membuat file environment seperti config/environments/development.rb dan tentukan pilihan yang Anda butuhkan. Anda cukup menempatkan konfigurasi Anda beberapa tempat di dalam blok Rails.application.configure.

Dalam konfigurasi ini saya memastikan tag default yang akan dibuat jika nama tag diabaikan adalah sebuah tag <p>—bukan tag div, yang merupakan pengaturan standar. Selain itu, saya menyesuaikan tabsize untuk menggunakan dua spasi dan akhirnya menambahkan dua pembatas lagi untuk membungkus atribut tag. Sekarang saya bisa menggunakan < > dan « » juga untuk itu. Tidak terlalu berguna tapi bagus untuk tujuan demonstrasi.

Pada contoh di bawah ini, Anda dapat melihat bahwa semua pembatas untuk pembungkus atribut menghasilkan keluaran yang sama—juga .some-class atau #some-id menciptakan tag <p> per default.

Slim

Keluaran HTML

Sebagai alternatif, Anda juga dapat mengatur hal ini di config/initializers/slim.rb seperti yang saya tunjukkan pada bagian tentang pintasan kustom.

Bagi Sinatra, ini adalah latihan yang sama seperti yang dibahas di bagian pintasan juga. Cukup atur opsi Anda di suatu tempat di bawah pernyataan require 'slim' dan Anda siap untuk pergi.

Lihatlah dokumentasi di bawah "Available options" untuk membaca lebih lanjut tentang apa saja yang tersedia untuk konfigurasi. Slim memberi Anda banyak pilihan untuk dimainkan.

Pemikiran Akhir

Itu pada dasarnya. Ada satu atau dua topik yang lebih maju yang harus Anda gali jika diperlukan, tapi saya pikir mereka kebanyakan tidak ramah-pemula dan juga tidak banyak digunakan setiap harinya. Saya ingin menjaga hal-hal sederhana dan menunjukkan semua yang Anda butuhkan untuk beralih dengan cepat ke mesin template yang mengagumkan ini. Bersenang-senanglah, dan semoga Slim sekarang menjadi salah satu mainan baru favorit Anda!

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.