หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ธีม Hugo สำหรับคนเรียบง่าย Fiber ใช้ JavaScript และ CSS ขั้นต่ำเพื่อให้ไซต์ของคุณสามารถโหลดเร็วขึ้น! แถมยังมี UI ที่สะอาดตาอีกด้วย!!

สารบัญ

  • การติดตั้ง
    • การใช้โมดูลย่อย
    • ดาวน์โหลดธีมโดยตรง
  • คุณสมบัติ
    • พร้อมทำ SEO
    • รหัสย่อ
      • ASCIINมา
      • ฉันสามารถใช้
    • คลิกเพื่อคัดลอกรหัส
    • บันทึกที่สวยงาม
  • ภาพหน้าจอ
  • การตั้งค่าธีม
    • รายการเนื้อหาในหน้าแรก
      • รายชื่อบล็อก บันทึกย่อ ฯลฯ
      • แสดงรายการเนื้อหาที่กำหนดเอง
    • การเน้นโค้ด
    • รายการเมนู
    • ชื่อไซต์
  • การเขียนเนื้อหา
    • การเขียนบันทึก
    • แนวหน้า

การติดตั้ง

มีสองวิธีที่สามารถใช้ธีมนี้กับไซต์ที่ใช้ Hugo ได้

  1. การใช้ Git Submodules (แนะนำ)
  2. ดาวน์โหลดธีมโดยตรงไปที่ <hugo-site-root>/themes/

การใช้โมดูลย่อย

  1. สร้างไซต์ของคุณโดยใช้ hugo new site SITE_NAME
  2. cd ไปยัง SITE_NAME
  3. เริ่มต้น repo git: git init สิ่งนี้จำเป็นเพราะเราต้องเพิ่มโมดูลย่อย git
  4. เพิ่ม submodule โดยการรัน git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
  5. ตอนนี้เริ่มเซิร์ฟเวอร์ Hugo ในเครื่องโดยใช้ hugo serve

หากมีการอัปเดตในพื้นที่เก็บข้อมูลธีม คุณสามารถดึงข้อมูลเหล่านั้นได้โดยใช้ git submodule update --remote

ดาวน์โหลดธีมโดยตรง

ใช้วิธีนี้หากคุณไม่สามารถใช้ Git ได้ด้วยเหตุผลบางประการ

  1. ดาวน์โหลดสิ่งนี้และแยกเนื้อหาไปที่ SITE_ROOT/themes/hugo-theme-fiber/
  2. เริ่ม Hugo ในเครื่องโดยดำเนินการ hugo serve จากเทอร์มินัล

คุณสมบัติ

พร้อมทำ SEO

ธีมนี้เต็มไปด้วย SEO พื้นฐานและข้อมูล JSON-LD ขั้นต่ำจาก Schema.org

รหัสย่อ

นอกเหนือจากรหัสย่อที่พร้อมใช้งานแล้ว ยังมีรหัสย่อที่มีประโยชน์อื่นๆ อีกสองสามรหัสซึ่งสามารถพิสูจน์ได้ว่ามีประโยชน์ในบางครั้ง

ASCIINมา

ฝัง AsciiNema Cast รหัสย่อที่จะใช้: {{< asciinema id="id of a public cast" >}}

ฉันสามารถใช้

รหัสย่อนี้แสดงข้อมูลล่าสุดจากเว็บไซต์ caniuse.com มีประโยชน์สำหรับนักพัฒนาเว็บ ตัวอย่าง: 

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

คลิกเพื่อคัดลอกรหัส

ผู้เยี่ยมชมเว็บไซต์สามารถคัดลอกเนื้อหาของ codeblock ใด ๆ ได้ด้วยคลิกเดียว สิ่งนี้จะไม่ทำลายการเยื้องโค้ด!

บันทึกที่สวยงาม

ทุกสิ่งที่คุณใส่ใน content/notes จะได้รับคำอธิบายประกอบแบบคร่าวๆ ทำให้ง่ายต่อการจดจำสิ่งสำคัญจากบันทึกย่อ

