Kaktüs Kullanarak Statik Blog Nasıl Oluşturulur [OS X]

Güncelleştirme: Kaktüs uygulaması durduruldu.

Bir CMS'ye ihtiyacınız yoksa ve sadece statik bir site ya da blog almayı tercih ederseniz, Jekyll şansını denemek için iyi bir araçtır. Ancak, komut satırı araçlarıyla çalışmak yerine, GUI'ye sahip bir araç tercih ederseniz, kontrol etmek isteyebilirsiniz. Kaktüs.

Kaktüs ücretsizdir statik alan üreteci Size yardımcı olabilecek güçlü araçlarla donatılmış yerel web siteleri kurmak, Modern web teknolojileri ile daha hızlı ve daha kolay. Projenizde önceden tasarlanmış 4 şablonla size bir başlangıç ​​noktası sağlar, böylece zemini çalıştırabilirsin.

Projeniz üzerinde çalışırken, Cactus projenizde yaptığınız her değişikliği izleyin ve tarayıcıyı otomatik olarak yenile Böylece değişiklikleri anında, Mac'inizde veya mobil cihazınızda görebilirsiniz. Ayrıca kutudan SASS / SCSS ve Coffescript'i de destekler, böylece bu dosyadaki her değişiklik de otomatik olarak oluşturulur..

Başlamak

Öncelikle, Cactus'u ana sayfasından indirip kurulumu çalıştırmanız gerekir. Tamamlandığında açtıktan sonra dört düğme göreceksiniz: Oluştur, Dağıt, Düzenle ve Önizleme düğmesi.

Yeni bir proje oluşturmak için tıklayın. yaratmak. Orada 4 tane şablon göreceksiniz. Bu ders için, Blog şablonuyla gidiyoruz. Click yaratmak.

Projenizin adını vermeniz ve projenin bulunduğu yeri seçmeniz istenecektir. İşte isim vereceğim “Müthiş Blogum” proje için. Ondan sonra, projeni zaten Cactus'ta göreceksin..

Dosyaları Değiştirme

Blog şablonunu kullanarak oluşturulan proje artık Finder'ınızda var. Şimdi Blog'umuzu oluşturmak için gereken unsurları inceleyeceğiz. Dosyalarınızın tutulduğu dizine gidin. Kullanacağımız ana dizinler Şablonlar, Sayfalar, ve Statik dizin. Şimdilik diğerlerini atlayalım.

İşleri kısa tutmak için, işte her dizin ne için:

• Şablonlar: Sayfalarda HTML dosyaları tarafından oluşturulan, şablon olarak çalışan HTML dosyalarını içerir..
• Sayfalar: Aynı yolla bir sayfa olacak tüm HTML dosyalarını içerir. örneğin: hello.html burada http://yoursite.com/hello.html olacak
• Statik: CSS, Javascript ve resimler gibi tüm statik kaynakları içerir.

Şimdi, dizinlerden üç ana dosyayı düzenleyeceğiz: base.html ve post.html Şablonlar dizininde ve index.html Sayfalar dizininde.

Kaktüs kullanır Django Şablon Motoru şablonlama dili için. Bununla, diğer HTML dosyalarından HTML öğeleri ekleyebilirsiniz, böylece kodları çoğaltmanıza gerek kalmaz. Burada en çok kullanılan özellikler şablon devralma ve değişken.

Nasıl çalıştıklarını görmek için önce base.html Şablon dizinde.

             % block content% Ana içerik % endblock content% ---   

base.html 'iskelet' şablonu olarak kullandığımız basit html dosyasıdır. Sitemizin ortak unsurlarını içerir. Biraz görebilirsin “bloklar” Orada; bu blokları geçersiz kılmak için alt şablonu kullanacağız.

Şimdi aç post.html aynı dizinde bulunan base.html.

 % "base.html"% genişletir % block title% title | Kaktüs % endblock title% % blok içeriği% --- 
 
 Başlık 
 
headline 
 
 
 % block body% Bu yazılan içeriğin olduğu yerdir. % endblock gövdesi% 
 --- % endblock içeriği% 

post.html blog giriş sayfamızın işaretlemesini içerir. İlk satırda bunu görebilirsiniz post.html uzanır base.html. Bu, üzerindeki blokları geçersiz kılacağımız anlamına gelir base.html burada bloklarla.

Değişkenleri burada da bulabiliriz. Başlık ve headline. Bu değişkenlerin değerlerini daha sonra gönderilecek blog girişlerinde tanımlayacağız..

Şimdi, bakalım % blok gövdesi% blok. Bu blogumuzun yazı girişlerini içeren alt şablon tarafından geçersiz kılınır.

Dizine git sayfa / mesajlar. İşte post yazılarımızın geri kalanı.

 başlık: Gönderim Girişler başlığım: Gönderim Başlığım yazar: Agus tarih: 15-01-2015 % "post.html"% % blok gövdesi% % filterdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo lumum ab saepe, asumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock gövdesi% 

Gönderi girişlerinde başlık, başlık, yazar ve tarih gibi değişkenlere değer veririz. Üst şablondaki değişken ismini çağırdığımızda bu değer geçecektir. Ardından blogumuzun içeriğini Markdown ile yazıyoruz..

Şimdi blogumuzun dizin sayfasına gideceğiz, açık index.html içinde sayfalar dizin. Blog girişlerimizin listesini ve her bir girişe verilen linki içerir. Ana kod aşağıdaki gibi görünüyor:

 % "base.html"% genişletir % block content% -- 
 %% yayınlarındaki yayın için% 
   yazı başlığı  
post.headline 
 % endfor% 
 -- % endblock içeriği% 

Bu noktada iki ana sayfalı basit bir blogumuz var. dizin sayfası Blog girişlerini içeren ve blog giriş sayfası kendisi.

Kaktüs penceresine gidin ve sunucuyu başlatmak için önizleme düğmesine tıklayın. Tarayıcıyı otomatik olarak açacak ve web sitenizi açacaktır..

Blog'u SCSS kullanarak biçimlendirme

Cactus'un en büyük özelliği, kutunun dışında SASS / SCSS ile çalışmasıdır. Sadece .ass veya .scss dosyalarınızı bırakın içine statik dizini ve dosyaları her düzenlediğinizde ve kaydettiğinizde, Cactus otomatik olarak CSS'yi oluşturur..

Burada blogumuzu şekillendirmek için bootstrap-sass kullanarak bir örnek vereceğim. Bower kullandığınızı varsayalım, terminali açıp statik Projemizin dizini kullanarak CD Komut. Sonra bu komutu kullanarak bootstrap-sass'i kurun:

$ bower açılış bootstrap-sass-resmi

İndirme işlemi tamamlandıktan sonra, bir bower_components içeren statik dizinin içindeki dizin önyükleme-küstahlık-resmi.

Şimdi bu dizine gidin: static / css. Scss dosyasını oluşturun, ismini verin syle-bs.scss ve bu kodu.

 @Ithalat "… / bower_components / bootstrap-sass-official / asset / stylesheets / _bootstrap"; 

Kodun yaptığı şey her şeyi bootstrap-sass'dan almak. Style-bs.scss'i kaydettikten sonra, bootstrap'daki tüm stilleri içeren aynı dizinde oluşturulan style-bs.cs'leri göreceksiniz..

Projenizi Dağıtın

Son olarak, projeniz hazır olduğunda, projenizi kolayca canlı sürüme dağıtabilirsiniz. Amazon S3 kullanarak.