Pengantar ramping template

() translation by (you can also view the original English article)

Mengapa langsing?

Jika Anda hidup dan bernapas di Ruby tanah dan telah memberikan Haml tembakan sebelum, Anda akan mungkin sudah tahu beberapa argumen yang saya akan membuat. Saya pikir itu namun ide yang baik untuk mengikuti bersama karena Anda mungkin sudah memutuskan untuk menggunakan mesin template lebih minimalis dan saya ingin Anda untuk melihat keuntungan yang ramping menawarkan juga.

Sebelum kita menyelam ke dalam mengapa Slim keren, saya ingin menutupi apa Slim sebenarnya dan apa yang dilakukannya untuk Anda. Dokumentasi merangkum hal ini dengan baik:

"Slim adalah mesin template cepat, ringan dengan dukungan untuk Rails 3 dan 4".

Anda juga dapat menggunakannya dengan Sinatra dan bahkan polos rak. Jadi, jika Anda sedikit lelah menggunakan ERB untuk menulis template Anda atau Anda tidak super puas dengan apa Haml yang ditawarkan, maka Slim adalah pohon yang tepat untuk barking up.

Dalam hal sintaks, orang di belakang Slim mencoba untuk menemukan jawaban untuk pertanyaan berikut: "Apa adalah minimum yang diperlukan untuk membuat karya ini?" Untuk menulis jumlah minimal kode front-end mungkin, ini yakin kedengarannya seperti pertanyaan yang tepat untuk bertanya.

Apakah Slim menawarkan solusi yang sempurna untuk semua kekhawatiran template Anda? Mungkin tidak, tapi terus terang, itu hanya mungkin menawarkan yang terbaik! Apakah mudah untuk belajar? Saya berpikir begitu, tapi sulit untuk tahu apa yang orang lain anggap mudah. Aku akan mengatakan ini, meskipun: dibutuhkan sedikit membiasakan diri, tetapi sudah pasti tidak roket sains. Jadi tidak perlu merasa terintimidasi jika Anda agak baru untuk sisi pengkodean hal. Anda akan memiliki waktu yang baik dengan itu? Benar-benar!

Jadi, mengapa Slim? Jawabannya cukup sederhana, saya pikir. Markup Anda harus sebagai mudah dibaca dan indah mungkin! Anda harus memiliki waktu yang baik bekerja dengan itu, dan semakin sedikit waktu Anda perlu menghabiskan mengarungi ton hitungan tag yang lebih baik.

Apa indah, Anda mungkin bertanya? Tentu saja, itu tidak jawaban saya akan mencoba untuk mengatasi, tapi berada minimal di bahwa hal jarang sakit. Bagaimana menjadi super samar karena mesin template yang mencoba untuk menjadi super pintar menjadi minimal? Itu menjadi perhatian yang adil, dan Anda akan senang mendengar bahwa tim di belakang Slim menangani ini dengan sangat serius. Mereka ingin menghapus sebanyak mungkin dari plain lama HTML dan mengungkapkan hanya bagian penting — semua tanpa menjadi terlalu samar. Tim inti mereka mencoba untuk melangkah bahkan lebih dari itu, dan mereka benar-benar peduli dengan estetika kode yang ramping. Cukup bagus, jangan Anda berpikir?

Bukankah itu jauh lebih baik jika Anda dapat hanya melirik template dan dapat dengan mudah mencerna apa yang terjadi? Template dapat menjadi tempat yang sangat 'padat' — bahkan jika Anda membuat cerdas penggunaan parsial — dan sebagai akibatnya, Anda ingin mengurangi jumlah suara ke minimum absolut.

Mungkin Anda telah mencoba indentasi sintaks Sass (.sass)? Saya harap Anda memiliki, karena itu hanya biasa ganja! Jika demikian, Anda mungkin akan memiliki penghargaan yang sama untuk apa Slim yang ditawarkan. Hal ini juga spasi sensitif, yang mengarah ke kode yang benar-benar ringkas dan mudah dibaca. Mari kita ambil ini potongan kode HTML ERB dan membandingkannya dengan Slim.

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header class="navbar">
      <div class="logo">
        <%= link_to "sample app", 'root_path', id: "logo" %>
        <nav>
          <ul class="navbar-right">
            <li><%= link_to "Home",   'root_path' %></li>
            <li><%= link_to "Help",   'help_path' %></li>
            <li><%= link_to "Log in", 'login_path' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="main">
      <%= yield %>
    </div>
  </body>
