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

Memahami Ghost: Tahapan Desain

by
Length:LongLanguages:
This post is part of a series called Building a Ghost Theme From Scratch.
Organizing Ghost Theme Files and Folders

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Proses membuat theme (tema) untuk Ghost sangatlah smooth, simple dan sangat mudah dipelajari. Tapi sebelum anda mulai membangun theme Ghost yang sebenarnya, penting dan bermanfaat untuk memahami peran theme dalam ekologi keseluruhan Ghost sehingga anda dapat mendesainnya dengan optimal.

Cara terbaik untuk melakukan hal ini adalah jangan langsung melompat terlebih dulu ke dalam desain atau code, tapi dengan memperoleh pemahaman menyeluruh tentang Ghost itu sendiri sebagai fondasi anda.

Pada bagian pertama dari rangkaian tutorial kami, anda akan mendapatkan fondasi itu dan setelah melakukannya anda akan berada di situasi yang sempurna untuk mulai membuat theme pertama anda.


Apa itu Ghost dan Untuk Siapa?

Ghost adalah aplikasi Open Source yang didedikasikan untuk content publishing (penerbitan konten).

Selama beberapa tahun terakhir content publishing tool telah berevolusi untuk memungkinkan orang mengelola sendiri jenis situs apa pun yang mungkin mereka butuhkan. Entah itu toko online yang kompleks, presentasi bisnis, atau CMS yang sudah matang, pengguna dapat menangani semuanya dengan pengalaman yang relatif sedikit.

Tapi Ghost bukanlah tentang hal-hal yang rumit itu. Ghost adalah tentang meletakkan fokus kembali pada satu hal sederhana: yaitu writing (menulis).

Ghost adalah platform yang dibangun berdasarkan prinsip kesederhanaan. Tujuan utamanya adalah untuk membantu penulis blog setidaknya lebih fokus pada content publishing tool yang merupakan bagian dari blogging.

Bagi para developer theme, Ghost memperkenalkan perubahan dalam kecepatan. Sementara theme untuk platform lain sering didorong oleh permintaan pengguna akan theme untuk menambahkan semua jenis kompleksitas fungsional ke situs web mereka, platform Ghost hanya didorong oleh satu hal. Tagline dari Ghost memberi tahu kita apa itu:

Hanya sebuah platform blogging

Karena Ghost 100% fokus pada blogging, Ghost adalah: Just for bloggers (Hanya untuk blogger).

Dan sejalan dengan hal tersebut, desain theme Ghost juga digerakkan oleh satu hal saja: Just blogging themes (hanya theme blogging).

Ini mungkin tampak seperti pernyataan yang jelas tapi penting untuk ditekankan, karena pada platform yang berfokus pada penulisan, bertujuan digunakan oleh orang-orang yang berfokus pada penulisan, theme untuk Ghost juga harus didesain dengan berfokus pada penulisan.


Filosofi Desain Theme Ghost

Sebagai bagian dari kampanye Kickstarter-nya, pendiri Ghost, John O'Nolan, mengatakan hal berikut:

...Ghost bukan hanya tentang membuat sesuatu yang terlihat bagus, ini tentang memberikan tool kepada penulis untuk dorongan ke arah blogging dan jurnalisme ke tingkat berikutnya.

Di sinilah letak filosofi yang harus diadopsi oleh desainer theme Ghost agar bisa melayani pengguna Ghost dengan sebaik-baiknya: Pertama dan utama pastikan konten pengguna selalu di depan dan di tengah.

Ini merupakan pendekatan yang umum dalam desain web untuk fokus pada grafis dan tampilan desain secara keseluruhan, dengan styling tipografi dan konten yang terjadi terakhir. Tapi dalam konten theme Ghost tidak pernah harus mengambil kursi belakang untuk aspek-aspek lain dari desain.

Sebagai Ghost Ghostdesainer pertimbangan pertama Anda harus bagaimana konten akan muncul, dengan penekanan kuat pada tipografi, dan sisa tema desain harus terungkap untuk mendukung itu.

