ธีมฮิวโก้ quint
v1.1.0
Quint เป็นธีม Hugo สไตล์มินิมอลที่ออกแบบมาเพื่อปลุกความรู้สึกที่สะอาด โปร่งสบาย โดยเน้นความชัดเจนและอ่านง่าย มีแบนเนอร์รูปภาพในตัวที่หรูหราและการออกแบบน้ำหนักเบา ทำให้เหมาะอย่างยิ่งสำหรับการแสดงเวทีกลางเนื้อหาของคุณ
ตรวจสอบพื้นที่เก็บข้อมูลไซต์สาธิต ซึ่งคุณสามารถใช้เป็นเทมเพลตเริ่มต้นสำหรับไซต์ใหม่ได้ (Psst... มีปุ่มปรับใช้กับ Netlify เพียงคลิกเดียวที่นั่น)
สาธิตสดที่นี่
การออกแบบที่เรียบง่าย : เน้นไปที่การอ่านเนื้อหาโดยมีสิ่งรบกวนน้อยที่สุด
โหมดมืดและสว่าง : การสลับธีมอัตโนมัติที่เคารพการตั้งค่าเบราว์เซอร์/อุปกรณ์ของผู้ชม
เค้าโครงที่ตอบสนอง : ดูดีทั้งบนอุปกรณ์มือถือและเดสก์ท็อป
รวมแบนเนอร์รูปภาพ : จัดส่งด้วยแบนเนอร์รูปภาพสไตล์มินิมอลที่สวยงามซึ่งกำหนดโทนสำหรับไซต์ของคุณ แทนที่หรือเพิ่มของคุณเองได้ตลอดเวลา
การค้นหาไซต์ : การค้นหาในตัวบนไซต์คงที่ของคุณโดยใช้ Lunr.js
ไอคอนโซเชียล : ลิงก์ที่กำหนดค่าได้ไปยังโซเชียลมีเดียของคุณในส่วนท้าย
หากต้องการเริ่มต้นใช้งาน Quint คุณต้องติดตั้ง Hugo ไว้ในเครื่องของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้ง Hugo โปรดดูเอกสารอย่างเป็นทางการของ Hugo
หากต้องการคำแนะนำทีละขั้นตอนในการสร้างเว็บไซต์ใหม่ด้วย Hugo โปรดอ่านการเริ่มต้นอย่างรวดเร็ว
เมื่อติดตั้ง Hugo แล้ว ให้เพิ่ม Quint ลงในไดเร็กทอรีธีมของเว็บไซต์ของคุณ จากรูทไซต์ของคุณ ให้รัน:
git submodule เพิ่ม https://github.com/victoriadrake/hugo-theme-quint.git ธีม/quint
เปิดไฟล์การกำหนดค่าของไซต์ Hugo ของคุณ ( hugo.toml , hugo.yaml หรือ hugo.json ) และอัปเดตพารามิเตอร์ theme เพื่อใช้ quint :
hugo.toml :ธีม = "ควินต์"
hugo.yaml :กระทู้: "quint"
Quint ดูดีมากเมื่อนำออกจากกล่อง หรือคุณสามารถคัดลอกค่าการกำหนดค่าจาก yoursite/themes/quint/hugo.toml ไปยังการกำหนดค่าของไซต์ของคุณ ( yoursite/hugo.toml ) เพื่อปรับแต่ง Quint ในแบบของคุณเพิ่มเติม
เรียกใช้ Hugo เพื่อสร้างเว็บไซต์ของคุณและเริ่มต้นเซิร์ฟเวอร์ จากรูทไซต์ของคุณ ให้รัน:
เซิร์ฟเวอร์ฮิวโก้
ไปที่ http://localhost:1313 ในเว็บเบราว์เซอร์ของคุณเพื่อดูการทำงานของเว็บไซต์ของคุณในธีม Quint
หากต้องการดาวน์โหลด Quint เวอร์ชันล่าสุด ให้รัน:
การอัปเดตโมดูลย่อย git --ธีมระยะไกล/quint
Quint ออกแบบมาให้ปรับแต่งได้ง่าย
เพิ่มไฟล์ CSS ที่คุณกำหนดเองได้อย่างง่ายดายโดยตั้งชื่อไฟล์เหล่านั้นในการกำหนดค่า Hugo ของคุณ:
[params]css = ["css/custom.css"] # CSS ที่คุณกำหนดเองจะแทนที่ ซึ่งจัดเก็บไว้ในเว็บไซต์ของคุณ/static/
คุณสามารถแทนที่เค้าโครงใดๆ โดยใช้ไฟล์ชื่อเดียวกันในไดเร็กทอรีโปรเจ็กต์ของคุณ ตัวอย่างเช่น ไฟล์ yoursite/layouts/partials/contact.html จะแทนที่ yoursite/themes/quint/layouts/partials/contact.html
เพิ่มหรือลบส่วนต่างๆ ออกจากหน้าแรกโดยการแทนที่ไฟล์ yoursite/themes/quint/layouts/index.html เพียงสร้างสำเนาของไฟล์นี้ในไดเรกทอรีโครงการของคุณ ( yoursite/layouts/index.html ) แล้วลบหรือเพิ่ม partial ที่คุณต้องการ
หากเพจหรือโพสต์ไม่ได้ระบุ image ไว้ด้านหน้า Quint จะแสดงแบนเนอร์รูปภาพที่สวยงามโดยเลือกรูปภาพแบบสุ่มจากไดเร็กทอรี themes/quint/static/images
ซึ่งทำได้โดยการเลือกตัวเลขสุ่มตั้งแต่ 1-10 ซึ่งตรงกับชื่อไฟล์ภาพ คุณสามารถเพิ่มลงในคอลเลกชันนี้หรือแทนที่รูปภาพใดก็ได้ที่คุณต้องการ เพียงอัปเดตจำนวนสุ่มสูงสุดให้ตรงกับจำนวนภาพที่คุณมี
[params]numImages = 12 # จำนวนรูปภาพสุ่มให้เลือกสำหรับแบนเนอร์ (ในธีม/quint/static/images)
ยินดีต้อนรับการบริจาคให้กับ Quint! อย่าลังเลที่จะส่งปัญหาหรือดึงคำขอบน GitHub เพื่อปรับปรุงฟังก์ชันการทำงานหรือเอกสารประกอบของธีม
ต้องการแนวคิดในการเริ่มต้นหรือไม่? นี่คือรายการคุณสมบัติโดยย่อที่ฉันอยากเห็นเพิ่มเติม:
ปุ่มคัดลอกบล็อคโค้ด
การเน้นไวยากรณ์ Chroma ของ Hugo
เครื่องกำเนิดสินทรัพย์ของ Hugo พร้อมการวางท่อ การพิมพ์ลายนิ้วมือ การรวมกลุ่ม และการลดขนาด
การสนับสนุนหลายภาษา
การนำทางเบรดครัมบ์
ธีมนี้เผยแพร่ภายใต้ใบอนุญาต MIT สำหรับรายละเอียดเพิ่มเติม โปรดดูไฟล์ LICENSE
Quint ใช้แบบอักษร Open Sauce ที่ยอดเยี่ยม
การจำลองอุปกรณ์ที่สร้างจาก deviceframes.com