</html>

Mari kita lihat Slim setara dengan:

doctype html
html
  head
    title = full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",   'root_path'
            li
              = link_to "Help",   'help_path'
            li
              = link_to "Log in", 'login_path'
    .main
      = yield

Hal pertama yang orang sering mengenali adalah, "Hei, ada tag penutup!" Keren? Tentu, Anda tidak digunakan untuk sintaks yang belum jadi mungkin terlihat asing sedikit pada awalnya, tapi aku yakin Anda dapat menghargai bagaimana ringkas bunyinya. Tidak ada kurung sudut kiri/kanan, dan tidak perlu menulis divs dan minimalis penyeleksi, sehingga kita dapat berfokus pada nama id dan memiliki kelas. Rasanya jauh lebih berantakan dan lebih terorganisir, jangan Anda berpikir?

Untuk perbandingan, di sini adalah versi Haml. Itu benar-benar tidak dimaksudkan sebagai sebuah kesempatan untuk bash Haml-itu hanya menunjukkan Anda bagaimana serupa, tetapi juga bahwa Slim pergi langkah lebih jauh dengan pilihan minimal sintaks. Hasilnya adalah bahwa hal itu bahkan lebih elegan daripada Haml, saya pikir.

Mengapa pergi begitu sedikit, tapi masih membuat saya ketik tanda % seluruh tempat? Jari telunjuk saya tidak memiliki khusus motivasi untuk ambil Shift-5 sepanjang waktu. Dapatkah Anda menyesuaikan perilaku itu? Cukup yakin, atau setidaknya aku berharap begitu! Tapi desain tampaknya agak Cacat dalam hal itu dan kurang Sparta dibandingkan Slim. Saya menyadari bahwa ini adalah juga masalah selera, meskipun, jadi aku akan meninggalkan itu.

Haml

!!!
%html
  %head
    %title= full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  %body
    %header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        %nav
          %ul.navbar-right
            %li= link_to "Home",   'root_path'
            %li= link_to "Help",   'help_path'
            %li= link_to "Log in", 'login_path'
    .main
      = yield

Sebelum kita melompat ke bagian gemuk, biarkan aku menjadi bengkak sejenak dan meringkas apa yang saya pikir membuat belajar Slim investasi yang layak waktu Anda:

Sangat cepat.
Super mudah dibaca.
Ini memiliki sintaks yang cerdas.
Dengan estetika minimal.
Hal ini sangat dapat dikonfigurasi
Itu jari telunjuk ramah.
Ini adalah tingkat bos template.
Hal ini menyenangkan untuk menulis dan terlihat obat bius.
Otomatis HTML melarikan diri secara default.
Super bagus Rails dan Sinatra integrasi.
Sangat minim template yang mudah untuk mempertahankan.
Ini luas dan memungkinkan Anda untuk menulis plugin dan ekstensi.
Ada logicless modus untuk saat-saat ketika Anda ingin output HTML tapi tidak punya alasan untuk menyertakan kode Ruby.
Memiliki cara pintas yang dikonfigurasi untuk tag — yang merupakan fitur yang cukup bagus untuk menyesuaikan mesin untuk kebutuhan Anda.
Dan akhirnya, karena Slim sintaks dipandu oleh satu sangat dingin moto: "Apa adalah minimum yang diperlukan untuk membuat karya ini". Ini sangat sulit untuk tidak suka.

Apakah template?

Dalam hal pengalaman pemrograman, jika Anda menganggap diri Anda untuk menjadi lebih di sisi newbie hal, saya akan mencoba untuk memberikan Anda cepat pulang-pergi sebelum kita mulai menggunakan Slim. Ketika orang berbicara tentang template, mereka sebagian besar berarti markup HTML biasa dengan kode dinamis yang sering digunakan untuk mengontrol aliran, objek suntikan atau parsial render template (parsial). Sebagai contoh, ketika controller menyediakan contoh variabel yang dapat digunakan oleh pandangan melalui substitusi variabel (contoh) untuk menampilkan atribut dari objek. Semua ini terjadi melalui prosesor template pilihan Anda — ERB, Haml, Slim dan sejenisnya — yang menggabungkan semua template web ke dalam halaman web akhir. Template dapat juga digunakan untuk menghasilkan XML dan RSS Feed juga sebagai bentuk lain dari file teks terstruktur.

Dengan template, Anda dapat menentukan berbagai "layout" yang menangani bagian-bagian tertentu dari situs web serta data yang harus ditampilkan secara sistematis dengan jumlah terkecil pengulangan. Sejak Anda mulai bermain dengan Rails, Anda pasti sudah pernah menggunakan ERB untuk persis jenis skenario. ERB mengambil bagian teks, tangan mereka ke dokumen akhir dan hanya memproses kode yang ditandai seperti itu. Aku tidak akan masuk ke rincian bagaimana ERB bekerja dan Anda memiliki pemahaman dasar sebelum Anda menyelam ke Slim. Saya tidak akan merekomendasikan menggunakan Slim jika Anda tidak sudah akrab dengan Rails' cara default template karena Anda akan memiliki waktu yang jauh lebih mudah bermain dengan Slim jika Anda memahami bagaimana ini bekerja di luar kotak di Rails.

Dibawah ini adalah contoh ERB dasar template yang menampilkan koleksi misi yang terkait dengan objek @agent. Langsung di bawah ini, ini juga menggunakan metode dari Ruby Gem untuk nomor pd Hotel koleksi @missions halaman di peta buku.

<% if @agent.missions.any? %>
  <h4>Missions (<%= @agent.missions.count %>)</h4>
  <ul class="missions">
    <%= render @missions %>
  </ul>
  <%= will_paginate @missions %>
<% end %>

Ini adalah bagian kecil dari template yang baik menunjukkan bahwa itu adalah tidak lebih dari bagian HTML statis yang memiliki beberapa suntikan yang dinamis dari beberapa kode Ruby. Jika kita tidak menggunakan template seperti ini, kita akan harus menulis kode untuk setiap objek baru yang kita ingin melihat ditampilkan pada halaman secara manual. Tidak yakin tentang Anda, tapi aku tidak bisa membayangkan mimpi buruk atau membuang-buang waktu daripada yang lebih besar. Template memberi kita alat yang berguna untuk membuat lapisan pandangan kita pintar dan dinamis tanpa mengulangi diri.

Seperti Anda juga dapat melihat dari contoh ini, template Mari kita menggunakan template parsial yang kita dapat membuat mana diperlukan. Di sini kita akan memiliki _mission.html.erb parsial di suatu tempat, yang membantu kita untuk lebih dari koleksi benda-benda @mission, yang pada gilirannya mendapatkan tercantum di dalam kelas misi kami.

Seperti yang Anda lihat, template tidak ada sihir tetapi super berguna untuk mengembangkan aplikasi web jauh lebih efisien dan terorganisir. Aku hanya ingin memastikan bahwa kita semua pada halaman yang sama dengan ini sebelum menyelam ke Slim.

Apa tentang ERB & Haml?

Jika Anda menggunakan alat ini, itu baik-baik saja. Tidak ada yang salah dengan itu. Masalahnya adalah, jika Anda mencari sesuatu yang cerdas yang lebih minimalis, sulit untuk menemukan sesuatu yang berjalan lebih jauh dari Slim. Bagi saya, itu adalah solusi templating paling efisien di tanah Ruby yang saya tahu. Mereka semua bekerja dengan baik, sehingga masalah preferensi pribadi.

Persiapan

Ramping dengan rel

Tidak mengejutkan, ada permata untuk itu.

Gemfile

1	gem 'slim-rails'

Shell

1	bundle install

Itu saja, kita sudah siap. Karena Anda memasang permata ini, Slim akan mendapatkan dimuat dan diinisialisasi ketika app beban. Juga, untuk kenyamanan Anda, ketika Anda menghasilkan controller melalui rel menghasilkan controller, Anda akan secara otomatis mendapatkan .slim file tampilan untuk tampilan —.html.erb file lagi. Ia bekerja sama dengan perancah, tetapi saya berharap Anda tidak menggunakan mereka benar-benar!