Anda akan mendapatkan lebih banyak wawasan tentang bagaimana ini bekerja kemudian di seri tutorial setelah kita mulai membangun sebuah tema yang sebenarnya, tetapi sebelum kita dapat melakukan itu kita perlu belajar lebih banyak tentang Ghost platform sendiri.


Platform Ghost

Ada beberapa aspek-aspek mendasar Roh untuk menyadari yang membuatnya berbeda untuk platform lain Anda mungkin terbiasa.

Aplikasi JavaScript yang dibangun di Node.js

Tidak seperti kebanyakan situs web populer saat ini membangun aplikasi yang berbasis PHP, Ghost dibangun di Node.js.

Node.js adalah sebuah platform perangkat lunak yang menafsirkan dan mengeksekusi JavaScript di back-end. Anda dapat mempelajari lebih lanjut tentang ini di Nodejs.org tetapi Anda benar-benar tidak perlu. Pengetahuan yang mendalam tentang Node.js tidak diperlukan untuk membangun sebuah tema Ghost- segalanya perlu Anda ketahui akan dibahas di seri tutorial ini.

Banyak orang menganggap Node.js sebagai cara masa depan untuk sejumlah alasan; kecepatan menjadi salah satu dari mereka. Node.js telah ditunjukkan untuk melakukan secara signifikan lebih cepat daripada PHP di berbagai pembandingan tes, itu adalah komponen kunci di balik mengapa Ghost berjalan begitu cepat blisteringly.

Bekerja pada tema Ghost di lingkungan lokal Anda akan perlu untuk menginstal Node.js lokal. Untungnya, melakukan hal itu adalah proses yang sangat cepat dan mudah. Kami akan mengarahkan Anda untuk petunjuk tentang cara untuk melakukan itu sebelum kita mulai proses membangun sebuah tema dalam bagian kedua dari seri tutorial ini.

Catatan: Anda harus menyadari bahwa dalam jangka pendek Anda mungkin menjumpai beberapa sakit growning yang menjalankan situs Ghost. Hampir setiap host di dunia sekarang dikonfigurasi untuk mengakomodasi aplikasi PHP, tapi karena Node.js masih relatif baru setup "push tombol" pada live domain yang Anda dapat digunakan untuk dengan aplikasi lain tidak cukup siap. Beberapa host sudah membangun infrastruktur baru secara khusus untuk memfasilitasi Roh, sehingga hanya akan menunggu sebentar sampai menggelar Ghost akan hanya sebagai mudah sebagai aplikasi lainnya jika tidak mudah. Selain itu, mulai pada bulan November Anda akan dapat menggunakan layanan hosting Ghost di rumah.

Pengguna didorong pengaturan yang tersedia untuk tema

Aspek yang lebih jauh dari Ghost yang mungkin berbeda dengan platform lain Anda sudah bertema untuk di masa lalu berkaitan dengan pengaturan pengguna dapat mengontrol di back-end.

Ghost pengguna didorong pengaturan menentukan persentase yang besar dari apa yang dapat output pada ujung depan yang, pada gilirannya, mempengaruhi jenis konten yang tersedia untuk tema.

Masih ada banyak hal-hal baru yang direncanakan untuk Ghost, namun pendekatan kita akan mengambil di seri tutorial ini adalah untuk bekerja dengan pengaturan yang dapat digunakan sekarang.

Pengaturan tertentu untuk masa depan Ghost fungsionalitas ada sekarang. Sebagai contoh, ada seorang admin UI untuk membuat menu nav di jalan, serta awal fungsi untuk keluaran mereka dalam inti Ghost. Namun, kita tidak tahu persis bagaimana hal ini akan berfungsi (dan tidak sampai mereka merilis) jadi kita tidak melakukan apapun desain untuk mereka di seri tutorial ini. Kita akan meninggalkan bahwa untuk hari ketika tim Ghost benar-benar melepaskan mereka.

Ini membawa kita kepada apa yang pengguna dapat mengontrol di back-end Roh sekarang, yang merupakan pengaturan yang memecah menjadi dua daerah;

  1. Admin settings
  2. Post editing controls

Mari kita lihat masing-masing daerah tersebut sekarang.