คำอธิบายประกอบแบบคร่าวๆ ถูกควบคุมโดยใช้แท็ก เช่น strong , em และ strikethrough หากต้องการสร้างรายการ notes ใหม่ คุณต้องสร้าง content/notes ก่อน จากนั้นใช้ hugo new notes/file-name.md เพื่อสร้าง Note ไฟล์นี้จะมีข้อมูลเกี่ยวกับวิธีการใส่คำอธิบายประกอบสิ่งต่าง ๆ ด้วยแท็กที่กล่าวถึงข้างต้น

ภาพหน้าจอ

การตั้งค่าธีม

รายการเนื้อหาในหน้าแรก

หน้าแรกสามารถกำหนดค่าได้สองวิธี คุณสามารถแสดงรายการส่วนที่คุณชื่นชอบ/สำคัญที่สุดได้จากไดเร็กทอรี content

หรือวางเนื้อหาที่กำหนดเองไว้ข้างใน

หรือคุณสามารถทำทั้งสองอย่าง! ตรวจสอบให้แน่ใจว่าได้สร้างไฟล์ content/_index.md ที่มี title คุณสมบัติอยู่ภายใน fromtmatter คุณสมบัติ title นี้มีประโยชน์สำหรับ SEO ตัวอย่าง: 

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here -->

รายชื่อบล็อก บันทึกย่อ ฯลฯ

ในการสร้างรายการเนื้อหาในหน้าแรก คุณต้องตั้งค่าตัวแปรชื่อ mainSections ในไฟล์ config.toml ตัวอย่าง: 

[ params ]
mainSections = [ " posts " ]

แสดงรายการเนื้อหาที่กำหนดเอง

หากต้องการแสดงรายการเนื้อหาที่กำหนดเอง เพียงวางไว้ใน content/_index.md โดยมีส่วนหน้าที่เหมาะสม

การเน้นโค้ด

ตามค่าเริ่มต้น Hugo จะไม่ใช้คลาสใดๆ แต่สิ่งนี้จะไม่ทำงานสำหรับธีมนี้เนื่องจากคุณสมบัติบางอย่างขึ้นอยู่กับสิ่งนั้น

คุณต้องรันคลาสสำหรับ codeblock ต่อไปนี้เป็นวิธีดำเนินการ: 

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

รายการเมนู

ตามค่าเริ่มต้น จะมีรายการเมนูเพียงรายการเดียวในเมนูด้านบน หากต้องการเพิ่มรายการต่างๆ ในนั้น คุณต้องกำหนดรายการเมนูภายใน config.toml ต่อไปนี้เป็นตัวอย่างจาก config.toml ของเว็บไซต์ของฉัน: 

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

ชื่อไซต์

ชื่อไซต์ถูกควบคุมโดยพารามิเตอร์ต่อไปนี้ใน config.toml : 

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

การเขียนเนื้อหา

การเขียนบันทึก

Notes เป็นฮาร์ดโค้ดชนิดพิเศษในธีมนี้ เนื้อหาประเภทนี้จะมีคำอธิบายประกอบแบบคร่าว ๆ (ซึ่งทำให้ง่ายต่อการจัดการบันทึก)

สร้างหน้าบันทึกย่อโดยใช้คำสั่ง hugo new notes/your-filename.md เพื่อเรียนรู้วิธีใช้คำอธิบายประกอบคร่าวๆ ภายในหน้าบันทึกย่อ

รวมแม่แบบสำหรับหมายเหตุชนิดแล้ว

แนวหน้า

ธีมนี้ใช้ frontmatter เพื่อจัดการคำอธิบายโพสต์ที่กำหนดเองและเมตาอิมเมจสำหรับ SEO หากไม่พบ meta.image และ meta.description มันจะย้อนกลับไปยัง /images/default-meta-image.png และ .Summary ตามลำดับ

ใช้สองฟิลด์นี้ใน frontmatter ดังนี้: 

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด