วิธีสร้างบล็อกแบบคงที่โดยใช้ Cactus [OS X]

ปรับปรุง: แอพ Cactus ได้ถูกยกเลิก.

หากคุณไม่ต้องการ CMS และต้องการเพียงแค่รับเว็บไซต์แบบคงที่หรือบล็อก Jekyll เป็นเครื่องมือที่ดีที่จะมีโอกาส อย่างไรก็ตามหากคุณต้องการเครื่องมือที่ใช้ GUI แทนที่จะทำงานกับเครื่องมือบรรทัดคำสั่งคุณอาจต้องการตรวจสอบ ต้นกระบองเพชร.

กระบองเพชรเป็นของฟรี ตัวสร้างไซต์แบบคงที่ พร้อมเครื่องมือที่ทรงพลังที่สามารถช่วยคุณได้ สร้างเว็บไซต์ในพื้นที่, เร็วขึ้นและง่ายขึ้นด้วยเทคโนโลยีเว็บที่ทันสมัย มันให้คุณเป็นจุดเริ่มต้นในโครงการของคุณด้วย 4 แม่แบบที่ออกแบบไว้ล่วงหน้าเพื่อให้คุณสามารถทำงานได้อย่างสมบูรณ์.

ในขณะที่ทำงานกับโครงการของคุณกระบองเพชรจะ ตรวจสอบการเปลี่ยนแปลงทุกอย่างที่คุณทำในโครงการของคุณ และ รีเฟรชเบราว์เซอร์โดยอัตโนมัติ เพื่อให้คุณสามารถเห็นการเปลี่ยนแปลงได้ทันทีบน Mac หรืออุปกรณ์มือถือของคุณ นอกจากนี้ยังรองรับ SASS / SCSS และ Coffescript นอกกรอบดังนั้นทุกการเปลี่ยนแปลงในไฟล์นี้จะถูกสร้างขึ้นโดยอัตโนมัติ.

เริ่ม

ก่อนอื่นคุณต้องดาวน์โหลด Cactus จากโฮมเพจจากนั้นเรียกใช้การติดตั้ง เมื่อเปิดเสร็จแล้วคุณจะเห็นปุ่มสี่ปุ่ม: สร้างปรับใช้แก้ไขและดูตัวอย่างปุ่ม.

ในการสร้างโครงการใหม่ให้คลิก สร้าง. คุณจะเห็นเทมเพลต 4 แบบที่นั่น สำหรับบทเรียนนี้เราจะไปกับเทมเพลตบล็อก คลิก สร้าง.

คุณจะถูกขอให้ระบุชื่อโครงการของคุณและเลือกตำแหน่งที่ตั้งที่มีโครงการ ที่นี่ฉันให้ชื่อ “บล็อกที่น่ากลัวของฉัน” สำหรับโครงการ หลังจากนั้นคุณจะเห็นโครงการของคุณอยู่ใน Cactus แล้ว.

การแก้ไขไฟล์

โครงการที่สร้างโดยใช้เทมเพลตบล็อกมีอยู่ใน Finder ของคุณแล้ว ตอนนี้เราจะตรวจสอบองค์ประกอบที่จำเป็นในการสร้างบล็อกของเรา ตรงไปที่ไดเรกทอรีที่เก็บไฟล์ของคุณ ไดเรกทอรีหลักที่เราจะใช้คือ แม่แบบ, หน้า, และ คงที่ ไดเรกทอรี ข้ามตอนนี้ไปก่อน.

เพื่อให้ทุกอย่างสั้นลงนี่คือสิ่งที่แต่ละไดเรกทอรีใช้สำหรับ:

• แม่แบบ: มีไฟล์ HTML ซึ่งทำหน้าที่เป็นเทมเพลตซึ่งใช้โดยไฟล์ HTML ในหน้าต่างๆเพื่อต่อยอด.
• หน้า: มีไฟล์ HTML ทั้งหมดที่จะกลายเป็นหน้าที่มีพา ธ เดียวกัน เช่น hello.html ที่นี่จะกลายเป็น http://yoursite.com/hello.html
• คงที่: มีทรัพยากรแบบคงที่ทั้งหมดเช่น CSS, Javascript และรูปภาพ.

ตอนนี้เราจะแก้ไขไฟล์หลักสามไฟล์จากไดเรกทอรี: base.html และ post.html ในไดเรกทอรีเทมเพลตและ index.html ในไดเรกทอรีหน้า.

กระบองเพชรใช้ เครื่องยนต์แม่แบบ Django สำหรับภาษา templating ด้วยวิธีนี้คุณสามารถรวมองค์ประกอบ HTML จากไฟล์ HTML อื่น ๆ ดังนั้นคุณไม่จำเป็นต้องใช้รหัสซ้ำกัน คุณสมบัติที่ใช้มากที่สุดที่นี่คือ เทมเพลตการสืบทอด และ ตัวแปร.

หากต้องการดูวิธีการทำงานให้เปิดตัว base.html ในไดเรกทอรีเทมเพลต.

             % block content% เนื้อหาหลัก % endblock content% ---   

base.html เป็นไฟล์ html ที่เรียบง่ายที่เราใช้เป็นเทมเพลต 'Skeleton' มันมีองค์ประกอบทั่วไปของเว็บไซต์ของเรา คุณสามารถเห็นบางอย่าง “บล็อก” ในนั้น; เราจะใช้เทมเพลตย่อยเพื่อแทนที่บล็อกเหล่านี้.

ตอนนี้เปิด post.html อยู่ในไดเรกทอรีเดียวกันกับ base.html.

 % ขยาย "base.html"% % block title% title | Cactus % endblock Title% % บล็อกเนื้อหา% --- 
 
title
 
headline 
 
 
 % block body% ที่นี่คือที่โพสต์เนื้อหา % endblock เนื้อหา% 
 --- % endblock เนื้อหา% 

post.html มีมาร์กอัปสำหรับหน้ารายการบล็อกของเรา ที่บรรทัดแรกคุณจะเห็นว่า post.html ขยาย base.html. ซึ่งหมายความว่าเราจะแทนที่บล็อกบน base.html กับบล็อกที่นี่.

เราสามารถหาตัวแปรที่นี่เช่น title และ headline. เราจะกำหนดค่าของตัวแปรเหล่านี้ในการโพสต์รายการบล็อกในภายหลัง.

ตอนนี้ให้ดูที่ % บล็อกเนื้อหา% กลุ่ม สิ่งนี้จะถูกแทนที่โดยแม่แบบลูกที่มีรายการโพสต์ของบล็อกของเรา.

ไปที่ไดเรกทอรี หน้า / โพสต์. นี่คือส่วนที่เหลือของรายการโพสต์ของเรา.

 หัวข้อ: รายการข้อความของฉันหัวข้อ: โพสต์หัวข้อข่าวของฉันผู้เขียน: วันที่ Agus: 15-01-2015 % ขยาย "post.html"% เนื้อหาบล็อก% % ตัวกรอง markdown% Lorem ipsum dolor sit amet, adipisicing adect Elit หูฟัง, ผู้ผลิตอุปกรณ์การถ่ายภาพและการแสดงสดในเวลาต่อมา, ในช่วงเวลานี้, เป็นที่รู้จักกันดีในตำแหน่งที่ดีที่สุด, การทำเช่นนี้มากที่สุดและดีที่สุด. --- % endfilter% % endblock เนื้อหา% 

ในรายการโพสต์เราให้คุณค่ากับตัวแปรเช่นหัวเรื่องหัวเรื่องหัวเรื่องผู้แต่งและวันที่ ค่านี้จะผ่านเมื่อเราเรียกชื่อตัวแปรบนแม่แบบแม่แบบ จากนั้นเราเขียนเนื้อหาของบล็อกของเราด้วย Markdown.

ตอนนี้เราจะไปที่หน้าดัชนีของบล็อกของเราเปิด index.html ใน หน้า ไดเรกทอรี มันมีรายการบล็อกของเราและลิงค์ไปยังแต่ละรายการ รหัสหลักมีลักษณะดังนี้:

 % ขยาย "base.html"% % บล็อกเนื้อหา% -- 
 % สำหรับโพสต์ในโพสต์% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock เนื้อหา% 

ณ จุดนี้เรามีบล็อกง่ายๆที่มีสองหน้าหลักคือ หน้าดัชนี ที่มีรายการบล็อกและ หน้ารายการบล็อก ตัวเอง.

ไปที่หน้าต่าง Cactus และคลิกปุ่มแสดงตัวอย่างเพื่อเริ่มเซิร์ฟเวอร์ มันจะเปิดเบราว์เซอร์โดยอัตโนมัติและเปิดเว็บไซต์ของคุณ.

จัดแต่งทรงผมของบล็อกโดยใช้ SCSS

คุณสมบัติที่ยอดเยี่ยมของ Cactus คือใช้งานได้กับ SASS / SCSS นอกกรอบ เพียงแค่ ปล่อยไฟล์. sss หรือ. scss ของคุณ เข้าไปใน คงที่ ไดเรกทอรีและทุกครั้งที่คุณแก้ไขและบันทึกไฟล์ Cactus จะสร้าง CSS โดยอัตโนมัติ.

ที่นี่ฉันจะให้ตัวอย่างโดยใช้ bootstrap-sass เพื่อจัดแต่งทรงผมบล็อกของเรา สมมติว่าคุณกำลังใช้ bower เปิดเทอร์มินัลและไปที่ คงที่ ไดเรกทอรีของโครงการของเราโดยใช้ ซีดี คำสั่ง จากนั้นติดตั้ง bootstrap-sass โดยใช้คำสั่งนี้:

$ bower ติดตั้ง bootstrap-sass-official

เมื่อการดาวน์โหลดเสร็จสิ้นคุณจะเห็น bower_components ไดเรกทอรีภายในไดเรกทอรีคงที่มี บูต-เขื่องอย่างเป็นทางการ.

ตอนนี้ไปที่ไดเรกทอรีนี้: คง css /. สร้างไฟล์ scss ตั้งชื่อ SYLE-bs.scss และใส่รหัสนี้.

 @ นำเข้า "... / bower_components / bootstrap-sass-Official / สินทรัพย์ / stylesheets / _bootstrap"; 

สิ่งที่รหัสทำคือมันนำเข้าทุกอย่างจาก bootstrap-sass เมื่อคุณบันทึก style-bs.scss คุณจะเห็น style-bs.css ที่สร้างขึ้นในไดเรกทอรีเดียวกันที่มีสไตล์ทั้งหมดจาก bootstrap.

ปรับใช้โครงการของคุณ

สุดท้ายเมื่อโครงการของคุณพร้อมคุณสามารถปรับใช้โครงการของคุณเป็นเวอร์ชันสดได้อย่างง่ายดาย ใช้ Amazon S3.