Pengaturan admin

Ghost admin setting ini dibagi dalam dua tab: Pengaturan Umum dan pengaturan pengguna. Umum dan tab pengaturan pengguna mengontrol konten yang kami dapat gaya dalam tema-tema kami.

Tab Settings > General memberi kita unsur-unsur berikut, dapat digunakan di mana saja di sebuah Ghost tema:

  • Blog Title
  • Blog Description
  • Blog Logo
  • Blog Cover
Ghost AdminGhost AdminGhost Admin

Tab Settings > User memberi kita berikut, dapat digunakan dalam satu posting pandangan hanya:

  • Cover image
  • Profile image
  • Name
  • Email
  • Location
  • Website
  • Bio
Ghost-User-SettingsGhost-User-SettingsGhost-User-Settings

Kontrol Editor Posting

Ghost posting mengedit antarmuka tentunya merupakan salah satu fitur yang paling menarik. Dirancang oleh penulis untuk penulis, hotel ini menawarkan lingkungan yang fantastis untuk penciptaan konten.

Kontras yang besar terhadap lingkungan mengedit lainnya adalah bagaimana bersih dan minimalis ini dirancang untuk menjadi. Ada tidak ada kekacauan dari format Toolbar, meta kotak atau bidang kustom lainnya. Sebagian besar ruang layar dikhususkan sepenuhnya ke daerah menulis.

Aspek yang paling relevan dari posting pengeditan untuk tema desainer adalah tulang punggung Ghost posting format: Markdown.

Alih-alih menggunakan tombol styling atau HTML mentah, Ghost konten diformat menggunakan Markdown, sintaks inline sederhana yang berarti penulis tidak perlu berhenti setiap saat selama pembuatan konten. Karena ini disederhanakan pendekatan ada daftar hal yang harus relatif singkat gaya yang kontrol editor posting:

  • Teks biasa
  • H1 melalui Tag H6
  • Serikat link
  • Kode inline
  • Blockquotes
  • Gambar
  • Daftar
  • Horizontal peraturan
Ghost-Post-EditorGhost-Post-EditorGhost-Post-Editor

Catatan: Markdown juga akan menerima HTML mentah, yang berarti video dari layanan seperti YouTube dapat dengan mudah tertanam melalui copy dan paste kode iframe. Untuk alasan itu, ianya juga ide yang baik untuk mempertimbangkan styling iframes dalam tema Anda juga.

Ghost tema kontrol presentasi hanya

Ghost dirancang di sekitar pemisahan jelas presentasi dan konten.

Ghost itu sendiri menangani generasi semua konten dan fungsionalitas tambahan yang diperlukan ditangani oleh plugin. Ini daun Ghost tema didedikasikan untuk presentasi murni.

Pemisahan isi dan presentasi adalah prinsip desain web yang tidak baru. Ide dasarnya adalah bahwa jika konten dan presentasi yang dipisahkan menjadi entitas independen itu menjadi mungkin untuk satu untuk dapat diubah tanpa mengubah yang lain. Dengan kata lain, satu tema dapat beralih keluar lagi tanpa pengguna harus mengubah konten mereka dengan cara apapun.

Ketika tema berisi fungsi yang tidak murni presentasi, pengguna tidak lagi dapat mengubah tema tanpa juga mengubah cara konten mereka terlihat. Mereka menjadi terikat pada presentasi mereka memiliki, dan tujuan dasar dari tema pada dasarnya hilang.

Dengan Roh, namun, tujuan dasar dari tema tetap utuh sepanjang waktu.

Catatan: di masa depan, seperti plugin untuk Ghost roll, itu akan mungkin untuk membangun tema Ghost dengan plugin dependensi. Ini adalah fitur lain yang akan dibuat dimungkinkan berkat untuk Ghost yang dibangun di atas Node.js. Kami masih akan dapat melihat peningkatan paket keseluruhan yang tersedia untuk pengguna, tetapi metode untuk melakukan begitu akan selalu konsisten menjaga keuntungan yang datang dari pemisahan isi dan presentasi.


Dua Tahap Ghost Tema Desain

Dua tahap sangat jelas bahwa Anda akan bekerja melalui dalam proses menciptakan tema Ghost adalah:

  1. Template File penciptaan - menulis file template dengan template tag penempatan dan markup
  2. Styling - menambahkan desain dan responsif, terutamanya melalui menulis CSS

Bagian selanjutnya dari seri tutorial ini akan memberikan Anda lengkap petunjuk langkah demi langkah tentang bagaimana untuk melanjutkan melalui tahap ini untuk membangun tema Ghost pertama Anda. Sebelum itu, namun, sangat membantu untuk memahami sedikit lebih tentang bahasa template yang kekuatan Ghost tema.

Pengantar logika-kurang template dengan Handlebars.js

Ghost tema menggunakan bahasa fantastis template yang bernama Handlebars.js untuk penempatan konten. Setang adalah bahasa template dalam arti tepat istilah, dimana perannya adalah hanya untuk output yang diambil sebelumnya konten dalam posisi tertentu dalam template file.

handlebarshandlebarshandlebars

Setang ditandai oleh penggunaan ikal kurung (yang terlihat seperti setang), menambah standar tag ke template yang akan diganti dengan isi ketika file disajikan.

Contoh handlebars.js template tag: {{content}}

Handlbars.js disebut sebagai bahasa template logika-kurang karena itu tidak dapat digunakan untuk menulis fungsi, memegang variabel, atau jika tidak mempersiapkan konten untuk tampilan. Selain render konten mana Tag ditempatkan, operasi hanya hanya untuk:

  1. Check apakah atau tidak ada sepotong konten tertentu, misalnya sebuah logo
  2. Iterate seperangkat konten yang berisi beberapa catatan, misalnya sekelompok posting terbaru

Ini adalah fungsi logika-kurang di balik setiap tema Ghost yang menjamin setiap tema kontrol atribut presentasi saja.

Ghost tema juga tidak menentukan konten apa tag template setang akan diganti dengan - yang semua ditangani oleh hantu itu sendiri. Tema ini, namun, digunakan untuk menentukan bagaimana output akan ditandai dan gaya.

Berkat banyaknya logika-kurang, menandai dan styling Ghost output mudah dicapai dan membantu menjamin kebersihan kode dalam template Anda. Pada gilirannya ini membuatnya mudah untuk menulis markup semantik yang up to date dengan terbaru SEO dan standar aksesibilitas.

Komponen dari sebuah tema Ghost

Berikut adalah cepat "sekilas" daftar semua yang, dan tidak termasuk dalam dua tahap merancang tema Ghost.

Apa yang ada di sebuah Ghost tema: template

  • Penempatan setang Tag dalam file template
  • Markup semantik-template tag

Styling

  • Typography
  • Layout control
  • Color scheme & overall design
  • Responsiveness

Namun, berikut tidak disertakan dalam tema Ghost:

  • Logic
  • Functionality additions
  • Custom admin area controls
  • Query database modifikasi

Anda mungkin menemukan itu berguna untuk berpikir dari proses desain dua-tahap sebagai menjadi diringkas oleh prinsip "SAMWYS", atau "Style dan Markup apa Anda melayani".

Ketika merancang tema Ghost yang kita tidak perlu bekerja dengan logika atau database queries karena Ghost menangani semua itu bagi kita. SAMWYS mengingatkan kita semua harus kita lakukan adalah menempatkan tag template, menulis kualitas markup dan mengumpulkan tema besar styling pengguna menampilkan konten.


Datang Berikutnya

Segala sesuatu yang telah kita bahas sejauh ini menyediakan Anda dengan pengertian mendasar tentang Ghost.

Dari sini kita dapat melanjutkan ke proses langkah demi langkah sebenarnya menciptakan tema pertama Anda.

Bagian selanjutnya dari seri tutorial kami dimulai dengan tahap pertama dari proses pembuatan tema; tahap template. Anda akan belajar bagaimana men-setup file tema Anda struktur, bagaimana untuk menempatkan tag template dan bagaimana untuk menulis sebuah kerangka markup.

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.