Untuk menunjukkan perilaku ini untuk orang-orang yang baru untuk menggunakan rel Generator, saya akan membuat controller untuk koperasi dinas rahasia yang memiliki semua tindakan controller sisanya standar:

Shell

1	rails generate controller SecretServiceOperatives index new create show edit update destroy

Di antara hal-hal lain, Anda akan mendapatkan semua file .slim yang Anda butuhkan. Rel menempatkan .html tambahan di sana juga-Anda dapat menyingkirkan dari bahwa jika itu mengganggu Anda, tentu saja. Semua yang penting adalah bahwa ekstensi file ramping yang sudah ada dan bahwa itu siap untuk preprocessing kode Anda ramping. YAY!

...

invoke  slim
     create    app/views/secret_service_operatives
     create    app/views/secret_service_operatives/index.html.slim
     create    app/views/secret_service_operatives/new.html.slim
     create    app/views/secret_service_operatives/create.html.slim
     create    app/views/secret_service_operatives/show.html.slim
     create    app/views/secret_service_operatives/edit.html.slim
     create    app/views/secret_service_operatives/update.html.slim
     create    app/views/secret_service_operatives/destroy.html.slim

...

Langkah berikutnya akan untuk membuka tata letak aplikasi Anda dan mengganti kode boilerplate dengan sesuatu Slim. Juga, jangan lupa untuk mengubah nama application.html.erb file application.slim (atau application.html.slim jika Anda inginkan). Kita sudah memiliki slimmed turun sedikit — bahkan nama file yang telah kehilangan berat badan.

App/views/layouts/Application.Slim

doctype html
html
  head
    title
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "Spy app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",    'root_path'
            li
              = link_to "Help",    'help_path'
            li
              = link_to "Sign up", 'sign_up_path'
            li
              = link_to "Log in",  'login_path'
    .main
      h1.welcome Welcome to Boss Level Slim Templates!
      = yield

Tidak ada yang mewah, tetapi sebuah awal yang baik — dan semudah yang dapat berpikir.

Screenshot

A landing page for starting with Slim Templates

Sebagai catatan samping, jika Anda pernah ingin tahu versi permata Anda menginstal, perintah kecil ini akan memberitahu Anda-sangat berguna untuk permata apapun juga, tentu saja:

Shell

1	bundle show 'slim-rails'

Ia memberitahu Anda mana disimpan dan memiliki versi ini permata saat ini. Output akan terlihat seperti ini:

1	/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1

Ramping dengan Sinatra

Untuk penggemar Sinatra antara Anda, saya ingin menyebutkan bagaimana untuk memulai juga. Pertama kita perlu menginstal permata, tentu saja.

Shell

1	gem install slim

Dan setelah itu, Anda hampir selesai. Di Sinatra app, Anda hanya perlu memerlukan Slim dan Anda baik untuk pergi.

some_sinatra_app.rb

require 'sinatra'
require 'slim'

get('/') { slim :index }

__END__

@@ index
doctype html
html
  head
    title Slim Templates
    body
      h1 Boss Level Ruby Templates With Slim

Di sini saya menggunakan template inline untuk menulis Slim markup dan file sama Sinatra mengatakan bahwa saya ingin menggunakan Slim untuk file indeks ketika membuat sebuah get permintaan ke path akar. Aku hanya perlu untuk referensi inline template di dalam kurung kurawal blok. Apa yang Anda lihat di bawah @@ indeks — yang menandakan Indeks template — semua spasi sintaks Slim sensitif.

Screenshot

Another shot of the landing page template

Waktu untuk menunjukkan Anda bagaimana untuk menulis beberapa Slim.

Sintaks

Tag HTML

HTML <!DOCTYPE> Deklarasi

Mari kita mulai dengan yang paling sederhana, Deklarasi doctype. Seperti yang Anda ketahui dan sudah lupa, ini harus dinyatakan di atas dokumen HTML Anda — sebelum yang sebenarnya<html>Tag.</html> FYI, ianya tidak HTML tag dan memerintahkan browser tentang versi halaman HTML.

Antara versi yang berbeda untuk <!DOCTYPE>, hanya ada satu untuk HTML5: <! DOCTYPE html >-terima kasih Tuhan! — itulah apa yang kita dapatkan ketika kita menulis doctype html atau doctype 5 dalam Slim.

doctype html
html
  head

doctype 5
html
  head

ID Shortcut # dan Shortcut kelas.

Menulis kode front-end berarti satu ton kelas dan pernah begitu beberapa id-saya berharap. Untuk menghindari menulis ini berulang-ulang, Slim bertemu Anda lebih dari setengah dan memungkinkan Anda hubungan arus pendek seluruh proses pada dasarnya. Biarkan saya menunjukkan kepada Anda apa yang saya maksud. Ambil kode Slim berikut:

#logo
h1.header
.evil-wrapper
  h2#author-name
  ul.books

Ini akan disusun untuk output HTML ini:

<div id="logo"></div>
<h1 class="header"></h1>
<div class="evil-wrapper">
  <h2 id="author-name"></h2>
  <ul class="books"></ul>
</div>

Seperti yang Anda lihat, dot menyarankan kepada Slim bahwa Anda ingin menggunakan kelas, dan nama yang berikut adalah apa yang ingin Anda nama itu. Sama berlaku untuk ID-Anda hanya menggunakan simbol hash (alias pon tanda) yang melakukan trik. Cerdik pembaca pasti diakui bahwa versi tanpa tag terkemuka memicu penciptaan div dengan kelas terkait atau id — yang dapat dilihat untuk<div id="logo"></div>dan<div class="evil-wrapper"></div>. Cukup berguna, jangan Anda berpikir?

Anda juga dapat lebih ekspresif dalam kode Anda tipis jika Anda ingin. Tidak ada yang menghalangi Anda dari tulisan Anda baik ol ' kelas dan id dengan tangan. Jika Anda entah bagaimana merasa terikat dengan itu, go for it! Saya suka versi lebih ringkas karena hal ini juga memungkinkan saya Hindari mengetik tanda kutip dan teks berulang sepanjang waktu. Terserah kepada Anda-apa pun yang membuat Anda bahagia! Kode di bawah sedikit lebih verbose namun menuliskan HTML sama seperti di atas:

Slim:

div id='logo'
h1 class='header'
div class='evil-wrapper'
  h2 id='author-name'
  ul class='books'

Sekarang, Bukankah itu hal keindahan? Bayangkan semua ditakuti tag HTML yang Anda tidak perlu menulis sendiri, ditambah menyingkirkan semua kelebihan melingkupi kurung sudut. Tentu, editor kode Anda dapat melakukan banyak pekerjaan ini untuk Anda juga, tapi apakah editor Anda juga membaca kode untuk Anda? Persis!

Ketika Anda datang kembali untuk membaca kode Anda, Anda juga ingin dokumen ringkas yang super mudah untuk dicerna visual. Saya pikir contoh sederhana ini menunjukkan terbaik apa alat seperti Slim yang ditawarkan. Ini adalah hal-hal kecil yang menambahkan hingga yang besar alat penghemat waktu dalam jangka panjang. Bahkan jika Anda hanya menggunakannya untuk persis bahwa fungsi dan mengabaikan fitur lanjutan lainnya untuk sekarang, membuat beralih ke Slim akan sudah melunasi besar waktu.

Tag inline

Katakanlah Anda memiliki beberapa tag yang Anda ingin memiliki inline untuk menjadi lebih kompak atau apa pun. Jadi bukannya melanggar untuk baris baru, Anda dapat rantai mereka dengan memisahkan tag dengan usus besar:. Kedua contoh di bawah ini memberikan output yang sama.

Slim:

1	ul
2	li.first
3	a href="/a" A link
4	li
5	a href="/b" B link
6
7	ul
8	li.first: a href="/a" A link
9	li: a href="/b" B link

HTML Output:

1	<ul>
2	<li class="link">
3	<a href="/a">A link</a>
4	</li>
5	<li>
6	<a href="/b">B link</a>
7	</li>
8	</ul>

Versi kedua lebih minimal karena Tag inlined dan akan menjadi preferensi saya. Setelah semua, kompak baik, tidak? Saya pikir hal ini menunjukkan baik bahwa Slim merata menyeimbangkan antara kompak dan samar. Ya, dibutuhkan sedikit membiasakan diri, dan dalam beberapa kasus atribut tambahan pembungkus yang berguna (Lihat lebih lanjut tentang pembungkus di bawah ini). Call me gila, tapi saya cukup yakin bahwa Anda akan membaca Slim seperti biasa HTML markup dalam sekejap.

Konten teks

Menulis teks semudah seperti yang Anda harapkan, tentu saja. Hanya menambahkannya pada setelah tag Anda.

Slim:

1	h1#welcome-header Your funky welcome message goes here!

HTML Output:

1	<h1 id="welcome-header">
2	Your funky welcome message goes here!
3	</h1>

Tidak lebih untuk menambahkan, mudah seperti dapat!

Atribut

Atribut HTML, yang memberikan tambahan info tentang tag, dapat dimasukkan sebagai berikut:

Slim:

1	a href="https://slim-lang.com" title='Slim Homepage' Goto the Slim homepage
2
3	img alt="James Bond posing together with M" src="image.png" height="90" width="90"/

HTML Output:

1	http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage
2
3	<img alt="James Bond posing together with M" height="90" src="image.png" width="90" />

Anda dapat pada dasarnya rantai mereka pada dan Slim akan terpisah dari isi teks — jika ada. Jika Anda melihat dekat, Anda dapat melihat bahwa tag img kami memiliki miring, yang secara eksplisit menutup tag dalam Slim. Untuk gambar atau tag yang lebih rumit, hal ini pasti berguna. By the way, HTML5 tidak mengharuskan Anda untuk menulis nama atribut dalam huruf kecil dan tidak menggunakan tanda kutip di nilai atribut. Namun demikian disarankan praktek standar oleh W3C.

Atribut penggabungan

Jika Anda memiliki beberapa penyeleksi seperti kelas atau id per tag, Anda juga dapat menuliskan ini lebih ringkas oleh daisy-chaining mereka. Penyeleksi tersebut akan otomatis dibatasi oleh spasi.

Slim:

1	h2#big-header.agent-header.tagline Funky headline
2
3	h3.small-header.agent#007.tagline Small funky headline

HTML Output:

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>
<h3 class="small-header agent tagline" id="007">
  Small funky headline
</h3>

Tidak itu memiliki semua id dan kelas-kelas yang bercampur seperti ini mewakili terbaik praktik atau apa pun, tetapi sangat mudah untuk melihat bagaimana Slim bekerja dalam sebuah contoh berbelit-belit. Cukup keren, ya? Hati-hati, meskipun — menyebar penyeleksi ini di beberapa baris tidak akan bekerja tanpa atribut pembungkus (Lihat bagian berikutnya).

Pilihan lain akan menggunakan sebuah array dengan string atau simbol-simbol yang hanya untuk bergabung dalam atribut.

Slim:

1	h2 class=["agent-header","tagline"] Funky headline
2
3	h3 class=:agent,:double_o_seven,:tagline Small funky headline

HTML Output:

<h2 class="agent-header tagline">
  Funky headline
</h2>

<h3 class="agent double_o_seven tagline">
  Small funky headline
</h3>

Dalam buku saya, saya akan memanggil satu ini baik-untuk-tahu, tapi itu bukanlah sesuatu yang saya mencoba untuk secara aktif menggunakan. Mungkin akan berguna jika Anda ingin melakukan interpolasi sesuatu, saya kira.

Atribut pembungkus

Ramping menawarkan Anda pembungkus atribut Anda agar lebih mudah dibaca. Ini mungkin tidak diperlukan sepanjang waktu, tetapi berguna untuk tahu jika sebuah tag dengan banyak atribut perlu beberapa menjinakkan. Anda dapat menggunakan salah satu pembatas berikut untuk membungkus atribut: {}, [], dan ().

Slim:

a{href="http://slim-lang.com" title='Home page'} Goto the home page

a{href="http://slim-lang.com/about.html" title='About page'
  class='link' id='about'} Goto the about page

h2[id="big-header" class="agent-header tagline"] Funky headline

h3(id="small-header"
   class="agent 007 tagline") Some other funky headline

HTML Output:

<a href="http://slim-lang.com" title="Home page">Goto the home page</a>

<a class="link" href="http://slim-lang.com/about.html" id="about" title="About page">Goto the about page</a>

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>

<h3 class="agent 007 tagline" id="small-header">
  Some other funky headline
</h3>

Jika itu adalah cara yang lebih mudah bagi Anda untuk mengatur markup, go for it! Sebagai diilustrasikan oleh kedua dan h3 tag, Anda bahkan dapat tersebar atribut dan penyeleksi di beberapa baris. Indentasi tampaknya harus ditegakkan sangat saling berkaitan sensitivitas spasi. Dugaan saya, meskipun, adalah bahwa itu tidak akan lama, dan Anda tidak perlu pembungkus jauh. Anda akan bisa digunakan untuk sintaks Slim barebones dalam waktu singkat dan menyimpannya untuk kesempatan khusus-Anda mungkin harus.

Untuk inlined tag, pembungkus mungkin berguna setiap sekali dalam beberapa saat. Seperti Anda dapat juga mengamati dalam contoh di bawah ini, Anda dapat menggunakan ruang dengan pembatas untuk membuatnya bahkan lebih mudah dibaca — hanya catatan.

ul
  li.long-link: a{ href="http://slim-lang.com" title='Home page' } Goto the home page
  li.long-link.class.with-id: a[ href="http://slim-lang.com/about.html" title='About page'
                                 class='link' id='about' ] Goto the about page

  li.c-link: a(href="/c") C link
  li: a[href="/d"] D link

HTML Output:

<ul>
  <li class="long-link">
    http://slim-lang.com" title="Home page">Goto the home page
  </li>
  <li class="long-link class with-id">
    http://slim-lang.com/about.html" id="about" title="About page">Goto the about page
  </li>
  <li class="c-link">
    <a href="/c">C link</a>
  </li>
  <li>
    <a href="/d">D link</a>
  </li>
</ul>

Atribut interpolasi

Apakah seseorang mengatakan interpolasi? Dalam atribut dikutip, Anda dapat menggunakan Ruby untuk melakukan interpolasi kode jika diperlukan. Contoh sederhana harus cukup untuk menggambarkan perilaku ini:

Langsing

1	a href="http://#{url}" Goto #{url}

Sekali lagi, bukan sesuatu yang mungkin Anda gunakan pada setiap hari, tetapi ia yakin baik untuk memiliki dalam tas Anda trik. Nilai atribut akan melarikan diri secara default. Jika Anda membutuhkan perilaku bahwa dinonaktifkan, hanya menggunakan w ==.

1	a href=="http://#{url}" Goto #{url}

Anda dapat menggunakan penuh pada Ruby untuk bermain dengan atribut Anda juga. Hanya melempar sama masuk sana mana Anda ingin beberapa kode Ruby akan dieksekusi, dan Anda siap untuk pergi. Dalam Pasal kedua, Anda akan menemukan informasi lebih lanjut tentang Keluaran Ruby kode dalam template Anda ramping.

1	ul
2	li id="agent_#{agent.id}" class=agent.role
3	a href=(path_to_agent agent) =agent.name

Itu, tentu saja, juga berarti bahwa Anda dapat menggunakan Boolean sederhana dengan cara yang sama dalam atribut Anda juga.

1	input type="text" disabled=false
2	input type="text" disabled=true
3	input type="text" disabled=nil

Groovy, mari kita lanjutkan!

Akhir pikiran

Saya harap Anda sekarang memiliki rasa yang baik mengapa Slim adalah pilihan yang baik untuk semua kebutuhan template Anda di tanah Ruby. Jika Anda masih lebih memilih untuk menggunakan Haml atau ERB saat ini, Anda mungkin tumbuh selera Slim dari waktu ke waktu. Saya tidak mengatakan itu adalah rasa yang diperoleh atau apa pun, hanya bahwa itu bukanlah sesuatu yang banyak orang mengambil di awal karier mereka-mungkin karena mereka belum belum merasakan sakit karena menulis semua markup kelebihan yang berulang-ulang. Artikel ini harus menyediakan Anda dengan dasar-dasar yang Anda butuhkan untuk memulai.

Slim memiliki lebih banyak untuk menawarkan, tentu — terutama beberapa fitur canggih yang Anda pasti ingin melihat. Dalam artikel berikutnya, kita akan mulai dengan bagian yang lebih rinci tentang Keluaran kode Ruby ke template Anda — dan banyak lagi, tentu saja. Melihat Anda di sana!