เว็บไซต์สาธิต | บันทึกการเปลี่ยนแปลง
Yue เป็นธีม Hugo ที่เรียบง่าย หลายภาษา และปรับแต่งได้ เหมาะสำหรับการเขียนบล็อก
ภาพหน้าจออาจล้าสมัย ดังนั้นจึงควรเยี่ยมชมเว็บไซต์สาธิตจะดีกว่า
โหมดแสงบนเดสก์ท็อป
โหมดมืดบนเดสก์ท็อป
โหมดแสงบนมือถือ
โหมดมืดบนมือถือ
ลักษณะที่ปรากฏน้อยที่สุด
ติดตั้งง่าย (เมื่อติดตั้ง Git และ Hugo แล้ว สร้างเว็บไซต์ได้ในไม่กี่วินาที)
เอกสารรายละเอียด
โหมดมืดอัตโนมัติ
พูดได้หลายภาษา
รายการแปลในหน้าเดียว
ตัวเลือกภาษา (ไปที่หน้าหรือหน้าแรกที่เกี่ยวข้อง)
ผู้แต่งหลายคน
สารบัญ (พับได้ สร้างเมื่อมีให้เท่านั้น)
วันที่แก้ไขในหน้าแรก หน้าเดียว หน้าส่วน และหน้าภาคเรียน
รูปแบบวันที่ที่กำหนดเอง
การแบ่งหน้าในหน้าแรกและหน้าส่วน
RSS ข้อความแบบเต็ม
แท็กและหมวดหมู่
ประกาศเกี่ยวกับลิขสิทธิ์ (สามารถตั้งค่าผู้แต่งและช่วงปีได้)
ลิงค์อาร์เอส
ลิงก์จุดยึดส่วนหัว
มือถือเป็นหลักและตอบสนอง
สสส
การเพิ่มประสิทธิภาพกลไกค้นหา
ไมโครดาต้า
คำอธิบายเมตา
เปิดกราฟ
จำนวนหน้าต่อส่วน ( /posts/ , /tags/ ฯลฯ)
การปรับแต่ง
ฟาวิคอน
สไตล์ (SCSS)
เนื้อหา (HTML)
หากต้องการดูฟีเจอร์ทั้งหมด ให้ตรวจสอบ Hugo.yaml (การกำหนดค่าเริ่มต้น) และ exampleSite/hugo.yaml (การกำหนดค่าของไซต์สาธิต)
ติดตั้ง Git และส่วนขยาย Hugo ล่าสุด
# สร้าง websitegit เริ่มต้น my-websitecd my-website# ติดตั้ง themegit submodule เพิ่ม --ความลึก=1 https://github.com/CyrusYip/hugo-theme-yue ธีม/hugo-theme-yue git commit --message "เพิ่มธีม"# สร้างเนื้อหาสาธิต cp --recursive theme/hugo-theme-yue/exampleSite/* .# เซิร์ฟเวอร์ Previewhugo
ตอนนี้เรามีเว็บไซต์สาธิตที่ใช้งานได้แล้ว ไดเร็กทอรี content ประกอบด้วยเนื้อหา และ hugo.yaml เป็นไฟล์คอนฟิกูเรชัน รู้สึกอิสระที่จะเล่นกับพวกเขา
ซีดีเว็บไซต์ของฉัน อัปเดตโมดูลย่อย git --remote
ขอแนะนำให้อ่าน CHANGELOG.md ก่อนที่จะอัปเดตธีม
คุณสามารถสมัครรับข้อมูลอัปเดตและบันทึกการเปลี่ยนแปลงในตัวรวบรวมฟีด (เช่น Inoreader)
อัปเดต: https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
บันทึกการเปลี่ยนแปลง: https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
คุณต้องใช้ตัวเลือกเพิ่มเติมเมื่อคุณโคลนโครงการเว็บไซต์ของคุณ
git clone --recurse-submodules --shallow-submodules [email protected]:ชื่อผู้ใช้ของคุณ/my-website.git
หลังจากตั้งค่าเว็บไซต์แล้ว คุณอาจต้องการโฮสต์เว็บไซต์บนอินเทอร์เน็ต มีหลายวิธีในการดำเนินการ โปรดดูที่การโฮสต์และการปรับใช้ | ฮิวโก้. หากคุณไม่รู้ว่าจะเลือกอะไร คุณสามารถเริ่มจาก Netlify ดูที่โฮสต์บน Netlify | ฮิวโก้.
ตรวจสอบให้แน่ใจว่าคุณเปลี่ยน baseURL เป็นชื่อโดเมนของคุณ (เช่น https://my-cool-domain.org/ ) ใน hugo.yaml
-baseURL: https://yue.cyrusyip.org/+baseURL: https://my-cool-domain.org/
คำสั่ง build ที่แนะนำ:
ฮิวโก้ --gc --ลดขนาด
--gc ลบไฟล์แคชที่ไม่ได้ใช้ และ --minify ลดขนาด ลดขนาดของเว็บไซต์ (ส่วนใหญ่เป็น HTML)
สร้างโพสต์ใหม่
hugo new content content/en/posts/my-first-post.md
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการใช้งาน โปรดดูที่:
การใช้งานขั้นพื้นฐาน | ฮิวโก้
โครงสร้างไดเรกทอรี | ฮิวโก้
การตั้งค่าแสดงอยู่ใน exampleSite/hugo.yaml (การกำหนดค่าของไซต์สาธิต) และ Hugo.yaml (การกำหนดค่าเริ่มต้น นำเข้าโดยเวอร์ชันแรก)
ในรูทของโปรเจ็กต์เว็บไซต์ของคุณ hugo.yaml คือไฟล์กำหนดค่า ซึ่งเป็นสำเนาของ exampleSite/hugo.yaml
หากต้องการเรียนรู้การกำหนดค่า โปรดดูกำหนดค่า Hugo | ฮิวโก้.
ภาษาที่รองรับ:
th : en
fr : ฝรั่งเศส
zh-CN : จีนตัวย่อ
หากต้องการสร้างเว็บไซต์หลายภาษา โปรดดูโหมดหลายภาษา | Hugo และ exampleSite/hugo.yaml
ไฟล์การแปลจะอยู่ในไดเร็กทอรี i18n และ data/i18n.yaml ยินดีสนับสนุนภาษาเพิ่มเติม
เพื่อสนับสนุนภาษาใหม่:
สร้างไฟล์ภาษา (เช่น fr.yaml สำหรับภาษาฝรั่งเศส) ในไดเร็กทอรี i18n
คัดลอกเนื้อหาของ i18n/en.yaml ลงในไฟล์ใหม่
ลบความคิดเห็นทั้งหมด ( # ... ) และแปลเนื้อหา
แปลเนื้อหาใน data/i18n.yaml เช่นกัน
หากคุณต้องการมีส่วนร่วมในการแปลต่อไป คุณสามารถรับการเปลี่ยนแปลงล่าสุดได้โดยสมัครรับฟีดของ i18n/en.yaml (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml .atom) โดยใช้โปรแกรมอ่าน RSS
หากเว็บไซต์ของคุณไม่ใช่ภาษาอังกฤษ คุณอาจต้องการปรับแต่งชื่อเรื่องของ /tags และ /categories
ตัวอย่างเช่น หากต้องการปรับแต่งชื่อ /tags ของเว็บไซต์ zh-CN ให้สร้าง content/zh-CN/tags/_index.md และเพิ่มเนื้อหาต่อไปนี้ลงในไฟล์
--- title: Chinese Tags ---
Yue ช่วยให้คุณปรับแต่ง favicon, สไตล์ (SCSS) และเนื้อหา (HTML)
Favicon คือไอคอนข้างชื่อในแท็บเบราว์เซอร์ หากต้องการใช้ favicon ให้ใส่ favicon.ico ไว้ใต้ไดเร็กทอรี static คุณสามารถสร้าง favicon.ico บนเครื่องกำเนิดไฟฟ้า favicon.ico ออนไลน์
Yue ใช้ SCSS (libsass) เพื่อเพิ่มสไตล์ ไฟล์ทั้งหมดอยู่ใน Assets/scss หากต้องการปรับแต่งสไตล์ ให้สร้าง assets/scss/_style-start.scss และ assets/scss/_style-end.scss
_style-start.scss จะถูกนำไปใช้ก่อน และคุณสามารถแทนที่ตัวแปรในไฟล์นี้ได้
$base-font-size: 15px;
_style-end.scss จะถูกนำไปใช้ครั้งสุดท้าย และคุณสามารถเพิ่มสไตล์ในไฟล์นี้ได้
Vanilla CSS ก็ใช้ได้ใน SCSS เช่นกัน
อ้างอิง:
CSS: Cascading Style Sheets | เอ็มดีเอ็น
Sass: พื้นฐาน Sass
โครงสร้างไดเรกทอรี | ฮิวโก้
คุณสามารถสร้างไฟล์เหล่านี้เพื่อแทรกโค้ด HTML
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.html ถูกเพิ่มใกล้กับจุดเริ่มต้นขององค์ประกอบ <head>
กรณีการใช้งาน:
โหลดสคริปต์ล่วงหน้า
โหลดสคริปต์
โหลดสไตล์
นี่คือตัวอย่างของการโหลดสคริปต์ล่วงหน้า:
<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2"><link rel="preload" as="script" href="https: //unpkg.com/@swup/preload-plugin@3"><link rel="preload" as="script" href="https://unpkg.com/swup@4">
head-end.html ถูกเพิ่มที่ส่วนท้ายขององค์ประกอบ <head>
กรณีการใช้งาน:
โหลดสคริปต์
โหลดสไตล์
นี่คือตัวอย่างการเพิ่ม Google Analytics และสคริปต์ท้องถิ่น:
<!-- Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-F46B15BRUF"></script><script> window.dataLayer = window.dataLayer || - ฟังก์ชั่น gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-F46B15BRUF');</script><!-- สคริปต์ในเครื่อง, เส้นทาง: Assets/js/my-script.js -->{{ พร้อมทรัพยากรรับ "js/my-script .js" | js.Build }} <script เลื่อน src="{{ .RelPermalink }}"></script>{{ end }} single-end.html ถูกเพิ่มที่ส่วนท้ายขององค์ประกอบ <main> ในโพสต์
กรณีการใช้งาน:
บริการแสดงความคิดเห็น เช่น Disqus และ giscus
นี่คือตัวอย่างของการเพิ่ม Giscus:
{{ $ ภาษา := "" }}
-
วิธีแก้ปัญหาสำหรับ LanguagePrefix ตัวพิมพ์เล็ก
ดูhttps://github.com/gohugoio/hugo/issues/9404
-
{{ ถ้า eq site.LanguagePrefix "/zh-cn" }}
{{ $ภาษา = "zh-CN" }}
{{ อื่น }}
{{ $ภาษา = "th" }}
{{ สิ้นสุด }}<script src="https://giscus.app/client.js" data-repo="CyrusYip/yue-test" data-repo-id="P_9hJMbXtqr" data-category="General" data -category-id="SIB_ldsflk712ldRsjf7" data-mapping="pathname" data-strict="0" data-reactions-enabled = "1" data-emit-metadata = "0" data-input-position = "ด้านล่าง" data-theme = "preferred_color_scheme" data-lang = "{{ $ ภาษา }}" crossorigin = "ไม่ระบุชื่อ " อะซิงโครนัส></สคริปต์>รายการบริการแสดงความคิดเห็น: ความคิดเห็น | ฮิวโก้.
เพิ่ม body-end.html ต่อท้ายองค์ประกอบ <body>
กรณีการใช้งาน:
โหลดสคริปต์แบบไดนามิก
หากต้องการรายงานข้อบกพร่อง ให้ส่งปัญหา หากต้องการถามคำถาม ให้เริ่มการสนทนา
Hugo มีคุณสมบัติมากมาย อ่านเอกสาร Hugo เพื่อเรียนรู้
ดู CHANGELOG.md
โปรเจ็กต์นี้ใช้ Hugo-bin - npm ในการจัดการเวอร์ชัน Hugo วิชาบังคับก่อน: Node.js และ npm
โคลนที่เก็บนี้
ติดตั้ง npm npm ทำงาน clean:server:shared
มีคำสั่งที่มีประโยชน์อื่นๆ อยู่ใน package.json หากต้องการใช้เวอร์ชัน Hugo ที่แนะนำ ให้รัน npx hugo
หากคุณไม่ได้ติดตั้ง Node.js และ npm เพียงติดตั้งเวอร์ชันที่แสดงอยู่ใน package.json
"hugo-bin": { "buildTags": "ขยาย", "เวอร์ชัน": "x.yyy.z"},CHANGELOG.md ควรได้รับการอัปเดตในแต่ละคอมมิต
หากคุณใช้ Yue และซอร์สโค้ดของเว็บไซต์ของคุณโฮสต์บน GitHub คุณสามารถเพิ่มหัวข้อ hugo-theme-yue ไปยังพื้นที่เก็บข้อมูลของคุณได้
ลิงก์ไปยังหัวข้อ hugo-theme-yue
ฉันได้เรียนรู้มากมายจากหลายโครงการ ขอบคุณนักพัฒนา
Hugo-xmin (เทมเพลตขั้นต่ำ)
Hugo-theme-jane (เทมเพลต RSS)
Hugo-theme-zen (ตัวเลือกภาษา)
Hugo-theme-gruvbox (สี)
gruvbox (สี)
Hugo-theme-stack (ซอร์สโค้ด เอกสาร และการกำหนดค่า)
Hugo-PaperMod (ซอร์สโค้ด เอกสาร และการกำหนดค่า)
โครงการนี้ได้รับอนุญาตภายใต้ MIT
