หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เทอร์มินัลฮิวโก้ธีม

ธีมสำหรับ Hugo ที่สร้างโดยใช้ไลบรารี CSS ของ tailwind และตระกูลฟอนต์โมโน

การสาธิตสด

https://nayanseth.com

ตั้งค่า

  1. ธีมนี้ใช้ CSS แบบ Tailwind
  2. [ไม่บังคับ] วิธีใช้ Tailwind
    1. ตามค่าเริ่มต้น ไฟล์ tailwind.css ที่มีอยู่จะถูกใช้ในธีม แต่ถ้าคุณต้องการเล่นกับ tailwind ให้ทำตามขั้นตอนด้านล่าง
    2. มีไฟล์กำหนดค่าสองไฟล์สำหรับ tailwind ที่อยู่ในไดเร็กทอรี assets/csss/tailwind
      1. สำหรับ dev run npm run dev -> สิ่งนี้จะสร้างคลาส CSS ที่เป็นไปได้ทั้งหมดจาก tailwind บางส่วนอาจจะยังถูกทิ้งอยู่
      2. สำหรับ prod run npm run prod -> สิ่งนี้จะสร้างเฉพาะคลาส CSS จาก tailwind ที่คุณใช้ในธีม
  3. hugo new site <SITE_NAME>
  4. cd <SITE_NAME>
  5. git submodule add [email protected]:techbarrack/terminal-hugo-theme.git themes/terminal
  6. แทนที่เนื้อหาของ <SITE_NAME>/hugo.yaml ด้วย <SITE_NAME>/themes/terminal/hugo.yaml
  7. ในไดเร็กทอรีรากของไซต์ Hugo ให้สร้างไดเร็กทอรี: mkdir -p layouts/partials/third_party_js ไดเร็กทอรีนี้ใช้สำหรับจัดเก็บจาวาสคริปต์ของบุคคลที่สามทุกประเภท เช่น Google Analytics, Disqus ฯลฯ
  8. เรียกใช้ hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w

การปรับเปลี่ยนเนื้อหา

  1. ยกเลิกการใส่เครื่องหมายข้อคิดเห็นแอตทริบิวต์ละเว้นไฟล์ใน <SITE_NAME>/hugo.yaml
  2. เริ่มเพิ่มไฟล์ใน <SITE_NAME>/content โดยจำลองสิ่งที่มีอยู่ใน <SITE_NAME>/themes/terminal/content
  3. อัปเดตเนื้อหาเมตาใน head.html

JS บุคคลที่สาม

  1. สร้างบางส่วนใน <SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
  2. ไฟล์ทั้งหมดในโฟลเดอร์ third_party_js จะถูกรวมไว้หน้าแท็ก </body>

รหัสย่อ

  • {{< svg logo="blah" >}} -> ใช้โค้ดต่อไปนี้เพื่อเพิ่ม svg ในไฟล์ markdown
    1. เพิ่ม svg เป็นไฟล์ .html ใน layouts/content/svg
  • HTML ดิบ 
 {{< rawhtml >}}
  <div>This is raw HTML content</div>
{{< /rawhtml >}}

อ้างอิง

ลิงก์อ้างอิงบางส่วนสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำสิ่งต่างๆ ใน ​​Hugo:

  • https://gohugo.io/methods/page/
  • https://gohugo.io/methods/pages/groupbydate/
  • https://gohugo.io/content-management/taxonomies/
  • https://gohugo.io/templates/taxonomy-templates/
  • https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
  • https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
  • https://gohugo.io/methods/page/scratch/
  • https://gohugo.io/functions/collections/dictionary/
  • https://gohugo.io/methods/page/paginate/
  • https://discourse.gohugo.io/t/better-term-listing/10261
  • https://gohugo.io/templates/partials/
  • https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
  • ไอคอน SVG
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด