portfolio starter
1.0.0
นี่คือพอร์ตสตาร์เทอร์ที่มีน้ำหนักเบาที่สร้างขึ้นด้วยความสูง มันมุ่งเน้นไปที่นักออกแบบนักวาดภาพประกอบสถาปนิกและบุคคลอื่น ๆ ที่สนใจแบ่งปันงานและกิจกรรมของพวกเขา
ผู้ใช้ที่ตั้งใจอาจไม่ทราบวิธีการเขียนโค้ด แต่มีความสนใจในเทคโนโลยีที่อยู่เบื้องหลังเว็บไซต์ของพวกเขายินดีที่จะเขียนใน Markdown และยินดีที่จะติดตามพร้อมกับเอกสารนี้
เยี่ยมชมพอร์ตโฟลิโอสตาร์เทอร์. sb-ph.com เพื่อตรวจสอบ เนื้อหาและรหัสในที่เก็บนี้เป็นตัวขับเคลื่อนเว็บไซต์สาธิต
“ No-Code” เป็นผู้เรียกชื่อผิด เล็กน้อย ไฟล์เนื้อหาของคุณเขียนด้วยเทคนิคในรหัส แต่เป็นไวยากรณ์ที่อ่านได้มากที่เรียกว่า Markdown (เพิ่มเติมในภายหลัง) สิ่งที่เราหมายถึงโดย“ No-Code” คือคุณไม่ต้องแตะบรรทัดคำสั่ง Git หรือเปิดรหัสตัวแก้ไขบนคอมพิวเตอร์ของคุณ
GitHub เป็นแพลตฟอร์มที่เก็บรหัส รหัสเว็บไซต์และเนื้อหาของคุณกำลังจะอยู่บน GitHub หากคุณมีบัญชีอยู่แล้วให้เข้าสู่ระบบหากไม่ได้ลงทะเบียนสำหรับบัญชี บัญชีบุคคลฟรีเพียงพอแล้ว
Netlify และ Zeit เป็นโฮสติ้งผู้ให้บริการที่เสนอระดับฟรีสำหรับผู้ที่มีเว็บไซต์คงที่เช่นนี้ Netlify อาจเป็นเรื่องที่ตรงไปตรงมา เล็กน้อย สำหรับขั้นตอนต่อไปนี้และดูเหมือนว่าจะใช้โดยผู้ใช้ที่มีความสูงมากขึ้น แต่เป็นทั้งแพลตฟอร์มที่แข็งแกร่ง หากคุณมีบัญชีที่มีแพลตฟอร์มเหล่านี้อยู่แล้วให้เข้าสู่ระบบหากคุณไม่ลงทะเบียน
ด้วยการคลิกที่หนึ่งในปุ่มด้านล่างคุณจะโคลนที่เก็บนี้ (เช่นสร้างเวอร์ชันที่ซ้ำกันซึ่งอาศัยอยู่ในบัญชี GitHub ของคุณเอง) จากนั้นปรับใช้เว็บไซต์ใหม่นี้ไปยังโฮสติ้งแบบคงที่ของคุณ
ก่อนที่จะดำเนินการตัดสินใจชื่อที่เก็บข้อมูลของคุณ มันควรจะเป็นสิ่งที่คล้ายกับชื่อเว็บไซต์ของคุณ แต่ควรรวมถึงตัวอักษรตัวพิมพ์เล็กตัวเลขและขีดกลางเท่านั้น ตัวอย่างเช่นชื่อของที่เก็บนี้คือ portfolio-starter
หากคุณมีบัญชี netlify คลิกปุ่มนี้และทำตามคำแนะนำง่าย ๆ ของ NetLify เพื่อเชื่อมต่อ NetLify และ GitHub:
หากคุณมีบัญชี Zeit คลิกปุ่มด้านล่างจากนั้นทำตามคำแนะนำของ Zeit:
คำแนะนำของ Zeit จะนำคุณผ่านวิธีการติดตั้ง Zeit สำหรับ GitHub เพื่อให้สามารถสร้างที่เก็บสำหรับคุณและสามารถปรับใช้การเปลี่ยนแปลงของคุณ ให้สิทธิ์แก่ที่เก็บทั้งหมดเมื่อติดตั้ง Zeit ตอนนี้ Zeit ควรตรวจจับโดยอัตโนมัติว่าคุณกำลังใช้ ElevTues กับการตั้งค่าดังนี้ (คุณไม่จำเป็นต้องกังวลเกี่ยวกับคำสั่งการพัฒนา):
คำสั่ง build: npx @11ty/eleventy output directory: _site
เมื่อคุณทำตามคำแนะนำข้างต้นสำหรับ Netlify หรือ Zeit เสร็จแล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังแผงควบคุมเว็บไซต์ของคุณ สิ่งนี้จะแสดงโดเมนย่อยเริ่มต้นของคุณและข้อมูลสำคัญอื่น ๆ เกี่ยวกับเว็บไซต์ของคุณ นอกจากนี้คุณยังจะได้รับอีเมลแจ้งให้คุณทราบว่ามีการเชื่อมต่อบริการ
Zeit ช่วยให้คุณสามารถเลือกการมองเห็นที่เก็บข้อมูลของคุณเมื่อคุณตั้งค่า ในทางกลับกัน Netlify จะสร้างที่เก็บสาธารณะโดยอัตโนมัติ ดูเอกสาร GitHub หากคุณต้องการปรับการมองเห็นที่เก็บข้อมูลของคุณ
ในการแก้ไขหรือเพิ่มเนื้อหาโดยไม่มีบรรทัดคำสั่งคุณต้องใช้อินเทอร์เฟซของ GitHub เพื่อนำทางไฟล์ของคุณภายในโฟลเดอร์ /content ในที่เก็บของคุณ ดูการอ้างอิงเนื้อหาเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับโครงสร้างของโฟลเดอร์ /content และแต่ละไฟล์ภายในโดยเฉพาะไฟล์ข้อมูลส่วนกลางที่มีชื่อเว็บไซต์และ URL ของคุณ
ในการแก้ไขหรือลบไฟล์ที่มีอยู่คุณต้องเปิดไฟล์ที่เกี่ยวข้องใน GitHub จากนั้นคลิกปุ่มแก้ไข (ปุ่มด้วยไอคอนดินสอ) หรือปุ่มลบ (ปุ่มด้วยถังขยะ) ที่มุมบนขวาเหนือเนื้อหาหน้า
หากคุณต้องการเพิ่มหน้าใหม่คุณต้องนำทางไปยัง posts projects หรือโฟลเดอร์ pages ขึ้นอยู่กับสิ่งที่คุณต้องการเพิ่มแล้วคลิกปุ่ม“ สร้างไฟล์ใหม่” ใกล้กับด้านบนของหน้า สิ่งนี้จะเปิดหน้าตัวแก้ไขใหม่ซึ่งคุณสามารถเพิ่มชื่อไฟล์และไฟล์ไฟล์ เนื่องจากเนื้อหาข้อความทั้งหมดถูกเขียนด้วย markdown ชื่อไฟล์จะต้องสิ้นสุดใน md (เช่น my-post-name.md )
หากคุณต้องการเพิ่มสื่อคุณต้องนำทางไปยังโฟลเดอร์ media แล้วคลิกปุ่ม“ อัปโหลดไฟล์” ใกล้กับด้านบนของหน้า สิ่งนี้จะทำให้คุณมีพื้นที่ในการอัปโหลดไฟล์หนึ่งไฟล์ขึ้นไป ดูคำแนะนำสื่อสำหรับเคล็ดลับเกี่ยวกับประเภทไฟล์และขนาด
ในการบันทึกการแก้ไขหรือเพิ่มเติมที่ทำใน GitHub คุณต้องทำการเปลี่ยนแปลงโดยใช้อินเทอร์เฟซของ GitHub ที่ฐานของหน้า หากคุณเชื่อมต่อ Netlify หรือ Zeit ในขั้นตอนก่อนหน้าการกระทำจะบอกให้ GitHub ปรับใช้การเปลี่ยนแปลงของคุณโดยอัตโนมัติ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่กระทำคือดูอภิธานศัพท์ GitHub เมื่อคุณทำการแก้ไขหรือเพิ่มโดยตรงใน GitHub คุณสามารถใช้ข้อความการกระทำเริ่มต้นที่เต็มไปด้วยการเติมก่อนและควรส่งไปยังสาขา master โดยตรง (การตั้งค่าเริ่มต้น)
คำแนะนำการตั้งค่าบรรทัดคำสั่งสมมติว่าคุณมีความคุ้นเคยกับบรรทัดคำสั่งว่าคุณมีเวอร์ชัน 8 หรือสูงกว่าของ node.js ที่ติดตั้งบนคอมพิวเตอร์ของคุณและคุณมีบัญชี GitHub
ที่เก็บโคลนในพื้นที่เป็นโฟลเดอร์โครงการที่มีชื่อโดยเรียกใช้ git clone https://github.com/sb-ph/portfolio-starter.git my-website แล้วเปลี่ยนเป็นโฟลเดอร์โครงการใหม่โดยเรียกใช้ cd my-website เรียกใช้ npm install เพื่อติดตั้งการพึ่งพารวมถึงความสูง
เรียกใช้ rm -rf .git เพื่อลบประวัติ Git สำหรับการเริ่มต้นใหม่จากนั้นเรียกใช้ git init เพื่อเริ่มต้นการซื้อใหม่ GIT ใหม่ ส่งไฟล์ทั้งหมดของคุณเพื่อสร้างสาขา master ใหม่จากนั้นเพิ่มโครงการของคุณลงใน GitHub โดยใช้บรรทัดคำสั่ง
ในการสร้างเว็บไซต์ในไดเรกทอรี gitignored /_site ให้เรียกใช้ npx @11ty/eleventy หากต้องการหมุนเซิร์ฟเวอร์สำหรับการพัฒนาในท้องถิ่นหรือการแก้ไขเนื้อหาให้เรียกใช้ npx @11ty/eleventy --serve สิ่งนี้จะทำให้เว็บไซต์ของคุณพร้อมใช้งานที่ http: // localhost: 8080 และเว็บไซต์จะโหลดซ้ำโดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลงใด ๆ
หากคุณต้องการใช้ netlify หรือ Zeit ให้ทำตามเอกสารของพวกเขาเพื่อให้ที่เก็บของคุณเชื่อมต่อกับบัญชีโฮสติ้งของคุณเพื่อการปรับใช้อย่างต่อเนื่อง หากคุณต้องการใช้ผู้ให้บริการโฮสติ้งรายอื่นคุณสามารถค้นหาไฟล์คงที่ของคุณในไดเรกทอรี /_site หลังจากที่คุณสร้างงานสร้าง
ในการแก้ไขเนื้อหาในเครื่องให้หมุนเซิร์ฟเวอร์โดยเรียกใช้ npx @11ty/eleventy --serve บริการจากนั้นปรับไฟล์ Markdown และ JSON ภายในไดเรกทอรี /content หากไซต์ของคุณถูกเชื่อมต่อกับการปรับใช้อย่างต่อเนื่องตรวจสอบให้แน่ใจว่าคุณได้ทำการเปลี่ยนแปลงในสาขาที่เหมาะสม (อาจเป็น master ) มิฉะนั้นพวกเขาจะไม่ถูกปรับใช้
Netlify และ Zeit ให้โดเมนย่อยเริ่มต้นโดยอัตโนมัติเมื่อคุณปรับใช้เว็บไซต์ของคุณดังนั้นนี่เป็นขั้นตอนเสริม หากคุณต้องการใช้โดเมนของคุณเองคุณควรทำตามคำแนะนำของพวกเขาเพื่อตั้งค่านี้ อ่านเพิ่มเติมเกี่ยวกับโดเมนที่กำหนดเองเกี่ยวกับ Zeit หรืออ่านเพิ่มเติมเกี่ยวกับโดเมนที่กำหนดเองบน NetLify
คู่มือทั้งสองนี้จะนำคุณผ่านวิธีการตั้งค่าระบบชื่อโดเมนของโดเมน (DNS) โปรดทราบว่า DNS นั้นละเอียดอ่อน บันทึก DNS สำหรับเบราว์เซอร์ DOMAN ของคุณที่จะค้นหาเว็บไซต์ของคุณและบอกเซิร์ฟเวอร์อีเมลถึงวิธีส่งอีเมลถึงคุณ ให้แน่ใจว่าได้จดบันทึก DNS ที่มีอยู่ก่อนที่จะเปลี่ยนสิ่งใด
หากคุณกำหนดชื่อ Nameservers เป็นส่วนหนึ่งของกระบวนการตั้งค่าโดเมนที่กำหนดเองและใช้โดเมนของคุณสำหรับอีเมลอยู่แล้วคุณต้องเพิ่มระเบียน MX ของคุณและระเบียนอื่น ๆ ที่เกี่ยวข้องกับอีเมลไป ยัง ผู้ให้บริการโฮสต์รายใหม่ของคุณ หากคุณไม่ทำอีเมลของคุณอาจลดลง
หากคุณอยู่ในรุ่นเก่าของพอร์ตโฟลิโอเริ่มต้นและต้องการอัปเดตเป็นเวอร์ชันที่ใหม่กว่าเราขอแนะนำให้ทำสิ่งนี้ด้วยตนเองโดยแทนที่โฟลเดอร์และไฟล์ทั้งหมด ยกเว้น โฟลเดอร์ /content คุณควรสำรองเว็บไซต์ของคุณก่อนทำการอัปเดตหรือการเปลี่ยนแปลงที่สำคัญ เยี่ยมชมโฮมเพจที่เก็บของของคุณและคลิกปุ่ม“ โคลนหรือดาวน์โหลด” สีเขียวเพื่อดาวน์โหลดไฟล์ซิปของที่เก็บทั้งหมดจากนั้นเก็บไว้ที่ใดที่ปลอดภัย
เนื้อหาทั้งหมดอาศัยอยู่ในโฟลเดอร์ /content โดยค่าเริ่มต้นพอร์ตโฟลิโอเริ่มต้นด้วยเนื้อหาที่ใช้ในเว็บไซต์สาธิต
เนื้อหารวมถึงข้อมูลส่วนกลางไฟล์ Markdown สำหรับแต่ละหน้าและสื่อ มันเป็นสิ่งสำคัญในการจัดรูปแบบและจัดระเบียบไฟล์เหล่านี้แต่ละไฟล์ด้วยวิธีใดวิธีหนึ่งเพื่อให้เว็บไซต์ของคุณปรับใช้โดยไม่มีข้อผิดพลาดและดูตามที่คาดไว้
ข้อมูลเมตาบางอย่างเช่นชื่อไซต์และ URL ใช้ทั่วทั้งเว็บไซต์ ข้อมูลทั่วโลกทั้งหมดนี้มีอยู่ในไฟล์ /content/_data/global.json
รายละเอียดในไฟล์นี้ควรตั้งค่าเมื่อมีการตั้งค่าเว็บไซต์เป็นครั้งแรกและน่าจะไม่ได้รับการสัมผัสอีกครั้งเว้นแต่ว่าเว็บไซต์จะถูกย้ายหรือการเปลี่ยนแปลงของโดเมน นี่คือตัวอย่างของไฟล์ global.json :
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
} นี่เป็นเนื้อหาชิ้นเดียวที่ต้องเขียนใน JSON ซึ่งเป็นรูปแบบข้อความที่ใช้ในการจัดโครงสร้างข้อมูล ไวยากรณ์ JSON เข้มงวด มาก คีย์ทั้งหมด (เช่น title ) และสตริงทั้งหมด (เช่น My website ) อยู่ในคำคมสองเท่าและคุณสมบัติทั้งหมด (เช่น "title": "My website" ) ถูกคั่นด้วยเครื่องหมายจุลภาคยกเว้นคุณสมบัติสุดท้าย วัตถุ JSON ทั้งหมดถูกล้อมรอบในวงเล็บหยิก {} ไวยากรณ์ที่ไม่ถูกต้องในไฟล์นี้จะส่งผลให้เกิดข้อผิดพลาดซึ่งหมายความว่าการเปลี่ยนแปลงของคุณจะไม่ถูกปรับใช้
นี่คือคุณสมบัติในรายละเอียดเพิ่มเติม
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
author | วัตถุ JSON | - | วัตถุ JSON ที่มีชื่อและที่อยู่อีเมลของผู้เขียนเว็บไซต์ |
footer | การทำเครื่องหมาย | เครดิตสั้น ๆ | ข้อความส่วนท้ายที่เขียนด้วย markdown |
lang * | ข้อความ | en | แท็กภาษา iana ที่ประกาศภาษาเว็บไซต์ของคุณ |
title * | ข้อความ | - | ชื่อเว็บไซต์ของคุณ |
url * | url | - | URL เว็บไซต์ของคุณ |
ส่วนท้ายมีเครดิตสั้น ๆ โดยค่าเริ่มต้น อย่าลังเลที่จะแทนที่ด้วยข้อความที่ดีที่สุดสำหรับคุณ ซึ่งอาจรวมถึงประกาศลิขสิทธิ์ colophon รายละเอียดการติดต่อหรือข้อมูลสำคัญอื่น ๆ ส่วนท้ายไม่รองรับการแบ่งสาย
หน้าเนื้อหาหลักทั้งหมดรวมถึงโพสต์, โครงการ, หน้า, หน้าแรก, หน้าข้อผิดพลาด 404, บล็อกและฟีด RSS ถูกเขียนเป็น markdown Markdown ช่วยให้คุณเขียนโดยใช้รูปแบบข้อความธรรมดาที่อ่านง่ายและเขียนง่ายที่สามารถแปลงเป็น HTML ที่ถูกต้อง เยี่ยมชมเว็บไซต์ Markdown-it สำหรับรายการตัวเลือกการจัดรูปแบบทั้งหมดรวมถึงรายการลิงก์ส่วนหัวและอื่น ๆ นอกจากนี้คุณยังสามารถดูแหล่งที่มาของไฟล์ readme นี้ได้ มันเขียนด้วย Markdown ด้วย!
ไฟล์ Markdown ทั้งหมดสิ้นสุดในส่วน .md
โฟลเดอร์หรือไฟล์ใด ๆ ที่นำหน้าด้วยขีดล่าง _ จะไม่ถูกเผยแพร่ ด้วยเหตุนี้คุณสามารถใช้ขีดเส้นใต้เพื่อสร้างร่างเช่น /content/posts/_testing-a-draft.md อย่างไรก็ตาม เป็นสิ่งสำคัญที่จะต้องจำไว้ว่าร่างของคุณจะปรากฏให้ผู้อื่นใน GitHub หากที่เก็บของคุณเป็นสาธารณะ
ไฟล์ Markdown แต่ละไฟล์เริ่มต้นด้วย Yaml Frontmatter Yaml เป็นไวยากรณ์ข้อความธรรมดาที่ช่วยให้ข้อความที่มนุษย์อ่านได้สามารถจัดรูปแบบเป็นข้อมูลที่มีโครงสร้าง Frontmatter เป็นข้อความที่ด้านบนของไฟล์ที่ไม่พอใจในสามขีดทั้งสองข้างเช่น:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
Frontmatter Yaml รวมถึงชุดของคุณสมบัติ-คีย์และค่าคั่นด้วยลำไส้ใหญ่-ซึ่งกำหนดเมตาดาต้าเฉพาะหน้า คีย์จะต้องเขียนตรงตามที่แสดงในเอกสารนี้ การเขียน Layout แทน layout ตัวอย่างเช่นจะส่งผลให้เกิดข้อผิดพลาด
นี่คือคุณสมบัติพื้นฐานของ Yaml ที่ควรใช้ใน frontmatter ในทุกหน้า
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
description | ข้อความ | - | คำอธิบายสั้น ๆ ของเนื้อหาหน้า |
eleventyNavigation | ยม | - | วัตถุ Yaml ที่อธิบายไว้ด้านล่าง |
image | ข้อความ | - | ชื่อไฟล์ของภาพที่ควรใช้สำหรับการ์ดโซเชียลมีเดีย |
layout * | ข้อความ | - | เค้าโครงหน้า |
permalink | ข้อความ | หลากหลาย | ลิงก์แพนเพจ |
title * | ข้อความ | - | ชื่อหน้า |
จำเป็นต้องใช้ชื่อเรื่องหน้าและเค้าโครงในทุกไฟล์ Markdown เค้าโครงหน้ากำหนดวิธีการแสดงเนื้อหา เมื่อสร้างหน้าใหม่คุณควรใช้ project post หรือเค้าโครง page
ขอแนะนำคุณสมบัติ description สำหรับทุกหน้าเนื่องจากใช้สำหรับการ์ดโซเชียลมีเดียและแสดงในผลลัพธ์ของเครื่องมือค้นหา มันควรจะอยู่ระหว่าง 50 และ 160 ตัวอักษรและไม่ควรทำซ้ำในหน้าต่างๆ
หากใช้ image สำหรับโซเชียลมีเดียโปรดดูเอกสารประกอบที่จัดทำโดยแพลตฟอร์มโซเชียลมีเดียเพื่อขอคำแนะนำเกี่ยวกับขนาดภาพที่เหมาะสม ตามกฎของหัวแม่มือรูปแบบภูมิทัศน์ขนาด 1200px JPG ควรเหมาะสมในแพลตฟอร์มส่วนใหญ่
คุณสมบัติ permalink ช่วยให้คุณตั้งค่า URL สำหรับหน้าหรือปิดอย่างสมบูรณ์ ลิงก์ถาวรจะถูกสร้างขึ้นโดยอัตโนมัติดังนั้นคุณควรใช้คุณสมบัตินี้ไม่ค่อย
คุณสมบัติ eleventyNavigation นั้นซับซ้อนกว่าเล็กน้อย มันบอกปลั๊กอินการนำทางที่สูงถึงสิ่งที่ต้องใส่ในเมนู นี่คือตัวอย่างของคุณสมบัติที่ใช้ในหน้า/หน้า/หน้า /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
อุปกรณ์ย่อย key บอก Elevnenty เพื่อเพิ่มหน้านี้ไปยังการนำทางด้วยข้อความ“ เกี่ยวกับ” ลำดับย่อยของ order บอกบอกว่าควรมาก่อนในการนำทางก่อน
นอกจากนี้คุณยังสามารถเพิ่มลิงค์ภายนอกไปยังการนำทางเช่นลิงก์ไปยัง GitHub ของคุณ ดูหน้า /content/pages/github.md สำหรับตัวอย่างที่มี frontmatter ต่อไปนี้:
หากคุณต้องการเพิ่มลิงค์ภายนอกไปยังการนำทางคุณสามารถสร้างไฟล์ Markdown ใหม่ (ตัวอย่างเช่น /content/external.md ) ด้วย frontmatter ด้านล่าง:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
คีย์ย่อยที่ key บอก Elevthing เพื่อเพิ่มหน้านี้ไปยังการนำทางด้วยข้อความ“ GitHub” ( ↗ คือรหัส HTML สำหรับลูกศรตะวันออกเฉียงเหนือ) การตั้งค่าย่อยตาม order ถูกตั้งค่าเป็น 3 เพื่อที่จะได้อยู่ในเมนูสุดท้ายและอุปกรณ์ย่อย url ถูกตั้งค่าเป็น URL ที่ต้องการ คุณสมบัติ permalink ถูกตั้งค่าเป็น FALSE เพื่อไม่ให้เผยแพร่หน้าเว็บที่เกี่ยวข้องในเว็บไซต์ของเรา
พบหน้าในโฟลเดอร์ /content/pages
ต้องตั้ง layout ของหน้าเว็บเป็น page ใน frontmatter หน้ารองรับเฉพาะคุณสมบัติพื้นฐานที่ระบุไว้ข้างต้น
โพสต์พบได้ในโฟลเดอร์ /content/posts
layout ของโพสต์จะต้องตั้งค่าเป็น post ใน frontmatter โพสต์สนับสนุนคุณสมบัติพื้นฐานเช่นเดียวกับคุณสมบัติ date นี่คือตัวอย่างของการโพสต์ frontmatter:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
คุณสมบัติ date กำหนดวันที่เผยแพร่ของโพสต์และทำให้คำสั่งซื้อในบล็อกและ RSS
คุณสามารถใช้ความคิดเห็น HTML <!--more--> ภายในเนื้อหา Markdown ของคุณเพื่อสร้างข้อความที่ตัดตอนมาสำหรับโพสต์ของคุณเช่น:
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. หากคุณใช้ความคิดเห็น more เฉพาะข้อความที่อยู่ก่อนหน้าความคิดเห็นจะแสดงในบล็อกและลิงก์“ อ่านเพิ่มเติม” จะปรากฏขึ้นหลังจากข้อความที่ตัดตอนมานี้
พบโครงการในโฟลเดอร์ /content/projects
layout ของโครงการจะต้องตั้งค่าเป็น project ใน Frontmatter โครงการสนับสนุนคุณสมบัติพื้นฐานเช่นเดียวกับ dateStart , dateEnd และ media Properties นี่คือตัวอย่างของ frontmatter สำหรับหน้าโครงการ
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
และนี่คือคุณสมบัติเฉพาะโครงการในรายละเอียดเพิ่มเติม:
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | วันที่สิ้นสุดของโครงการของคุณใช้เพื่อการเรียงลำดับ |
dateStart | YYYY-MM-DD | - | วันที่เริ่มต้นของโครงการของคุณ |
media | ยม | - | รายการ Yaml ของบล็อกสื่อที่อธิบายไว้ด้านล่าง |
คุณสมบัติของสื่อเป็นรายการ YAML ที่จัดรูปแบบอย่างเคร่งครัดซึ่งสามารถมีภาพและบล็อกวิดีโอ คุณสมบัติที่ใช้กับทั้งภาพและวิดีโอมีการระบุไว้ด้านล่าง
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
caption | การทำเครื่องหมาย | - | คำบรรยายภาพที่อธิบายสื่อของคุณ |
filename * | ข้อความ | - | ชื่อไฟล์ของสื่อของคุณ |
height | จำนวนเต็ม | - | ความสูงของสื่อของคุณเป็นพิกเซล |
width | จำนวนเต็ม | - | ความกว้างของสื่อของคุณเป็นพิกเซล |
size | ข้อความ | lg | ขนาดที่สื่อควรแสดง sm , md หรือ lg |
type * | ข้อความ | - | image หรือ video |
บล็อกรูปภาพรองรับคุณสมบัติเพิ่มเติมต่อไปนี้:
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
alt * | ข้อความ | - | ข้อความ alt สำหรับภาพของคุณ |
featured | บูลีน | เท็จ | ไม่ว่าควรใช้ภาพหรือไม่เพื่อเป็นตัวแทนของโครงการนี้ |
คุณสมบัติ featured ใช้เพื่อกำหนดภาพที่ควรใช้เพื่อเป็นตัวแทนโครงการนี้ในหน้าแรก หากมีการทำเครื่องหมายหลายภาพเป็นจุดเด่นแล้วภาพแรกจะถูกนำมาใช้
บล็อกวิดีโออนุญาตคุณสมบัติเพิ่มเติมต่อไปนี้ โปรดทราบว่าวิดีโอ Autoplay ได้รับการสนับสนุนเฉพาะในเบราว์เซอร์และอุปกรณ์บางตัวเท่านั้น
| สำคัญ | รูปแบบ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
controls | บูลีน | เท็จ | ควรแสดงการควบคุมวิดีโอหรือไม่ |
loop | บูลีน | เท็จ | ไม่ว่าวิดีโอควรวนซ้ำหรือไม่ |
autoplay | บูลีน | เท็จ | ไม่ว่าวิดีโอควรเล่นโดยอัตโนมัติหรือไม่ |
muted | บูลีน | เท็จ | ไม่ว่าวิดีโอควรจะปิดเสียงหรือไม่ |
หน้าแรกคือไฟล์ /content/index.md
layout ของโฮมเพจจะต้องถูกตั้งค่าเป็น home ใน frontmatter หน้าแรกรองรับคุณสมบัติพื้นฐานที่สุดอย่างไรก็ตามจะต้องไม่ใช้คุณสมบัติ permalink
คุณสมบัติ entries เพิ่มเติมช่วยให้คุณสามารถระบุว่าโครงการที่คุณต้องการปรากฏในหน้าแรกใด หากคุณสมบัติ entries ไม่ได้กรอกข้อมูลหน้าแรกจะแสดงโครงการทั้งหมดโดยอัตโนมัติตามลำดับก่อนหน้านี้
นี่คือตัวอย่างของคุณสมบัติ entries ที่ใช้:
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
ภาพแรก featured สำหรับแต่ละโครงการจะปรากฏขึ้น หากไม่มีภาพ featured ภาพแรกจะปรากฏขึ้น
หน้าบล็อกคือไฟล์ /content/posts.md
layout ของหน้าบล็อกจะต้องตั้งค่าเป็น posts ใน frontmatter หน้าบล็อกรองรับคุณสมบัติพื้นฐาน Markdown เขียนใต้ frontmatter จะไม่ปรากฏขึ้น
หน้าข้อผิดพลาด 404 คือไฟล์ /content/404.md
layout ของหน้าข้อผิดพลาด 404 จะต้องตั้งค่าเป็น error ใน frontmatter หน้าข้อผิดพลาดรองรับเฉพาะ layout และ title พื้นฐานคุณสมบัติ ต้องไม่ใช้คุณสมบัติ permalink
หน้า RSS คือไฟล์ /content/rss.md
layout ของหน้า RSS จะต้องตั้งค่าให้ feed ใน frontmatter หน้า RSS รองรับเฉพาะ layout และคุณสมบัติพื้นฐาน title ต้องไม่ใช้คุณสมบัติ permalink
ฟีด RSS จะถูกเผยแพร่โดยอัตโนมัติเป็น /feed.xml ดังนั้นตัวอย่างเช่น https://yoursite.com/feed.xml หากคุณต้องการเพิ่มลิงก์ RSS ในการนำทางของคุณให้ดูคำแนะนำคุณสมบัติพื้นฐานเพื่อเพิ่มลิงค์ภายนอก
สื่อทั้งหมดถูกเก็บไว้ในโฟลเดอร์ /content/media
ไฟล์สื่อจะต้องมีขนาดเล็กที่สุดเท่าที่จะทำได้เพื่อประหยัดพื้นที่ในที่เก็บ GitHub และโฮสติ้งของคุณ อ่านเพิ่มเติมเกี่ยวกับขีด จำกัด ที่เก็บของ GitHub ไฟล์สื่อขนาดเล็กจะโหลดได้เร็วขึ้นสำหรับผู้อ่านของคุณ
ภาพขนาดเล็กควรมีความกว้างประมาณ 800px ภาพขนาดกลางควรมีความกว้างประมาณ 1400px และภาพขนาดใหญ่ควรมีความกว้างประมาณ 3000px รูปภาพที่มีพื้นที่สีแบนขนาดใหญ่อาจทำงานได้ดีที่สุดเป็น PNGS รูปภาพที่มีรายละเอียดเพิ่มเติมเช่นการถ่ายภาพควรถูกบันทึกเป็น JPG
ยิ่งคุณเพิ่มรูปภาพลงในหน้ามากเท่าไหร่ก็ยิ่งใช้เวลาโหลดหน้านั้นนานขึ้นเท่านั้น จงใจเกี่ยวกับจำนวนภาพที่คุณเพิ่มลงในหน้าใดหน้าหนึ่ง
ดังที่ได้กล่าวไว้ข้างต้นนี่เป็นรหัสฐานพื้นฐานโดยเจตนาที่ยินดีต้อนรับการซ่อมแซม
การปรับแต่งขนาดเล็กเช่นการเปลี่ยนแปลง CSS สามารถทำได้โดยไม่ต้องใช้บรรทัดคำสั่งโดยการแก้ไขไฟล์ CSS โดยตรงใน GitHub การปรับแต่งที่ครอบคลุมมากขึ้นทำได้ดีที่สุดโดยการพัฒนาในพื้นที่ด้วยบรรทัดคำสั่ง อ้างถึงเอกสารที่สิบเอ็ดหากคุณสนใจที่จะเปลี่ยนเลย์เอาต์ Nunjucks หรือตัวอย่างใน /_includes
นี่เป็นคำแนะนำเล็กน้อยสำหรับการเปลี่ยนแปลงและขยายเว็บไซต์นี้:
/_includes/layouts/base.njk เลย์เอาต์เพื่อสร้างส่วนท้ายที่ซับซ้อนมากขึ้นclient หรือ categoryimgix เพื่อให้สื่อของคุณไม่ได้อยู่บน GitHubหากคุณสนใจความช่วยเหลือของเราในการปรับเปลี่ยนบางอย่างเพียงแค่ติดต่อและเราจะพูดคุย!
