Cara Buat Blog Statik Menggunakan Kaktus [OS X]

Kemas kini: Aplikasi kaktus telah dihentikan.

Sekiranya anda tidak memerlukan CMS dan lebih suka hanya mendapat tapak statik atau blog, maka Jekyll adalah alat yang baik untuk mengambil kesempatan. Walau bagaimanapun, jika anda lebih suka alat dengan GUI, daripada bekerja dengan alat arahan, maka anda mungkin ingin menyemak Kaktus.

Cactus adalah percuma penjana tapak statik dilengkapi alat berkuasa yang dapat membantu anda membina laman web secara tempatan, lebih pantas dan lebih mudah dengan teknologi web moden. Ia memberi anda titik permulaan dalam projek anda dengan 4 templat yang telah direka bentuk supaya anda dapat memukul tanah berjalan.

Semasa bekerja pada projek anda, Cactus akan memantau setiap perubahan yang anda buat pada projek anda dan menyegarkan penyemak imbas secara automatik jadi anda boleh melihat perubahan dengan segera, pada Mac atau peranti mudah alih anda. Ia juga menyokong SASS / SCSS dan Coffescript daripada kotak, jadi setiap perubahan pada fail ini juga dijana secara automatik.

Bermula

Pertama sekali, anda perlu memuat turun Cactus dari laman utamanya, kemudian jalankan pemasangan. Setelah selesai, bukanya, anda akan melihat empat butang: Buat, Ubah, Edit, dan butang Preview.

Untuk membuat projek baru, klik Buat. Anda akan melihat 4 templat yang tersedia di sana. Untuk tutorial ini, kami akan menggunakan templat Blog. Klik Buat.

Anda akan diminta memberikan nama projek anda dan memilih lokasi di mana projek itu wujud. Di sini saya beri nama “Blog Awesome Saya” untuk projek itu. Selepas itu, anda akan melihat projek anda dalam Cactus.

Mengubah Fail

Projek yang dijana menggunakan templat Blog kini wujud pada Pencari Anda. Kami kini akan memeriksa elemen yang diperlukan untuk membina Blog kami. Kepala ke direktori di mana fail anda disimpan. Direktori utama yang akan kami gunakan ialah Templat, Halaman-halaman, dan Statik direktori. Mari melangkau yang lain buat masa sekarang.

Untuk menyimpan perkara-perkara ringkas, inilah yang setiap direktori adalah untuk:

• Templat: Mengandungi fail HTML yang berkelakuan sebagai templat, yang digunakan oleh fail HTML pada halaman untuk membina.
• Halaman-halaman: Mengandungi semua fail HTML yang akan menjadi halaman dengan laluan yang sama. contohnya: hello.html di sini akan menjadi http://yoursite.com/hello.html
• Statik: Mengandungi semua sumber statik seperti CSS, Javascript dan imej.

Kini, kami akan mengedit tiga fail utama dari direktori: base.html dan post.html dalam direktori Templat dan index.html dalam direktori Halaman.

Menggunakan kaktus Enjin Templat Django untuk bahasa templating. Dengan ini, anda boleh memasukkan elemen HTML dari fail HTML lain, jadi anda tidak perlu menduplikasi kod. Ciri-ciri yang paling banyak digunakan di sini adalah warisan templat dan pembolehubah.

Untuk melihat bagaimana mereka berfungsi, buka pertama base.html pada direktori Templat.

             % block content% Kandungan utama % endblock content% ---   

base.html adalah fail html mudah yang kita gunakan sebagai templat 'rangka'. Ia mengandungi unsur-unsur biasa laman web kami. Anda boleh melihat beberapa “blok” di sana; kami akan menggunakan template kanak-kanak untuk mengatasi blok ini.

Sekarang buka post.html terletak di direktori yang sama dengan base.html.

 % extends "base.html"% title block title title | Cactus % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% Ini adalah tempat isi kandungannya. % body endblock% 
 --- % endblock content% 

The post.html mengandungi markup untuk halaman kemasukan blog kami. Pada baris pertama anda dapat melihatnya post.html memanjangkan base.html. Ini bermakna kita akan menimpa blok tersebut base.html dengan blok di sini.

Kita juga boleh mencari pembolehubah di sini, seperti title dan headline. Kami akan menentukan nilai-nilai pembolehubah ini dalam catatan blog selepasnya.

Sekarang, mari lihat % block body% blok. Ini akan ditindih oleh templat kanak-kanak yang mengandungi penyertaan pos blog kami.

Pergi ke direktori halaman / jawatan. Berikut adalah catatan penyertaan kami yang lain.

 tajuk: Tajuk utama saya Post: My Post Tajuk utama: Agus tarikh: 15-01-2015 % extends "post.html"% % block body% % markdown filter% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sebelum ini, kami akan mencatatkan masa depan dan tempat tinggal dalam masa yang akan datang, dan kami akan memastikan bahawa kami telah melancarkan serangan ke seluruh dunia. --- % endfilter% % endblock body% 

Dalam entri catatan, kami memberi nilai kepada pemboleh ubah, seperti tajuk, tajuk, pengarang, dan tarikh. Nilai ini akan lulus apabila kami memanggil nama pemboleh ubah pada templat ibu bapa. Kemudian kami menulis kandungan blog kami dengan Markdown.

Sekarang kita akan pergi ke halaman indeks blog kita, buka index.html di dalam halaman direktori. Ia mengandungi senarai entri blog kami dan pautan ke setiap entri. Kod utama kelihatan seperti di bawah:

 % extends "base.html"% % block content% -- 
 % untuk catatan dalam catatan% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Pada ketika ini kami mempunyai blog sederhana dengan dua halaman utama, iaitu halaman indeks yang mengandungi entri blog, dan halaman penyertaan blog sendiri.

Pergi ke tetingkap Kaktus, dan klik butang pratonton untuk memulakan pelayan. Ia akan secara automatik membuka penyemak imbas dan membuka laman web anda.

Menggayakan Blog menggunakan SCSS

Ciri hebat Cactus ialah ia berfungsi dengan SASS / SCSS dari kotak. Hanya jatuhkan fail .sass atau .scss anda ke dalam statik direktori dan setiap kali anda mengedit dan menyimpan fail, Cactus secara automatik akan menghasilkan CSS.

Di sini saya akan memberikan contoh menggunakan bootstrap-sass untuk menggayakan blog kami. Dengan andaian anda menggunakan bower, terminal terbuka, dan navigasi ke statik direktori projek kami menggunakan cd perintah. Kemudian pasang bootstrap-sass menggunakan perintah ini:

$ bower memasang bootstrap-sass-rasmi

Setelah muat turun selesai, anda akan melihat bower_components direktori di dalam direktori statik yang mengandungi pembalak-sass-rasmi.

Sekarang pergi ke direktori ini: statik / css. Buat fail scss, berikan nama itu syle-bs.scss dan masukkan kod ini.

 @import "... / bower_components / bootstrap-sass-rasmi / aset / stylesheets / _bootstrap"; 

Apa yang dilakukan oleh kod itu ialah mengimport semuanya dari bootstrap-sass. Sebaik sahaja anda menyimpan gaya-bs.scss, anda akan melihat style-bs.css yang dijana pada direktori yang sama yang mengandungi semua gaya dari bootstrap.

Gunakan Projek anda

Akhir sekali, apabila projek anda sudah siap, anda boleh menggunakan projek anda untuk versi langsung dengan mudah menggunakan Amazon S3.