การสร้างแบบจำลองเนื้อหาด้วย Jekyll

ไม่ใช่เรื่องใหม่เลย แต่ช่วงหลังๆ นี้ ฉันมีเหตุผลที่จะทบทวนทักษะการสร้างแบบจำลองเนื้อหาในงานของทีม ประสบการณ์ของเรามาถึงจุดที่ข้อจำกัดในการฝึกปฏิบัติเริ่มชัดเจน ปัญหาที่พบบ่อยที่สุดของเราคือ ผู้คนมักจะผูกมัดตัวเองและแบบจำลองทางจิตของตนกับแพลตฟอร์มที่เลือก และแบบแผน

แทนที่จะสอนผู้คนถึงวิธีสร้างโมเดลเนื้อหา เรากลับสอนพวกเขาถึงวิธีสร้างโมเดลเนื้อหาใน Drupal หรือวิธีสร้างโมเดลเนื้อหาใน WordPress แต่ฉันอยากให้เราเข้าหามันจากการมุ่งเน้นที่ผลประโยชน์สูงสุดของผู้ใช้ ไม่ว่าเนื้อหาจะลงเอยที่แพลตฟอร์ม ใด

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• สร้างบล็อกด้วย Jekyll และ GitHub Pages
• เหตุใดเครื่องมือสร้างเว็บไซต์แบบคงที่จึงเป็นเรื่องใหญ่ถัดไป
• เครื่องมือสร้างเว็บไซต์แบบคงที่ตรวจสอบแล้ว: Jekyll, Middleman, Roots, Hugo
• การพัฒนาที่ขับเคลื่อนด้วยคำแนะนำสไตล์อัตโนมัติ

แนวความคิดนี้นำฉันกลับมาสู่ความคิดที่ฉันหมกมุ่นอยู่กับมัน นั่นคือเมื่อเราต้องสร้างสิ่งประดิษฐ์เพื่อสื่อสารความคิดบางอย่างให้กับลูกค้า กระบวนการเกือบจะดีขึ้นเสมอเมื่อสิ่งประดิษฐ์นั้นใกล้เคียงที่สุด เป็นไปได้ที่จะเป็นเว็บไซต์จริงแทนที่จะเป็นรูปภาพของเว็บไซต์หรือ PDF ที่เต็มไปด้วยไดอะแกรม

ดังนั้นคำถามที่ฉันถามตัวเองคือ: มีเครื่องมือที่ฉันสามารถใช้เพื่อ ช่วยให้ผู้คนสร้างแบบจำลองเนื้อหาอย่างรวดเร็วในลักษณะที่ไม่เชื่อเรื่องพระเจ้าของแพลตฟอร์ม และสร้างสิ่งประดิษฐ์ที่เหมาะสำหรับการสื่อสารกับลูกค้าหรือทีมพร้อมกันหรือไม่

ทฤษฎีระดับสูงของการสร้างแบบจำลองเนื้อหา

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

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

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

ป้อน Jekyll

Jekyll เป็นเฟรมเวิร์กบล็อกแบบคงที่ และก่อนที่คุณจะมุ่งหน้าไปยังส่วนความคิดเห็น ใช่ ฉันรู้ว่ามันถูกต้องที่จะถือว่าเป็นแพลตฟอร์มในสิทธิของตนเอง อย่างไรก็ตาม มีข้อได้เปรียบเหนือบางอย่างเช่น Drupal หรือ WordPress

Jekyll ให้ความสำคัญกับความเรียบง่ายอย่างจริงจัง ไม่มีฐานข้อมูล แต่ใช้ไฟล์แบบแฟลตและแท็กเทมเพลตแบบเหลวที่สร้าง HTML แบบเก่าธรรมดา ของเหลวมีจำกัด เรียบง่าย และสามารถอ่านได้ง่ายโดยมนุษย์ ฉันพบว่าฉันสามารถแสดงเทมเพลตที่สร้างด้วยแท็ก Liquid ให้กับใครบางคนได้ และตราบใดที่พวกเขามีประสบการณ์เล็กน้อยกับโค้ดส่วนหน้า พวกเขาก็เข้าใจว่าเทมเพลตนั้นกำลังทำอะไรอยู่

ข้อดีของสิ่งนี้คือเราไม่ต้องแสดงให้คนอื่นเห็นถึงวิธีการเรียกใช้ฐานข้อมูล วิธีเชื่อมต่อเทมเพลตของพวกเขา วิธีกำหนดค่าพื้นที่ผู้ดูแลระบบของ CMS ให้ทำงานกับเทมเพลตของพวกเขา และอื่นๆ แต่เราสามารถติดตั้ง Jekyll และสอนวิธีเริ่มเซิร์ฟเวอร์แทนได้ หากผู้ใช้ใช้ Mac มีโอกาสสูงที่กระบวนการนี้ใช้เวลา 2 นาทีซึ่งเพิ่งจะได้ผลในครั้งแรกที่เราลองใช้

Jekyll ไม่ได้บังคับข้อตกลงมากมายที่คอของผู้ใช้ คุณมีอิสระในการสร้างโครงสร้างไฟล์และไปป์ไลน์สินทรัพย์ที่ต้องการ สร้างความสัมพันธ์ระหว่างไฟล์ของคุณเอง และเขียนมาร์กอัปในแบบที่คุณชอบที่สุด มีอนุสัญญาบางประการใดบ้างที่กำหนดค่าใหม่ได้อย่างง่ายดายเพื่อให้เหมาะกับสไตล์ของคุณ

การใช้คอลเล็กชันเพื่อสร้างและบรรจุอ็อบเจ็กต์

แม้ว่าจะยังคงเป็นคุณลักษณะทดลอง แต่ Jekyll มีบางอย่างที่เรียกว่าคอลเล็กชัน ที่จะช่วยให้เราสร้างระบบที่ฉันอธิบายได้

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

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

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

มาสร้างเว็บไซต์ที่เรียบง่ายด้วยวัตถุและความสัมพันธ์กันเถอะ

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

การติดตั้ง Jekyll

หากคุณใช้ Mac สิ่งนี้ค่อนข้างง่าย ติดตั้ง Ruby แล้ว คุณเพียงแค่ต้องติดตั้ง Jekyll เปิดเทอร์มินัลแล้วพิมพ์:

 gem install jekyll

สิ่งนี้จะติดตั้ง Jekyll Ruby gem และการพึ่งพา เมื่อทำงานเสร็จแล้ว เท่านี้ก็ได้ Jekyll แล้ว

การตั้งค่าเว็บไซต์ของคุณ

ตอนนี้เราต้องเริ่มนั่งร้าน Jekyll ฉันเก็บโครงการเว็บทั้งหมดของฉันไว้ในโฟลเดอร์บน Mac ชื่อ Sites ในโฟลเดอร์หลัก ก่อนอื่นฉันต้องไปที่มันด้วย:

 cd ~/Sites

จากนั้นฉันก็สามารถสร้างโฟลเดอร์ที่มีไฟล์และโครงสร้างที่เหมาะสมได้ด้วยคำสั่งนี้:

 jekyll new my-new-site

คุณสามารถแทนที่ "ไซต์ใหม่ของฉัน" ด้วยสิ่งที่คุณต้องการเรียกโครงการของคุณ สิ่งที่คุณจะได้รับคือโฟลเดอร์ที่มีชื่อนั้น และไฟล์ที่ถูกต้องทั้งหมดที่อยู่ในนั้น

เปิด Finder แล้วไปที่โฟลเดอร์ใหม่เพื่อดูว่ามีอะไรอยู่ข้างใน คุณควรเห็นสิ่งนี้:

เนื่องจากเราไม่ต้องการทุกอย่างที่ Jekyll นำเสนอ เราจะลบไฟล์และโฟลเดอร์สองสามรายการก่อน มาโยนทิ้ง /_includes , /_posts , /_sass , about.md และ feed.xml กัน

การกำหนดค่า

ตอนนี้ เราจะตั้งค่าคอนฟิกทั่วทั้งไซต์ของเรา เปิดขึ้น _config.yml มีของแนะนำเพียบเลย ฉันจะลบสิ่งนั้นและแทนที่ด้วยการกำหนดค่าที่ต้องการ นี่คือการกำหนดค่าใหม่สำหรับโครงการนี้:

 permalink: pretty collections: projects people

ฉันสร้างมันขึ้นมาเพื่อให้ URL ของฉันดูเหมือน /path/to/file/ แทนที่จะเป็น /path/to/file.html ซึ่งเป็นความชอบส่วนบุคคล ฉันยังได้สร้างคอลเล็กชันสองชุด: โครงการ และ ผู้คน ต้องเพิ่มคอลเล็กชันใหม่ลงในไฟล์การกำหนดค่า

ตอนนี้ฉันสามารถสร้างโฟลเดอร์สำหรับคอลเลกชันเหล่านี้ในโครงการของฉัน:

ชื่อโฟลเดอร์ต้องขึ้นต้นด้วยอักขระ _ (ขีดล่าง) เพื่อให้ Jekyll รู้ว่าต้องทำอย่างไรกับพวกมัน

ทำวัตถุบางอย่าง

สิ่งแรกที่เราจะทำคือคนของเรา เราจะใช้ Markdown เพื่อสร้างไฟล์เหล่านี้ เพื่อให้ไฟล์ดูดีและสะอาด แต่ยังคงสร้าง HTML เชิงความหมายที่เหมาะสม คุณสามารถเห็นฉันได้ทำไฟล์สำหรับตัวเลขจากประวัติศาสตร์อเมริกา (ซึ่งอาจหรือไม่เกี่ยวข้องกับข้อเท็จจริงที่ว่าฉันได้ฟัง แฮมิลตัน ไม่หยุดเป็นเวลาหนึ่งเดือนแล้ว):

คุณลักษณะที่เราจะใส่ในไฟล์ของเราสำหรับบุคคลจะเป็น:

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: ---

เราจะใช้ object-id เพื่ออ้างถึงหนึ่งในอ็อบเจกต์เหล่านี้โดยเฉพาะในภายหลัง เราจะแยกชื่อและนามสกุลเพื่อให้เราสามารถเลือกชุดค่าผสมที่จะใช้ในสถานที่ต่างๆ (หากระบบของคุณเรียกสิ่งนี้) และเราจะใช้ job เพื่อกำหนดสิ่งที่พวกเขาทำ (ฉันกำลังหลีกเลี่ยง 'ชื่อ' เพราะนั่นเป็นตัวแปรที่หน้าใน Jekyll มีอยู่แล้วโดยค่าเริ่มต้น) ฉันได้รวมแอตทริบิวต์สำหรับรายการลำดับความสำคัญซึ่งจะช่วยให้ฉันสามารถจัดเรียงแต่ละคนตามความตั้งใจ แต่คุณยังสามารถจัดเรียงตาม วิธีการบางอย่างในตัว เช่น ตัวอักษรหรือตัวเลข สุดท้าย เรามีช่องสำหรับลิงก์ไปยังหน้า Wikipedia ของบุคคลนั้น

ทั้งหมดนี้อยู่ระหว่างขีดกลางสามตัวที่ด้านบนและด้านล่างเพื่อกำหนดให้เป็น YAML front-matter เนื้อหาของแต่ละชีวประวัติจะเป็นไปตาม YAML และสามารถเป็นจำนวนและโครงสร้างของ HTML ได้ตามอำเภอใจ (แต่เราจะใช้การจัดรูปแบบ Markdown เพื่อให้ทุกอย่างดูดีและสะอาด)

วัตถุบุคคลที่มีประชากรสมบูรณ์มีลักษณะดังนี้ (เนื้อหาจะถูกตัดทอนเพื่อความชัดเจน):

 --- object-id: alexander-hamilton first-name: Alexander last-name: Hamilton job: 1st United States Secretary of the Treasury listing-priority: 1 wikipedia-url: https://en.wikipedia.org/wiki/Alexander_Hamilton --- Alexander Hamilton (January 11, 1755 or 1757 – July 12, 1804) was...

และนี่คืออ็อบเจ็กต์ของโปรเจ็กต์ (เนื้อหาถูกตัดทอนเพื่อความชัดเจน):

 --- object-id: united-states-coast-guard title: United States Coast Guard featured: true featured-priority: 2 listing-priority: 1 architect-id: alexander-hamilton wikipedia-url: https://en.wikipedia.org/wiki/United_States_Coast_Guard --- The United States Coast Guard (USCG) is...

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

การสร้างเพจจากออบเจกต์ของเรา

โดยการแก้ไขไฟล์ _config.yml ของฉัน ฉันสามารถสร้างหน้าสำหรับแต่ละวัตถุเหล่านี้ได้

 permalink: pretty collections: projects: output: true people: output: true

การตั้งค่า output: true ในแต่ละคอลเลกชั่นทำให้เพจถูกสร้างขึ้นสำหรับแต่ละอ็อบเจ็กต์ที่อยู่ภายใน แต่เนื่องจากอ็อบเจ็กต์ของเราไม่มีเนื้อหาในไฟล์ ออบเจ็กต์จึงไม่แสดงข้อมูลใดๆ ซึ่งหมายความว่าเราจะได้รับหน้าที่ว่างเปล่า มาสร้างเทมเพลตเลย์เอาต์เพื่อทำสิ่งนั้นแทนเรา

ไฟล์นี้จะไปอยู่ในโฟลเดอร์ _layouts แต่ก่อนอื่น เรามีไฟล์ default.html เพื่อจัดการ ซึ่งจะเก็บมาร์กอัปที่สอดคล้องในไฟล์ HTML ทั้งหมดของเรา

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{ page.title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/styles.css" /> </head> <body> <header role="banner"> ... </header> <div role="main"> <div class="container"> {{ content }} </div> </div> <footer role="contentinfo"> ... </footer> </body> </html>

คุณจะสังเกตเห็นแท็ก Liquid ที่มีลักษณะดังนี้: {{ content }} ทุกไฟล์ที่ได้รับการเรนเดอร์ลงในเพจโดย Jekyll ต้องมีเทมเพลตที่ระบุ เมื่อคุณระบุเทมเพลต เนื้อหาจากไฟล์นั้นจะแสดงผลในตำแหน่งของแท็ก {{ content }} ในเทมเพลตเลย์เอาต์ ตอนนี้เราไม่ต้องทำซ้ำสิ่งที่จะอยู่ในทุกหน้า

ต่อไป เราจะสร้างเทมเพลตเลย์เอาต์ที่ไม่ซ้ำกันสำหรับออบเจ็กต์บุคคลของเรา ซึ่งจะมีลักษณะดังนี้:

 --- layout: default --- <header class="intro person-header"> <h1>{{ page.first-name }} {{ page.last-name }}</h1> <h2>{{ page.job }}</h2> </header> <div class="person-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.first-name }} {{ page.last-name }} on Wikipedia</a> </div>

ไฟล์นี้ระบุว่ามีการแทรกโค้ดลงในเทมเพลตเลย์เอาต์เริ่มต้น จากนั้นมาร์กอัปจะเติมข้อมูลจากข้อมูลในไฟล์อ็อบเจ็กต์บุคคล

ขั้นตอนสุดท้ายคือต้องแน่ใจว่าแต่ละอ็อบเจ็กต์ระบุว่าอ็อบเจ็กต์ใช้ไฟล์เลย์เอา ต์ person.html โดยปกติ เราจะแทรกสิ่งนั้นลงใน YAML ในไฟล์บุคคลของเราดังนี้:

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: layout: person ---

แต่ฉันชอบที่จะทำให้ข้อมูลในไฟล์อ็อบเจ็กต์ของฉันมีเฉพาะแอตทริบิวต์ที่เกี่ยวข้องกับโมเดลเนื้อหาเท่านั้น โชคดีที่ฉันสามารถแก้ไขไฟล์ _config.yml เพื่อจัดการสิ่งนี้ให้ฉันได้:

 exclude: - README.md permalink: pretty collections: projects: output: true people: output: true defaults: - scope: type: projects values: layout: project - scope: type: people values: layout: person

ตอนนี้ไซต์ของฉันรู้ว่าวัตถุใดๆ ในคอลเลกชันโครงการควรใช้แม่แบบเค้าโครงโครงการ และวัตถุใดๆ ในคอลเลกชันบุคคลควรใช้เค้าโครงบุคคล สิ่งนี้ช่วยให้ฉันรักษาวัตถุเนื้อหาของฉันได้ดีและสะอาด

การแสดงวัตถุบนหน้ารายการ

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

 --- layout: default title: Projects --- <header class="intro"> <h1>{{ page.title }}</h1> </header> <div class="case-studies-body"> <ul class="listing"> {% assign projects = site.projects | sort: 'listing-priority' %} {% for project in projects %} <li> <h2><a href="{{ project.url }}">{{ project.title }}</a></h2> {{ project.content }} </li> {% endfor %} </ul> </div>

สิ่งที่เราทำคือสร้าง <ul> เพื่อใส่รายการของเราเข้าไป จากนั้น เราได้สร้างตัวแปรบนหน้าเว็บที่เรียกว่า projects กต์ และกำหนดออบเจ็กต์โปรเจ็กต์ทั้งหมดให้กับตัวแปรนั้น และจัดเรียงตามตัวแปร listing-priority ที่เราสร้างขึ้นในแต่ละตัวแปร สุดท้าย สำหรับทุกโปรเจ็กต์ในตัวแปร projects ต์ของเรา เราจะส่งออก <li> ที่มีข้อมูลจากแอตทริบิวต์ในแต่ละไฟล์ สิ่งนี้ทำให้เรามีรายการออบเจ็กต์โปรเจ็กต์ของเราที่ควบคุมได้สูงพร้อมลิงก์ไปยังหน้าที่ไม่ซ้ำของพวกมัน

ในหน้าแรก แทนที่จะแสดงโครงการทั้งหมด เราจะแสดงเฉพาะโครงการเด่นของเรา:

 <ul class="listing"> {% assign projects = site.projects | where: "featured", "true" | sort: 'featured-priority' %} {% for project in projects %} <li> <h3>{{ project.title }}</h3> <a href="{{ project.url }}">Learn about {{ project.title }}</a> </li> {% endfor %} </ul>

ออบเจ็กต์โปรเจ็กต์ใดๆ ที่มีแอตทริบิวต์ featured ที่ตั้งค่า true จะแสดงผลบนหน้านี้ และจะถูกจัดเรียงตามลำดับความสำคัญพิเศษที่เรากำหนดไว้สำหรับโปรเจ็กต์เด่น

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

เชื่อมโยงไปยังวัตถุเฉพาะ

คุณลักษณะสุดท้ายที่เราจะสร้างคือการลิงก์ไปยังวัตถุเฉพาะ นี่คือสิ่งที่คุณอาจต้องการทำ หากคุณกำลังเชื่อมโยงผู้เขียนกับโพสต์บนบล็อกหรือสิ่งที่คล้ายกัน ในกรณีของเรา เราจะแนบบุคคลเข้ากับโครงการที่พวกเขามักเกี่ยวข้องด้วย หากคุณจำได้ วัตถุโปรเจ็กต์ของเรามีแอตทริบิวต์ architect-id และบุคลากรของเราแต่ละคนมีแอตทริบิวต์ object-id เราสามารถแนบบุคคลที่ถูกต้องเข้ากับโครงการเฉพาะโดยใช้คุณลักษณะเหล่านี้

นี่คือเทมเพลตเค้าโครงโครงการของเรา:

 --- layout: default --- {% assign architect = site.people | where: "object-id", page.architect-id | first %} <header class="intro project-header"> <h1>{{ page.title }}</h1> <p>Architected by: <a href="{{ architect.url }}">{{ architect.first-name }} {{ architect.last-name }}</a></p> </header> <div class="project-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.title }} on Wikipedia</a> </div>

บรรทัดที่ 4 สร้างตัวแปรที่เรียกว่า architect และค้นหาอ็อบเจกต์บุคคลของเราทั้งหมดด้วย object-id ที่ตรงกับแอททริบิวต์ architect-id จากโปรเจ็กต์ เราควรกำหนด object-id เพื่อให้ได้ผลลัพธ์เพียงรายการเดียว แต่เพื่อให้แน่ใจว่าเราได้รับคำตอบเพียงคำตอบเดียวและอ้างอิงถึงมันแทนที่จะเป็นรายการเดียว เราต้องตั้งค่า | first | first ที่ส่วนท้ายของแท็ก Liquid {% assign %} ของเรา สิ่งนี้มีข้อจำกัดของ Jekyll โดยที่อ็อบเจ็กต์ในคอลเลกชั่นไม่มี ID เฉพาะในตอนแรก มีคุณลักษณะอื่นที่เรียกว่า ข้อมูล ซึ่งอนุญาตให้มี ID ที่ไม่ซ้ำกัน แต่ไม่สามารถส่งออกหน้าเว็บได้อย่างง่ายดายหรือให้ความสามารถในการจัดเรียงวัตถุของเรา การแก้ไขข้อจำกัดของคอลเล็กชันเป็นวิธีที่ง่ายกว่าและสะอาดกว่าในการรับฟังก์ชันที่เราต้องการ

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

ห่อ

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

เพื่อวัตถุประสงค์ในการสื่อสาร ตอนนี้เรามี ต้นแบบที่สามารถคลิกได้โดยไม่ขึ้นกับแพลตฟอร์ม (เว็บไซต์จริง) ที่จะกำหนดระบบได้ดีกว่า PDF ที่มีไดอะแกรมจำนวนมากที่เคยทำได้ เราสามารถปรับเปลี่ยนรูปแบบเนื้อหาของเราได้ทันทีในขณะที่เราเรียนรู้สิ่งใหม่ ๆ และจำเป็นต้องปรับตัว เราสามารถให้ผู้ออกแบบและนักพัฒนาเข้าสู่ระบบเพื่อสร้างรูปแบบและสถาปัตยกรรมส่วนหน้า เนื่องจากจะยอมรับมาร์กอัปและ CSS ใดๆ ที่ต้องการใช้ เรายังสามารถใช้โปรแกรมแก้ไขเนื้อหาได้ด้วยการตั้งค่าการเข้าถึงผ่าน GitHub GUI หรือแพลตฟอร์มโฮสติ้งที่อนุญาตให้ใช้โปรแกรมแก้ไขภาพ เช่น Prose.io, GitHub Pages, CloudCannon หรือ Netlify

และไม่มีสิ่งใดที่เชื่อมโยงบุคคลใด ๆ กับการเรียนรู้วิธีทำงานเฉพาะแพลตฟอร์ม ทำให้พวกเขาทำงานจากระดับแนวคิดที่มุ่งเน้นไปที่ผู้ใช้แทนเทคโนโลยีแทน