hugo dream plus
Yume
ชุดรูปแบบนี้เป็น The Dream Theme เวอร์ชันอัพเกรดโดย Yue Yang และมีคุณสมบัติใหม่มากมายเช่น:
ชุดรูปแบบนี้สามารถใช้สำหรับสองวัตถุประสงค์:
โครงการนี้ปฏิบัติตามจรรยาบรรณผู้สนับสนุน โดยการเข้าร่วมคุณคาดว่าจะสนับสนุนรหัสนี้ โปรดรายงานพฤติกรรมที่ยอมรับไม่ได้ที่ [email protected]
การติดตั้ง
เริ่มต้น
เอกสาร
เกือบเสร็จแล้ว
การบริจาค
ใบอนุญาต
ธีมสามารถติดตั้งได้โดยเรียกใช้คำสั่งต่อไปนี้ภายในโฟลเดอร์ Hugo เว็บไซต์ ของคุณ
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveเมื่อมีการติดตั้งธีมเรียบร้อยแล้วคุณจะต้องปรับแต่งธีมเพื่อให้ได้รสนิยมของคุณ
ภายในโฟลเดอร์ exampleSite คุณจะพบไฟล์ config, cards.toml และ posts.toml ซึ่งสามารถใช้ในการปรับแต่งธีม
คุณต้องใช้ไฟล์กำหนดค่าเหล่านี้เป็นพื้นฐานสำหรับเว็บไซต์ของคุณเนื่องจากพวกเขา ดูแลการประกาศตัวแปรที่จำเป็น ซึ่งคุณสามารถแก้ไขได้ตามความต้องการของคุณ
กำหนดตัวเองผ่านตัวแปรกำหนดค่าต่อไปนี้ใน params ภายใต้ตาราง author ดังที่แสดง:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "หลังจากนั้นให้เติมตัวแปรโซเชียลในตอนท้ายของไฟล์กำหนดค่า ชุดรูปแบบนี้ช่วยเสริมเว็บไซต์โซเชียลต่อไปนี้: (ตัวอย่างได้รับ)
| ลิงค์สังคม | ตัวแปร | ตัวอย่างการเริ่มต้น |
|---|---|---|
| คนอื่น ๆ | คนอื่น ๆ | github = "username" |
| อีเมล | อีเมล | email = "[email protected]" |
twitter = "username" | ||
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| ปานกลาง | ปานกลาง | medium = "username" |
linkedin = "username" | ||
| stackoverflow | stackoverflow | stackoverflow = "number/username" |
| codepen | codepen | codepen = "username" |
| สีแดง | สีแดง | reddit = "username" |
ตัวแปรเหล่านี้จะต้องอยู่ในตาราง [social] ของ config.toml หรือเทียบเท่ากับ YAML หรือ JSON
[ social ]
github = " UtkarshVerma "เมื่อทำสิ่งนี้เสร็จแล้วให้เขียนส่วน " เกี่ยวกับฉัน " ของเว็บไซต์ของคุณใน Markdown ตามคำแนะนำที่นี่: ข้อผิดพลาดและเกี่ยวกับหน้า
ตามที่ระบุไว้ก่อนหน้านี้ชุดรูปแบบนี้มีสองมุมมอง มุมมองการ์ด และ มุมมองโพสต์ ประเภทของการแสดงผลมุมมองขึ้นอยู่กับประเภทของเนื้อหาที่คุณป้อนเพื่อ Dream Plus ดังนั้น:
cards ใน /content เปิดใช้งาน มุมมองการ์ดposts ใน /content เปิดใช้งานการ โพสต์มุมมองตัวแปร
contentTypeตอนนี้เลิกใช้แล้ว
ความแตกต่างที่ชัดเจนระหว่างมุมมองทั้งสองคือมุมมอง การ์ด ไม่รองรับโพสต์แทนที่จะเปลี่ยนเส้นทางไปยังลิงก์ที่ระบุในขณะที่ Post View ทำ คุณสามารถทดสอบพวกเขาด้วยตนเองโดยไปที่เว็บไซต์ของฉัน (ระบุไว้ด้านบน) ซึ่งใช้พวกเขา นอกจากนี้การสร้างโพสต์/การ์ดจะทำแตกต่างกันไปทั้งสองมุมมอง มันเป็นดังนี้:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationหลังจากนี้เพียงเปิดการ์ด/โพสต์ Markdown ของคุณและให้พารามิเตอร์สำหรับการ์ด/โพสต์
มีสองวิธีที่แตกต่างกันในการกำหนดค่าพื้นหลังของธีมนี้ การตั้งค่าเหล่านี้มีความพิเศษร่วมกัน
ในการตั้งค่าสีพื้นหลังเฉพาะให้ทำผ่านตัวแปร color หากคุณต้องการตั้งค่าการผสมผสานสีแบบสุ่มเป็นพื้นหลังของคุณแทนเพียงแค่ปล่อยให้ตัวแปรสี UNSET
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent ระบุภาพที่คุณต้องการตั้งค่าเป็นพื้นหลังผ่านอาร์เรย์ images หากคุณต้องการพื้นหลังภาพเดียวให้ให้ค่าเดียวกับอาร์เรย์ ตัวอย่างเช่น:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background การจัดหาภาพหลายภาพให้กับอาร์เรย์ images ช่วยให้คุณลักษณะพื้นหลังภาพแบบสุ่มของ Dream Plus ซึ่งจะวนรอบพื้นหลังภายในอาร์เรย์ที่กำหนดทุกครั้งที่มีการโหลดซ้ำ คุณอาจเบลอพื้นหลังในระดับหนึ่งผ่านตัวแปร blur
ตัวแปรการกำหนดค่าพื้นหลังทั้งหมดจะถูกวางไว้ภายในตาราง
backroundภายใต้params
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "หน้าปกสำหรับแต่ละการ์ดหรือการ์ดจะถูกประมวลผลโดย Dream Plus โดยใช้การประมวลผลภาพ Hugo สำหรับเวลาในการโหลดเว็บไซต์ที่เร็วขึ้น พา ธ การค้นหาสำหรับไฟล์หน้าปกตามที่ระบุไว้ด้านล่าง:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
การระบุภาพหน้าปกผ่าน frontmatter ได้ถูกเลิกใช้แล้ว- ฝาครอบการ์ดสามารถกำหนดได้ในขณะนี้ผ่าน frontmatter ผ่านคีย์coverอย่างไรก็ตามการประมวลผลภาพจะไม่สามารถใช้ได้กับปกดังกล่าว นอกจากนี้ ฝาครอบด้านหน้าจะถูกจัดลำดับความสำคัญเหนือทรัพยากรภาพ ดังนั้นเพื่อให้ทรัพยากรภาพครอบคลุมการแสดงผลคุณจะต้องลบคีย์ฝาครอบออกจาก frontmatter ก่อน
นอกจากนี้คุณยังสามารถแก้ไขกระบวนการประมวลผลภาพผ่านตัวแปร coverArgs ใน [params.features] ข้อโต้แย้งที่ผ่านจะต้องใช้สำหรับฟังก์ชั่น .Resize เนื่องจากนั่นคือสิ่งที่ Dream Plus ใช้ประโยชน์ ตัวอย่างเช่น,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image คุณสามารถกำหนดค่าเว็บไซต์ของคุณตามอุปกรณ์ไคลเอนต์โดยใช้ตัวแปร isMobile JS มันเป็น true เมื่ออุปกรณ์ไคลเอนต์เป็นมือถือและในทางกลับกัน
ชุดรูปแบบนี้รองรับการปรับแต่งทั้งหมดของหน้า เกี่ยวกับ และ ข้อผิดพลาด หน้าเหล่านี้อาจถูกปรับแต่งผ่านไฟล์ about.md และ 404.md Dream Plus อ่านไฟล์ที่ระบุไว้ข้างต้นเป็นข้อความ markdown ธรรมดา แล้วแสดงผล เมื่อคุณเขียนไฟล์เสร็จแล้วและแก้ไขตามความต้องการของคุณแล้วให้วางไว้ในโฟลเดอร์ content ของไซต์ Hugo ของคุณ หากคุณไม่ต้องการให้หน้าเหล่านี้ถูกสร้างขึ้นโดย Hugo และเสิร์ฟพร้อมลิงก์ของตัวเองเช่น <website>.<domain>/about หรือ <website>.<domain>/404 จากนั้นคุณสามารถบอกให้ Hugo ละเว้นสิ่งเหล่านี้ผ่านตัวแปร ignoreFiles เพิกเฉยในไฟล์ config.toml ของคุณดังนี้:
ignoreFiles = [ " content/404.md " , " content/about.md " ] คุณสามารถตั้งค่า favicon ที่กำหนดเองสำหรับเว็บไซต์ของคุณผ่านตัวแปร favicon config ภายใต้ params ตัวอย่างเช่น,
[params]
favicon = "/images/defaultFav.ico"
สคริปต์เว็บไซต์ Shorte.st ได้ถูกนำไปใช้ในชุดรูปแบบนี้ ในการใช้งานคุณจะต้องกำหนดค่าผ่านตาราง shortest ภายใต้ params
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define หากคุณต้องการควบคุมจำนวนโพสต์/การ์ดที่หน้ามีคุณสามารถทำได้โดยใช้ตัวแปรการกำหนดค่า paginate
paginate = 4 # Defaults to 10 นอกจากนี้แท็กเมื่อเปิดใช้งานจะไม่แสดงบนส่วนหัวและแถบด้านข้างโดยค่าเริ่มต้น เฉพาะแท็ก 8 อันดับแรก (บทความที่มีความรู้) จะปรากฏขึ้นที่นั่นเพื่อหลีกเลี่ยงความแออัด อย่างไรก็ตามมันสามารถ overriden โดยใช้ตัวแปร tagLimit ของตาราง [params.tag]
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsมีการกำหนดค่าเล็กน้อยอื่น ๆ เช่นกัน คุณสามารถตั้งค่าได้โดยอ้างถึงความคิดเห็นภายในไฟล์กำหนดค่า
เอกสารสำหรับที่เก็บนี้อยู่ระหว่างการทำงานและถูกเพิ่มเข้าไปในวิกิของที่เก็บนี้ การบริจาคของวิกิยินดีต้อนรับมากที่สุด อย่าลังเลที่จะถามฉันเกี่ยวกับคุณสมบัติของธีมนี้สำหรับสิ่งนั้น
หลังจากเสร็จสิ้นการกำหนดค่าคุณก็พร้อมที่จะไป ดังนั้นทดสอบเว็บไซต์ของคุณโดยใช้:
hugo serverเว็บไซต์ของคุณควรมีอยู่ในท้องถิ่นที่ http: // localhost: 1313 เพื่อการทดสอบ
สำหรับการทดสอบไซต์ตัวอย่างคุณจะต้องระบุไฟล์กำหนดค่าให้กับ Hugo อย่างชัดเจน สิ่งนี้ทำดังนี้:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlพบสิ่งที่น่าสนใจที่จะเพิ่มเข้าไปในธีมนี้หรือเป็นข้อผิดพลาด? แจ้งให้เราทราบเกี่ยวกับเรื่องนี้ผ่านการติดตามปัญหา คำขอดึงยังยินดีต้อนรับ สำหรับคำแนะนำโดยละเอียดเพิ่มเติมเกี่ยวกับวิธีการมีส่วนร่วมอ้างอิงถึง การสนับสนุน
ชุดรูปแบบนี้เปิดตัวภายใต้ใบอนุญาต MIT
