วิธีใช้เทมเพลตที่สร้างใน Hugo: คำแนะนำทีละขั้นตอน

เผยแพร่แล้ว: 2024-11-27

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

เทมเพลตใน Hugo คืออะไร?

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

ทำความเข้าใจว่าช่องทำเครื่องหมายปัญหาไม่แสดง

Hugo มีเทมเพลตในตัวซึ่งเป็นส่วนหนึ่งของโครงสร้างธีม และยังช่วยให้คุณสร้างเทมเพลตแบบกำหนดเองเพื่อความยืดหยุ่นที่มากขึ้น เทมเพลตเหล่านี้จะนำไปใช้โดยอัตโนมัติตามประเภทเนื้อหา โครงสร้าง URL และตัวแปรอื่นๆ ทำให้ง่ายต่อการจัดการไซต์ที่ซับซ้อน

ขั้นตอนที่ 1: ติดตั้ง Hugo และสร้างไซต์ใหม่

ก่อนที่จะเจาะลึกเทมเพลต คุณต้องติดตั้ง Hugo และตั้งค่าเว็บไซต์ของคุณเสียก่อน นี่คือวิธีที่คุณทำ:

ติดตั้งฮิวโก้ :
- หากคุณยังไม่ได้ติดตั้ง Hugo ให้ทำตามคำแนะนำในการติดตั้งอย่างเป็นทางการสำหรับระบบปฏิบัติการของคุณ: การติดตั้ง Hugo
สร้างไซต์ Hugo ใหม่ :
- รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณเพื่อสร้างไซต์ใหม่:
```
 hugo new site mysite
```
- สิ่งนี้จะสร้างไดเร็กทอรีใหม่ชื่อ mysite พร้อมด้วยโครงสร้างไฟล์พื้นฐานสำหรับโปรเจ็กต์ Hugo ของคุณ

ขั้นตอนที่ 2: เพิ่มธีม

Hugo ทำงานร่วมกับธีมเพื่อจัดการวิธีการแสดงเนื้อหา คุณสามารถใช้ธีมที่มีอยู่จาก Hugo Themes หรือสร้างธีมที่กำหนดเองก็ได้ เพื่อความง่าย ลองใช้ธีมจากไลบรารีธีม Hugo

เพิ่มธีม :
- คุณสามารถเพิ่มธีมได้โดยการโคลนธีมลงในไดเร็กทอรี themes/ ของคุณ ตัวอย่างเช่น ลองใช้ธีม “Ananke”:
```
 git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```
กำหนดค่าธีม :
- เปิดไฟล์ config.toml ของคุณและตั้งค่าธีม:
```
 theme = "ananke"
```

ขั้นตอนที่ 3: ทำความเข้าใจโครงสร้างเทมเพลต Hugo

ระบบการสร้างเทมเพลตของ Hugo มีพื้นฐานมาจากภาษาเทมเพลต Go เทมเพลตแบ่งออกเป็นหลายประเภทตามวัตถุประสงค์:

เทมเพลตฐาน : นี่คือเทมเพลตที่ครอบคลุมที่ล้อมรอบเนื้อหา มักประกอบด้วยส่วนทั่วไป เช่น ส่วนหัว ส่วนท้าย และการนำทาง
เทมเพลตเนื้อหา : สิ่งเหล่านี้กำหนดวิธีการแสดงเนื้อหาแต่ละประเภท (เช่น บทความในบล็อก หน้าเว็บ ส่วนต่างๆ)
เทมเพลตรายการ : เทมเพลตเหล่านี้ควบคุมวิธีการนำเสนอกลุ่มเนื้อหา (เช่น รายการโพสต์ในบล็อก)
เทมเพลตบางส่วน : นี่เป็นตัวอย่างข้อมูลขนาดเล็กที่นำมาใช้ซ้ำได้ (เช่น แถบนำทางหรือส่วนท้าย) ที่รวมอยู่ในเทมเพลตหลัก

ไดเร็กทอรีเทมเพลตทั่วไป

layouts/ : ประกอบด้วยไฟล์เลย์เอาต์ทั้งหมด เช่น index.html , single.html ฯลฯ
themes/ : ประกอบด้วยเทมเพลตที่มาพร้อมกับธีมที่คุณเลือก
content/ : จัดเก็บไฟล์เนื้อหาของคุณ (โดยปกติจะเขียนด้วย Markdown)

ขั้นตอนที่ 4: สร้างเทมเพลต

เรามาสำรวจวิธีการสร้างและแก้ไขเทมเพลตสำหรับเพจกันดีกว่า

สร้างไฟล์เนื้อหาใหม่ :
- หากต้องการสร้างเพจใหม่ (เช่น โพสต์ในบล็อก) ให้ใช้คำสั่งต่อไปนี้:
```
 hugo new posts/my-first-post.md
```
- สิ่งนี้จะสร้างไฟล์ Markdown ใหม่ภายใน content/posts/ โดยมีส่วนหน้า (YAML หรือ TOML) และตัวยึดตำแหน่งสำหรับเนื้อหาของคุณ
สร้างเทมเพลตสำหรับหน้าเดียว :
- ในไดเร็ก layouts ให้สร้างไฟล์ชื่อ single.html ภายใน layouts/_default/ วิธีนี้จะควบคุมวิธีการแสดงหน้าเนื้อหาแต่ละหน้า
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
```
- เทมเพลตนี้จะแสดงชื่อและเนื้อหาของหน้าเดียวที่คุณสร้างขึ้น
สร้างเทมเพลตรายการ :
- ในทำนองเดียวกัน คุณสามารถสร้างเทมเพลตรายการสำหรับการแสดงรายการเนื้อหาหลายรายการ (เช่น รายการโพสต์) สร้าง list.html ในไดเร็กทอรี layouts/_default/
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>
```

ขั้นตอนที่ 5: การปรับแต่งเทมเพลต

คุณสามารถปรับปรุงเทมเพลตของคุณด้วยชุดฟังก์ชันการสร้างเทมเพลตที่หลากหลายของ Hugo ตัวอย่างเช่น คุณสามารถรวม CSS ที่กำหนดเอง ตัวแปรวนซ้ำ หรือจัดรูปแบบวันที่ได้:

การเพิ่ม CSS : คุณสามารถเชื่อมโยงไฟล์ CSS ไปยังเทมเพลตของคุณได้:
```
 <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
```
จัดรูปแบบวันที่ : ใช้ฟังก์ชัน date เพื่อแสดงวันที่ในรูปแบบเฉพาะ:
```
 <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
```

ขั้นตอนที่ 6: ให้บริการและดูตัวอย่างเว็บไซต์ของคุณ

เมื่อเทมเพลตของคุณพร้อมและคุณได้เพิ่มเนื้อหาแล้ว คุณสามารถดูตัวอย่างเว็บไซต์ของคุณในเครื่องได้:

 hugo server

ไปที่ http://localhost:1313 เพื่อดูไซต์ของคุณ

คำถามที่พบบ่อยเกี่ยวกับเทมเพลต Hugo

1. ไดเร็กทอรี "เลย์เอาต์" ใน Hugo มีจุดประสงค์อะไร?

ไดเรกทอรี layouts คือที่ที่คุณจัดเก็บไฟล์เทมเพลตทั้งหมดไว้ใน Hugo ใช้เพื่อกำหนดว่าเนื้อหาประเภทต่างๆ (เช่น โพสต์ เพจ รายการ) จะแสดงผลที่ส่วนหน้าของเว็บไซต์ของคุณอย่างไร เทมเพลตจะจัดระเบียบตามประเภทและตำแหน่ง เช่น single.html สำหรับหน้าเนื้อหาแต่ละหน้า และ list.html สำหรับรายการเนื้อหา

2. ฉันสามารถสร้างเทมเพลตที่กำหนดเองใน Hugo ได้หรือไม่?

ใช่ คุณสามารถสร้างเทมเพลตแบบกำหนดเองใน Hugo ได้ ด้วยการวางเทมเพลตของคุณในไดเร็ก layouts คุณสามารถสร้างเทมเพลตพิเศษสำหรับประเภทเนื้อหา ส่วน หรือแม้แต่การแสดงเนื้อหาเฉพาะได้ Hugo ยังช่วยให้คุณสามารถแทนที่เทมเพลตเริ่มต้นจากธีมที่คุณเลือกได้

3. Hugo จัดการไฟล์เนื้อหาและเทมเพลตอย่างไร

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

4. เทมเพลตบางส่วนใน Hugo คืออะไร?

เทมเพลตบางส่วนเป็นส่วนประกอบหรือส่วนย่อยของ HTML ที่สามารถนำมาใช้ซ้ำได้ซึ่งสามารถรวมไว้ในเทมเพลตอื่นได้ ตัวอย่างเช่น คุณสามารถสร้างเมนูส่วนหัว ส่วนท้าย หรือการนำทางเป็นบางส่วนและรวมไว้ในเทมเพลตต่างๆ โดยใช้ {{ partial "header.html" . }} ไวยากรณ์ ซึ่งช่วยในการรักษาหลักการ DRY (อย่าทำซ้ำตัวเอง) และทำให้จัดการไซต์ได้ง่ายขึ้น

5. ฉันสามารถใช้เทมเพลต Hugo กับธีมที่กำหนดเองได้หรือไม่?

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

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