Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Middleman

Bekerja dengan Data, Aset, dan Template di Middleman

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
How to Set Up a Static Website With Middleman
Project: Build a Complete Website With Middleman

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Tutorial kedua tentang membangun situs web statis dengan Middleman menyelam sedikit lebih dalam ke dalam kerangka. Pada akhirnya, Anda harus cukup tahu untuk membangun proyek Anda sendiri dari awal. Kami akan membahas topik-topik seperti File Data, URL Cantik, Template Proyek, dan Saluran Pipa Aset, jadi mari terjebak!

File data

Jadi, setelah mengikuti tutorial pertama, Anda sudah belajar cara bermain dengan data; materi depan disimpan di bagian tiga-halaman terpisah dari setiap halaman. Anda juga dapat menulis file data terpisah di YAML atau JSON dan menempatkannya di direktori “/ data”. Ini berguna jika Anda memiliki situs yang lebih kompleks dengan data yang jarang berubah, dan di mana Anda tidak ingin mempertahankan data tersebut secara langsung di HTML Anda.

Katakanlah Anda memiliki hak untuk menjual semua film James Bond. Kita bisa memasukkan daftar mereka dalam file data dan mengulanginya dalam tampilan kami. Jika kami perlu mengubah atau memperbarui data saat film baru tersedia, Anda hanya perlu menerapkan perubahan itu di file data .yaml atau .json Anda. Saya tidak merekomendasikan melakukan hal itu untuk data yang rumit; itu bisa dilakukan, tetapi terasa sangat rapuh dan salah.

Misalnya, inilah file /data/bond.yaml yang mungkin terlihat seperti:

Kemudian output seperti di source / bond-movies.html.erb:

Salah satu keuntungan dari file data ini adalah mereka aman. Lebih baik lagi, direktori / data Anda dengan semua data YAML atau JSON tidak akan didorong ke server langsung Anda. Selama fase build, data Anda akan disuntikkan ke template Anda secara lokal sebelum dikerahkan. Setelah itu, data dalam tampilan Anda hanyalah HTML statis biasa. Sangat keren!

Konvensi penamaan

Sebuah kata tentang konvensi penamaan di sini. Ketika Anda memiliki file data dalam direktori 'data' Anda mendapatkan akses ke objek data. Perantara kemudian menciptakan "objek" untuk setiap .yml, .yaml atau .json file yang bisa Anda akses melalui objek data awal oleh chaining pada. Anda kemudian memiliki akses ke atribut yang telah Anda simpan. Dalam kasus kami, kami memiliki movies YAML “objek” dengan atribut titleyeartext dan image.

Jika Anda memiliki subdirektori, Anda hanya perlu taktik mereka pada. Katakanlah Anda memiliki file data film bond di bawah direktori spy_movies (misalnya: /data/spy_movies/bond.yaml) Anda sekarang akan mengaksesnya seperti:

Terakhir, saya harus menambahkan bahwa menyimpannya di JSON mungkin lebih disukai oleh sebagian orang, tetapi semua koma, tanda kurung dan tanda kurung yang berlebihan membuat saya tidak jujur. Tidak hanya di file data tetapi di bagian frontmatter juga. Terserah Anda yang paling cocok untuk Anda, lihat sendiri:

some_file.yaml:

some_file.JSON:

Pretty URLs

Jika Anda memiliki file seperti source / bond-movies.html.erb itu akan berakhir dengan https://appname.com/bond-movies.html. Selama proses pembangunan, kami kehilangan ekstensi file '.erb' dan berakhir dengan versi '.html' terakhir dari halaman tersebut yang dicerminkan dalam URL. Itu baik-baik saja, barang normal. Untuk URL yang lebih menarik seperti http://appname.com/bond-movies, kami harus bekerja sedikit.

Anda perlu mengaktifkan ekstensi Directory Indexes di config.rb Anda. Ini membuat folder untuk setiap file .html. Selama perantara middleman build halaman selesai berakhir sebagai file indeks folder tersebut — berarti bahwa sebagai file indeks ekstensi yang tidak perlu muncul dalam URL. Jika Anda memperhatikan, Anda mungkin telah melihat ini bekerja dengan file index.html standar yang dibuat untuk setiap proyek Middleman sebagai halaman arahan. Jalankan server Anda dan lihat sendiri.

Dalam config.rb:

Mari kita lihat apa yang terjadi setelah middleman build file bond-movies.html.erb Anda jika Anda telah mengaktifkan ekstensi itu. Middleman akan membuat folder 'build / bond-movies' dan nama file asli Anda akan diubah menjadi index.html (build / bond-movies / index.html).

Berikut adalah Shell output:

Ada satu peringatan kecil sekalipun. Sebelum Anda mengaktifkan URL cantik Anda bisa mengandalkan menggunakan jalur aset. Sekarang dengan indeks direktori di tempat Anda perlu menyediakan aset dengan penuh, jalur mutlak mereka. Jadi memanggil gambar hanya dengan namanya, misalnya, tidak akan terbang lagi.

Jika karena alasan tertentu Anda ingin mengganti perilaku ekstensi itu untuk file tertentu, Anda bisa.

Dalam config.rb:

Berikut output Shell jika Anda mengubahnya kembali untuk bond-movies.html.erb:

Sekarang URL-nya kembali normal untuk file itu lagi. (http://appname.com/bond-movies.html)

Selain itu, Anda dapat memilih keluar dari skema penamaan indeks direktori secara lokal di frontmatter laman individu Anda:

Jika Anda ingin membangun struktur folder dan file indeks masing-masing mereka sendiri, perantara tidak akan mengacaukan dengan Anda. Fungsi dengan cara yang sama dan perantara mengabaikan mereka jika Anda mencampur dan mencocokkan pendekatan itu.

Aset Pipleline

Saya ingin memotong ke pengejaran dengan yang satu ini dan hanya menunjukkan kepada Anda potongan-potongan yang menurut saya benar-benar relevan.

The 'aset pipleline' adalah istilah Rails diimpor ke Middleman. Di bawah tenda, permata yang disebut Sprocket melakukan semua pengangkatan berat. Ini membantu Anda menangani manajemen ketergantungan, menggabungkan dan mengurangi aset, yang membantu menurunkan aset Anda secara signifikan. Beberapa metode penolong untuk referensi aset secara ringkas juga dapat Anda gunakan. Di luar itu, Anda juga diberikan sarana untuk menulis kode Sass dan CoffeeScript, langsung dari kotak.

Rangkaian

Penggabungan adalah salah satu fitur terpenting dari pipline aset. Daripada memiliki banyak permintaan HTML terpisah untuk setiap file CSS dan JS, Anda dapat menguranginya secara drastis dengan menggabungkannya menjadi satu, atau beberapa file. Semakin sedikit permintaan yang Anda ajukan, semakin cepat aplikasi Anda memuat.

Rangkaian JavaScript

Secara default, Sprocket akan menekan semua file JavaScript ke dalam file .js tunggal. Setelah middleman build, file ini akan ditemukan di bawah /build/javascripts/all.js. Hal yang sama berlaku untuk CSS Anda. Setelah proses pembuatan, Anda akan memiliki semua file Sass yang digabungkan bersama dalam build / stylesheet / all.css.

Anda menggabungkan aset JavaScript Anda dengan menggunakan parsial (yang nama filenya diawali dengan underscore) dan kemudian require mereka di bagian paling atas di file sumber / javascripts / all.js Anda. File dengan ekstensi .coffee tambahan bekerja persis sama. Urutan memang penting untuk proses ini.

Di sini, misalnya, adalah bagian atas sumber / javascript / all.js:

file

Saat Anda melihat di direktori baru /build, Anda hanya akan menemukan satu file .js di bawah / javascript.

file

Rangkaian CSS

Untuk kode Sass Anda, ceritanya pada dasarnya sama, tetapi Anda harus menggunakan Sass @import untuk mengimpor parsial Anda, require dari Sprockets. Sekali lagi, letakkan file “required” di bagian paling atas, kali ini perhatikan urutannya. Tidak seperti membutuhkan parsial JavaScript, Anda meninggalkan garis bawah ketika Anda mengimpor parsial Sass. Sebagai contoh

file
file

Kompresi (Minification)

Fitur keren lainnya dari sprocket adalah kompresi, juga disebut minification. Proses ini memotong banyak lemak, seperti menyingkirkan ruang kosong dan komentar yang tidak perlu. Orang-orang juga menyebut proses ini uglifying (dan tentu saja ada permata yang disebut uglifier yang melakukan pekerjaan yang indah ini). Dibandingkan dengan minification aset JavaScript, CSS uglification tidak terlalu rumit.

Untuk memulai, Anda harus menambahkan yang berikut ini ke file config.rb Anda:

Sebenarnya, Anda hanya perlu menghapus tanda komentar di bawah ini: build blok. Kali berikutnya Anda menggunakan middleman build aset di folder / build Anda semuanya akan menjadi jelek dan langsing. Di bawah ini adalah dua contoh kecil bagaimana kode ini benar-benar berakhir mencari:

Diminimalkan CSS di bawah /build/stylesheets/all.css:

Diminimalkan JS di bawah /build/javascripts/all.js:

Tanpa pipeteline aset, Anda harus menyiapkan hal Anda sendiri untuk menulis JavaScript dan CSS melalui bahasa tingkat yang lebih tinggi seperti CoffeeScript dan Sass.

Bantuan Pipeline Aset

Untuk file Sass Anda, Anda memiliki empat pembantu yang Anda inginkan:

  • image_path()
  • font_path()
  • image_url()
  • font_url()

Karena Anda telah mengikuti konvensi sejauh ini, Anda dapat menggunakan helper ini untuk menambahkan jalur direktori yang benar ke aset Anda.

Dalam file Sass, misalnya:

Impor Path

Pipeline aset menggunakan jalur impor melalui Sprocket untuk aset Anda. Secara default :js_dir dan :css_dir sudah ditambahkan ke jalur itu. Itu berarti bahwa file yang dimasukkan ke /source/javascripts dan  /source/stylesheet tersedia dan secara otomatis diimpor. Di sisi lain, jika Anda memiliki aset yang ingin disimpan di direktori lain, Anda juga dapat menambahkannya ke jalur impor dengan mengedit config.rb:

Dalam contoh ini, aset lain di source/some/other/assets_folder/other.css juga berada di Middleman's disposal melalui jalur ini. Hal yang sama berlaku untuk file .js juga.

Template Proyek

Middleman dilengkapi dengan beberapa templat proyek berguna yang setidaknya harus Anda ketahui. Template ini memberi Anda titik awal yang baik ketika Anda memulai aplikasi Middleman baru. Anda juga dapat menambahkan templat ini kapan saja nanti:

  • SMACSS Template
  • Mobile Boilerplate Template
  • HTML5 Boilerplate Template
  • Blog Template(membutuhkan gem tambahan)

Anda dapat menggunakannya seperti ini, melalui baris perintah:

Template akan memberi Anda semua file dan folder yang dibutuhkan. Jika Anda sudah memiliki aplikasi dan ingin menambahkan template, Anda menggunakan perintah yang sama tanpa menyebut nama aplikasi Anda. Kesepakatan yang sama:

Sekarang tiba bagian favoritku dari Middleman. Sangat mudah untuk membuat template Anda sendiri dan menggunakannya kembali kapan pun Anda mau. Anda mulai dengan membuat folder ~/.middleman di direktori root Anda (jangan lupa titik di depan nama). Dalam direktori yang Anda buat folder baru untuk template Anda. Misalnya /.middleman/podcast akan podcast template. Kemudian Anda mengisi dirctory podcast ini dengan semua file dan folder yang Anda butuhkan. Misalnya, jika Anda ingin memiliki stylesheet tambahan yang tersedia untuk aplikasi Middleman Anda, maka Anda perlu mensimulasikan filepath Middleman untuk membuatnya sangat mudah digunakan.

Misalnya, jika Anda ingin memiliki stylesheet tambahan yang tersedia untuk aplikasi Middleman Anda, maka Anda perlu mensimulasikan filepath Middleman untuk membuatnya sangat mudah digunakan.

file

Karena saya mensimulasikan struktur file Middleman, stylesheet ini akan muncul tepat di mana saya membutuhkannya setelah saya memulainya. File saya sekarang di bawah / source / stylesheet dan juga siap untuk diimpor ke file /source/stylesheets/all.css.scss saya.

file

Karena saya sudah membuat sebagian gaya template saya, itu seperti biasa. Inilah sumber / stylesheet / all.css.scss saya:

Jadi! Satu hal yang harus Anda waspadai: ketika kita menggunakan middleman build untuk membuat direktori build baru, file-file ini akan diserap oleh all.css dan tidak ada folder template bourbon yang akan muncul di sana. Namun, jika Anda lupa untuk memiliki garis bawah terkemuka di nama file Anda untuk gaya ini, folder lengkap akan mentransfer ke /build, bersama dengan file .css masing-masing. Itu Pernyataan @import di all.css.scss tidak akan membuat perbedaan dalam kasus itu juga.

Memeriksa Templat

Jika Anda memiliki banyak template dan hanya ingin memeriksa daftar untuk sebuah nama, Anda dapat menggunakan perintah berikut:

Jika Anda ingin menemukan kembali roda, lihatlah templates yang bersumber terbuka ini. Jika Anda belum pernah bermain banyak dengan template, saya sarankan untuk memulai aplikasi dummy dan mengambil mereka untuk spin. Lihat file apa yang dibuat atau ditimpa. Poke sekitar sedikit. Kemudian buat folder dummy dengan beberapa file Sass untuk template di bawah ~ / .middleman dan lihat apa yang terjadi ketika Anda memulai template itu. Tidak ada yang mengalahkan pembelajaran dengan melakukan eksperimen kecil ini di sepanjang jalan!

Gagasan Akhir

Saya percaya Anda sekarang lebih dari siap untuk mulai membangun aplikasi kecil dengan Middleman. Ada beberapa hal yang tersisa untuk Anda pelajari sendiri, tetapi saya telah menyajikan potongan teka-teki paling penting kepada Anda.

Middleman sangat menyenangkan dan merupakan pilihan teknologi yang baik. Sangat kuat, mudah digunakan, dan memiliki API langsung yang ramah pemula; itulah yang terpenting untuk saat ini. Selamat bersenang-senang!

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.