baker example page template

เทมเพลตหน้าตัวอย่างเบเกอร์

การสาธิตวิธีสร้างและเผยแพร่เพจด้วยเครื่องมือสร้างเบเกอร์

Los Angeles Times ใช้ Baker เพื่อสร้างเพจคงที่ซึ่งเผยแพร่ที่ latimes.com/projects ระบบ Times อาศัยเวอร์ชันส่วนตัวของพื้นที่เก็บข้อมูลในลักษณะนี้ ตัวอย่างที่เรียบง่ายนี้เผยแพร่เวอร์ชันการแสดงละครและเวอร์ชันที่ใช้งานจริงไปยังบัคเก็ตสาธารณะบน Amazon S3

คุณสมบัติ

• เซิร์ฟเวอร์ทดสอบท้องถิ่นที่อัปเดตสด

• การสร้างเทมเพลต HTML ด้วย Nunjucks

• ขยาย CSS ด้วย Sass

• JavaScript รวมกับ Rollup และ Babel

• การนำเข้าข้อมูลด้วย quaff

• การสร้างเพจแบบไดนามิกตามอินพุตที่มีโครงสร้าง

• การปรับใช้แต่ละสาขาโดยอัตโนมัติกับสภาพแวดล้อมชั่วคราวในเหตุการณ์ push แต่ละรายการผ่าน GitHub Action

• การปรับใช้ปุ่มกดกับสภาพแวดล้อมการผลิตในแต่ละเหตุการณ์ release ผ่าน GitHub Action

• ข้อความ Slack ที่ถ่ายทอดสถานะของการใช้งานแต่ละรายการผ่าน datadesk/notify-slack-on-build Github Action

ความต้องการ

• Node.js เวอร์ชัน 12, 14 หรือ 16 แม้ว่าอย่างน้อยจะเป็น 12.20, 14.14 หรือ 16.0

• ตัวจัดการแพ็คเกจโหนด

• คอมไพล์

เอกสารประกอบ

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

สารบัญ

• การสร้างเพจใหม่

• การสำรวจพื้นที่เก็บข้อมูล

• การเข้าถึงสินทรัพย์

• การเข้าถึงข้อมูล

• หน้าไดนามิก

• การปรับใช้

• ตัวแปรโกลบอล

• เบเกอร์.config.js

การสร้างเพจใหม่

ขั้นตอนแรกคือการคลิกปุ่ม “ใช้เทมเพลตนี้” ของ GitHub เพื่อสร้างสำเนาของพื้นที่เก็บข้อมูลสำหรับตัวคุณเอง

คุณจะถูกขอให้ระบุตัวบุ้งสำหรับโครงการของคุณ เมื่อเสร็จแล้ว พื้นที่เก็บข้อมูลใหม่จะพร้อมใช้งานที่ https://github.com/your-username/your-slug

ถัดไป คุณจะต้องโคลนมันลงในคอมพิวเตอร์ของคุณเพื่อทำงานกับโค้ด

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

 git clone https://github.com/your-username/your-slug

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

 git clone [email protected]:ชื่อผู้ใช้ของคุณ/your-slug.git

เมื่อดาวน์โหลดพื้นที่เก็บข้อมูลเสร็จแล้ว ให้ใส่ซีดีลงใน slug ของคุณและติดตั้งการขึ้นต่อกันของ Node.js

 ติดตั้ง npm

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

 เวลา 13.00 น. เริ่มต้น

ตอนนี้ไปที่ localhost:3000 ในเบราว์เซอร์ของคุณ คุณควรเห็นหน้าสำเร็จรูปที่พร้อมสำหรับการปรับแต่งของคุณ

เริ่มต้นด้วยแบบแปลน

อีกทางเลือกหนึ่งคือการสร้างหน้าใหม่ด้วย Craftsy ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่พัฒนาโดยแผนกกราฟิกของ Reuters

 bluprint เพิ่ม https://github.com/datadesk/baker-example-page-template
mkdir my-new-pagecd my-new-page
พิมพ์ดีดเริ่มเบเกอร์-ตัวอย่างหน้า

การสำรวจพื้นที่เก็บข้อมูล

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

_ข้อมูล

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

meta.aml

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

_เค้าโครง

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

base.html

ไฟล์ base.html ประกอบด้วย HTML พื้นฐานทั้งหมดที่พบในทุกเพจที่เราสร้างขึ้น ตัวอย่างที่นี่คือพื้นฐานจากการออกแบบ คุณอาจต้องการรวมอะไรอีกมากมายในการใช้งานจริง

_พื้นที่ทำงาน

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

สินทรัพย์

ใช้เพื่อจัดเก็บสื่อและเนื้อหาอื่นๆ เช่น รูปภาพ วิดีโอ เสียง แบบอักษร ฯลฯ สามารถดึงเข้าสู่หน้าได้โดยใช้แท็กเทมเพลต static

สคริปต์

ไฟล์ JavaScript จะถูกจัดเก็บไว้ในโฟลเดอร์นี้ ไฟล์หลักสำหรับ JavaScript เรียกว่า app.js ซึ่งคุณสามารถเขียนโค้ดได้โดยตรง แพ็คเกจที่ติดตั้งผ่าน npm สามารถนำเข้าและรันได้เหมือนกับสคริปต์ Node.js อื่นๆ คุณสามารถสร้างไฟล์อื่นๆ เพื่อเขียนโค้ด JavaScript ของคุณในโฟลเดอร์นี้ได้ แต่คุณต้องแน่ใจว่าไฟล์นั้นบูตจาก app.js

สไตล์

สไตล์ชีตของเราเขียนด้วย SASS ซึ่งเป็นภาษาสไตล์ชีตที่ทรงพลังซึ่งช่วยให้นักพัฒนาควบคุม CSS ได้มากขึ้น หากคุณไม่คุ้นเคยกับ SASS คุณสามารถเขียน CSS ธรรมดาลงในสไตล์ชีตได้

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

เบเกอร์.config.js

ไฟล์ baker.config.js เป็นที่ที่เราใส่ตัวเลือกที่ Baker ใช้เพื่อให้บริการและสร้างโครงการ มีการบันทึกไว้อย่างครบถ้วนในที่อื่นในไฟล์นี้ ยกเว้นการตั้ง domain เฉพาะผู้ใช้ขั้นสูงเท่านั้นที่จะต้องแก้ไขไฟล์นี้

ดัชนี.html

เทมเพลตเริ่มต้นสำหรับเพจของคุณ นี่คือที่ที่คุณจะจัดวางหน้าของคุณ ใช้ระบบเทมเพลต Nujucks เพื่อสร้าง HTML

package.json, แพคเกจ-lock.json

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

.github

นี่คือไดเร็กทอรีพิเศษสำหรับจัดเก็บไฟล์ที่ GitHub ใช้เพื่อโต้ตอบกับโปรเจ็กต์และโค้ดของเรา ไดเร็กทอรี .github/workflows มี GitHub Action ที่จัดการการปรับใช้การพัฒนาของเรา คุณไม่จำเป็นต้องแก้ไขอะไรในนี้

การเข้าถึงสินทรัพย์

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

 <รูป>
  <img src="{% static 'assets/images/baker.jpg' %}" alt="โลโก้ Baker" width=200>
</รูป>

การเข้าถึงข้อมูล

ไฟล์ข้อมูลที่มีโครงสร้างจัดเก็บไว้ในโฟลเดอร์ _data ของคุณสามารถเข้าถึงได้ผ่าน templatetags หรือ JavaScript ในการสาธิตนี้ ได้รวมไฟล์ชื่อ example.json ไว้ด้วยเพื่อแสดงสิ่งที่เป็นไปได้ รองรับไฟล์รูปแบบอื่นๆ เช่น CSV, YAML และ AML

ผ่านแท็กเทมเพลตของ Nunjucks

ไฟล์ในโฟลเดอร์ _data จะพร้อมใช้งานตามชื่อภายในเทมเพลตของคุณ ดังนั้น ด้วย _data/example.json คุณสามารถเขียนข้อความดังนี้:

 {% สำหรับ obj ในตัวอย่าง %}
  {{ obj.year }}: {{ obj.wheat }}{% endfor %}

ผ่านทางจาวาสคริปต์

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

หากข้อมูลที่คุณกำลังเข้าถึงมีอยู่แล้วใน URL ที่คุณเชื่อว่าจะคงอยู่ ก็เป็นเรื่องง่าย แต่ถ้าไม่ใช่และเป็นข้อมูลที่คุณเตรียมไว้เองล่ะ?

คุณสามารถเข้าถึงบันทึกในโฟลเดอร์ _data ของคุณได้ ข้อแม้เดียวคืองานในการแปลงไฟล์นี้เป็นสถานะที่ใช้งานได้คือความรับผิดชอบของคุณ d3-fetch ไลบรารีที่ดีสำหรับสิ่งนี้คือ

หากต้องการสร้าง URL ให้กับไฟล์นี้ในแบบที่ Baker เข้าใจ ให้ใช้รูปแบบนี้:

 นำเข้า { json } จาก 'd3-fetch';// พารามิเตอร์แรกควรเป็นเส้นทางไปยังไฟล์// พารามิเตอร์ตัวที่สอง *ต้อง* เป็น “import.meta.url”const url = new URL('../_data /example.json', import.meta.url);// เรียกมันว่าข้อมูลที่ไม่คงที่ = รอ json (url);

อีกวิธีหนึ่งคือการพิมพ์ข้อมูลลงในเทมเพลตของคุณเป็นแท็ก script ตัวกรอง jsonScript จะนำตัวแปรที่ส่งผ่านไป รัน JSON.stringify และส่งเอาต์พุต JSON ลงใน HTML ภายในแท็ก <script> โดยมี ID ที่ตั้งไว้ซึ่งคุณส่งเป็นพารามิเตอร์

 {{ ตัวอย่าง|jsonScript('ตัวอย่างข้อมูล') }}

เมื่อพร้อมแล้ว คุณสามารถเรียกข้อมูล JSON ที่จัดเก็บไว้ในเพจตาม ID ใน JavaScript ของคุณได้

 // คว้าองค์ประกอบ jsonScript ที่สร้างขึ้นโดยใช้ ID เดียวกับที่คุณส่ง inconst dataElement = document.getElementById('example-data');// แปลงเนื้อหาขององค์ประกอบนั้นเป็น JSON// ทำสิ่งที่คุณต้องทำกับ “data” !const data = JSON.parse(dataElement.textContent);

แม้ว่าแนะนำให้ใช้วิธี URL แต่วิธีนี้อาจยังเป็นวิธีที่นิยมใช้เมื่อคุณพยายามหลีกเลี่ยงการร้องขอเครือข่ายเพิ่มเติม นอกจากนี้ยังมีข้อดีเพิ่มเติมที่ไม่ต้องใช้ไลบรารีพิเศษในการแปลงข้อมูล .csv เป็น JSON

หน้าไดนามิก

คุณสามารถสร้างเพจแบบสแตติกได้ไม่จำกัดจำนวนโดยการป้อนแหล่งข้อมูลที่มีโครงสร้างให้กับอ็อพชัน createPages ในไฟล์ baker.config.js ตัวอย่างเช่น ข้อมูลโค้ดนี้จะสร้างหน้าสำหรับทุกบันทึกในไฟล์ example.json

 ค่าเริ่มต้นการส่งออก {
 // ... ตัวเลือกอื่นๆ ทั้งหมดที่กล่าวมาข้างต้นนี้ไม่ได้รวมอยู่ในประเด็นนี้แล้ว
 createPages: createPages(createPage, data) {// ดึงข้อมูลจาก _data folderconst pageList = data.example;// วนซ้ำระเบียนสำหรับ (const d ของ pageList) { // ตั้งค่าเทมเพลตฐานที่จะใช้สำหรับแต่ละอ็อบเจ็กต์ . อยู่ในโฟลเดอร์ _layouts const template = 'year-detail.html';  // ตั้งค่า URL สำหรับเพจ const url = `${d.year}`;  // ตั้งค่าตัวแปรที่จะส่งผ่านไปยังบริบทของเทมเพลต const context = { obj: d };  // ใช้ฟังก์ชันที่ให้มาเพื่อแสดงผลเพจ createPage(template, url, context);}
  -

ที่สามารถใช้เพื่อสร้าง URL เช่น /baker-example-page-template/1775/ และ /baker-example-page-template/1780/] ด้วยเทมเพลตเดียว

การปรับใช้

การกำหนดค่าบัญชีของคุณ

ก่อนที่คุณจะสามารถติดตั้งใช้งานเพจที่สร้างโดยพื้นที่เก็บข้อมูลนี้ได้ คุณจะต้องกำหนดค่าบัญชี Amazon AWS ของคุณและเพิ่มชุดข้อมูลรับรองลงในบัญชี GitHub ของคุณ

ขั้นแรก คุณจะต้องสร้างบัคเก็ตสองบัคในบริการจัดเก็บข้อมูล S3 ของ Amazon หนึ่งคือสำหรับไซต์การแสดงละครของคุณ อีกอันหนึ่งสำหรับไซต์การผลิตของคุณ สำหรับตัวอย่างง่ายๆ นี้ แต่ละรายการควรอนุญาตให้สาธารณะเข้าถึงได้และได้รับการกำหนดค่าให้ให้บริการเว็บไซต์แบบคงที่ ในการจัดเตรียมที่ซับซ้อนยิ่งขึ้น เช่นเดียวกับที่เราดำเนินการที่ Los Angeles Times บัคเก็ตสามารถเชื่อมโยงกับชื่อโดเมนที่จดทะเบียน และไซต์ชั่วคราวที่ได้รับการปกป้องจากการมองเห็นของสาธารณะผ่านแผนการตรวจสอบสิทธิ์

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

ชื่อ	ค่า
BAKER_AWS_S3_STAGING_BUCKET	ชื่อของที่เก็บข้อมูลชั่วคราวของคุณ
BAKER_AWS_S3_STAGING_REGION	ภูมิภาค S3 ที่คุณสร้างบัคเก็ตชั่วคราวของคุณ
BAKER_AWS_S3_PRODUCTION_BUCKET	ชื่อที่เก็บข้อมูลการผลิตของคุณ
BAKER_AWS_S3_PRODUCTION_REGION	ภูมิภาค S3 ที่สร้างบัคเก็ตการผลิตของคุณ

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

ชื่อ	ค่า
BAKER_AWS_ACCESS_KEY_ID	รหัสการเข้าถึง AWS
BAKER_AWS_SECRET_ACCESS_KEY	รหัสลับ AWS

การแสดงละครงานของคุณ

GitHub Action ที่รวมอยู่ในพื้นที่เก็บข้อมูลนี้จะเผยแพร่เวอร์ชันชั่วคราวสำหรับทุกสาขาโดยอัตโนมัติ ตัวอย่างเช่น โค้ดที่ส่งไปที่สาขา main เริ่มต้นจะปรากฏที่ https://your-staging-bucket-url/your-repo/main/

หากคุณต้องสร้างสาขา git ใหม่ที่เรียกว่า bugfix และพุชโค้ดของคุณ คุณจะเห็นเวอร์ชันชั่วคราวใหม่ที่ https://your-staging-bucket-url/your-repo/bugfix/

การเผยแพร่ผลงานของคุณ

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

ขั้นตอนที่หนึ่งคือการป้อน slug สำหรับ URL ของคุณลงในไฟล์การกำหนดค่า _data/meta.aml

 slug: your-page-slug

ไม่ใช่ความคิดที่ดีเลยที่จะทำให้แน่ใจว่าทากของคุณไม่ได้ถูกเอาไปแล้ว คุณสามารถทำได้โดยไปที่ https://your-production-bucket-url/your-slug/ และตรวจให้แน่ใจว่าได้ส่งคืนข้อผิดพลาดที่ไม่พบหน้าเว็บ

หากคุณต้องการเผยแพร่เพจของคุณที่รูทของบัคเก็ต คุณสามารถปล่อยให้ slug เป็นโมฆะได้

 กระสุน:

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

 git เพิ่ม _data/meta.aml
git commit -m “ตั้งค่ากระสุนหน้า”
git push ต้นกำเนิดหลัก

ไปที่ส่วนการเผยแพร่ของหน้าพื้นที่เก็บข้อมูลของคุณบน GitHub คุณสามารถค้นหาได้จากหน้าแรกของ repo

ร่างฉบับใหม่.

คุณจะสร้างหมายเลขแท็กใหม่ที่นั่น แนวทางที่ดีคือการเริ่มต้นด้วยหมายเลขรูปแบบ xxx ที่เป็นไปตามมาตรฐานการกำหนดเวอร์ชันเชิงความหมาย 1.0.0 เป็นการเริ่มต้นที่ดี

สุดท้าย กดปุ่มสีเขียวขนาดใหญ่ที่ด้านล่างสุดแล้วส่งการเผยแพร่

รอสักครู่ เพจของคุณควรแสดงที่ https://your-production-bucket-url/your-slug/

การดีบัก

เซิร์ฟเวอร์ทดสอบ Baker สามารถบันทึกรายละเอียดได้มากขึ้นโดยเริ่มจากตัวเลือกต่อไปนี้

 DEBUG=เริ่มต้น 1 npm

หากต้องการจำกัดบันทึกให้เบเกอร์รัน:

 DEBUG=baker:* เริ่มต้น npm

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

 บิลด์การรัน NPM

ตัวแปรโกลบอล

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

NODE_ENV

ตัวแปร NODE_ENV จะเป็นหนึ่งในสองค่าเสมอ: development หรือ production ซึ่งสอดคล้องกับประเภทของบิลด์ที่กำลังรันบนเพจ

เมื่อคุณรัน npm start คุณจะอยู่ในโหมด development เมื่อคุณรัน npm run build คุณจะอยู่ในโหมด production

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

 {% if NODE_ENV == 'development' %}<p>คุณจะไม่เห็นสิ่งนี้บนไซต์ถ่ายทอดสด!</p>{% endif %}

DOMAIN

ตัวแปร DOMAIN จะเหมือนกับตัวเลือก domain ที่ส่งผ่านใน baker.config.js เสมอ หรือสตริงว่างหากไม่ผ่าน

PATH_PREFIX

ตัวแปร PATH_PREFIX จะเหมือนกับตัวเลือก pathPrefix ที่ส่งผ่านใน baker.config.js เสมอ หรือเครื่องหมายทับ ( / ) เดียวหากไม่ผ่าน

page.url

URL ที่เกี่ยวข้องกับโปรเจ็กต์ไปยังหน้าปัจจุบัน จะรวม pathPrefix หากมีการระบุไว้ในไฟล์ baker.config.js กล่าวคือ จะพิจารณาเส้นทางโปรเจ็กต์ใดๆ ที่กำลังดำเนินการอยู่ และชี้ไปที่หน้าที่ถูกต้องในโปรเจ็กต์

page.absoluteUrl

URL แบบเต็มไปยังหน้าปัจจุบัน ซึ่งจะรวม domain , pathPrefix และเส้นทางปัจจุบันเป็น URL แบบเต็ม ปัจจุบันใช้เพื่อส่งออก Canonical URL และ URL ทั้งหมดสำหรับแท็ก <meta> โซเชียล

 <link rel="canonical" href="{{ page.absoluteUrl }}">

page.inputUrl

นี่คือเส้นทางไปยังเทมเพลตดั้งเดิมที่ใช้ในการสร้างเพจนี้โดยสัมพันธ์กับไดเร็กทอรีของโปรเจ็กต์ปัจจุบัน หากคุณมีไฟล์ HTML อยู่ที่ page-two/index.html , page.inputUrl จะเป็น page-two/index.html

page.outputUrl

นี่คือเส้นทางไปยังไฟล์ HTML ที่ส่งออกเพื่อสร้างเพจนี้ที่เกี่ยวข้องกับโฟลเดอร์ _dist หากคุณมีไฟล์ HTML อยู่ที่ page-two.html page.outputUrl จะเป็น page-two/index.html

เบเกอร์.config.js

ทุกโปรเจ็กต์ Baker ที่เราทำงานจะมีไฟล์ baker.config.js อยู่ในไดเร็กทอรีราก ไฟล์นี้มีหน้าที่รับผิดชอบในการส่งข้อมูลไปยัง Baker เพื่อให้สามารถสร้างโครงการของคุณได้อย่างถูกต้อง

 ค่าเริ่มต้นการส่งออก {
  // ไดเร็กทอรีที่มีเนื้อหาอยู่
  สินทรัพย์: 'สินทรัพย์'

  // createPages
  createPages: ไม่ได้กำหนด,

  // ไดเร็กทอรีข้อมูล
  ข้อมูล: '_data',

  // โดเมนที่กำหนดเองซึ่งเป็นทางเลือกเพื่อใช้ในการสร้างเส้นทาง
  โดเมน: ไม่ได้กำหนด,

  // เส้นทางหรือ glob ของเส้นทางของจุดเข้าใช้งาน JavaScript แต่ละรายการ
  จุดเข้าใช้งาน: 'scripts/app.js',

  // ไดเร็กทอรีอินพุตโดยรวม ซึ่งโดยทั่วไปคือโฟลเดอร์ปัจจุบัน
  อินพุต: process.cwd(),

  // ซึ่งเป็นที่ตั้งของเค้าโครงเทมเพลต มาโคร และการรวม
  เค้าโครง: '_layouts',

  // วัตถุที่มีคีย์และค่าของตัวแปรโกลบอลที่จะเป็น
  // ส่งต่อไปยังเทมเพลต Nunjucks ทั้งหมด
  nunjucksVariables: ไม่ได้กำหนด,

  // วัตถุของคีย์ (ชื่อ) + ค่า (ฟังก์ชัน) สำหรับการเพิ่มแบบกำหนดเอง
  // กรองเป็น Nunjucks
  nunjucksFilters: ไม่ได้กำหนด,

  // วัตถุของคีย์ (ชื่อ) + ค่า (ฟังก์ชัน) สำหรับการเพิ่มแบบกำหนดเอง
  // แท็กไปที่ Nunjucks
  nunjucksTags: ไม่ได้กำหนด,

  // ตำแหน่งที่จะส่งออกไฟล์ที่คอมไพล์แล้ว
  เอาท์พุต: '_dist',

  // คำนำหน้าสำหรับเพิ่มที่จุดเริ่มต้นของทุกเส้นทางที่ได้รับการแก้ไขอย่างไร
  // ทากทำงาน
  pathPrefix: '/',

  // ไดเร็กทอรีทางเลือกสำหรับใส่เนื้อหาทั้งหมดภายใน ซึ่งไม่ค่อยได้ใช้
  staticRoot: '',};

ตัวเลือก

สินทรัพย์

ค่าเริ่มต้น: ”assets”

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

สร้างเพจ

ค่าเริ่มต้น: undefined

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

 ค่าเริ่มต้นการส่งออก {
  -

  // createPage - ส่งผ่านเทมเพลต ชื่อเอาต์พุต และบริบทของข้อมูล
  // data - ข้อมูลที่เตรียมไว้ในโฟลเดอร์ `_data`
  createPages(createPage, data) {for (const title of data.titles) { createPage('template.html', `${title}.html`, {บริบท: { title }, });}
  -

ข้อมูล

ค่าเริ่มต้น: ”_data”

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

โดเมน

ค่าเริ่มต้น: undefined

ตัวเลือก domain จะบอก Baker ว่าควรใช้อะไรเมื่อสร้าง URL ที่สมบูรณ์ bakery-template รี่ตั้งค่านี้เป็น https://www.latimes.com

จุดเริ่มต้น

ค่าเริ่มต้น: ”scripts/app.js”

ตัวเลือก entrypoints จะบอก Baker ว่าไฟล์ JavaScript ใดที่จะถือเป็นจุดเริ่มต้นสำหรับบันเดิลสคริปต์ นี่อาจเป็นเส้นทางไปยังไฟล์หรือไฟล์ glob ทำให้สามารถสร้างหลายบันเดิลพร้อมกันได้

ป้อนข้อมูล

ค่าเริ่มต้น: process.cwd()

ตัวเลือก input จะบอก Baker ว่าโฟลเดอร์ใดที่จะถือเป็นไดเร็กทอรีหลักสำหรับทั้งโปรเจ็กต์ ตามค่าเริ่มต้น นี่คือโฟลเดอร์ที่มีไฟล์ baker.config.js อยู่ คุณอาจไม่จำเป็นต้องตั้งค่านี้

เค้าโครง

ค่าเริ่มต้น: ”_layouts”

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

nunjucksตัวกรอง

ค่าเริ่มต้น: undefined

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

 ค่าเริ่มต้นการส่งออก {
  -

  // ส่งอ็อบเจ็กต์ของตัวกรองเพื่อเพิ่มไปยัง Nunjucks
  nunjucksFilters: {สี่เหลี่ยม (n) { n = +n;  กลับ n * n;}
  -

 {{ ค่า|สี่เหลี่ยมจัตุรัส }}

nunjucksTags

ค่าเริ่มต้น: undefined

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

 ค่าเริ่มต้นการส่งออก {
  -

  // ส่งอ็อบเจ็กต์ของตัวกรองเพื่อเพิ่มไปยัง Nunjucks
  nunjucksTags: {doubler(n) { return `<p>${n} สองเท่าคือ ${n * 2}</p>`;}
  -

 {% ค่าสองเท่า %}

เอาท์พุท

ค่าเริ่มต้น: ”_dist”

ตัวเลือก output จะบอก Baker ว่าควรวางไฟล์ไว้ที่ใดเมื่อ npm run build ตามค่าเริ่มต้น นี่คือโฟลเดอร์ _dist คุณอาจไม่จำเป็นต้องตั้งค่านี้

เส้นทางคำนำหน้า

ค่าเริ่มต้น: ”/”

pathPrefix จะบอก Baker ว่าคำนำหน้าเส้นทางใดที่จะเพิ่มให้กับ URL ใด ๆ ที่เขาสร้าง หาก domain ถูกส่งผ่าน โดเมนนั้นจะถูกรวมเข้ากับ pathPrefix เมื่อสร้าง URL ที่สมบูรณ์ โดยทั่วไปคุณจะไม่ตั้งค่านี้ด้วยตนเอง เนื่องจากจะใช้ในระหว่างการปรับใช้เพื่อสร้าง URL ด้วยตัวทากของโปรเจ็กต์

รากแบบคงที่

ค่าเริ่มต้น: ””

ตัวเลือก staticRoot สั่งให้ Baker ใส่เนื้อหาทั้งหมดลงในไดเร็กทอรีเพิ่มเติม สิ่งนี้มีประโยชน์สำหรับโปรเจ็กต์ที่จำเป็นต้องมีตัวบุ้งที่ไม่ซ้ำกันในทุก ๆ หน้าโดยไม่ต้องซ้อนกัน ทำให้ทุกคนสามารถแชร์เนื้อหาคงที่ได้ อย่างไรก็ตาม นี่เป็นกรณีพิเศษและต้องมีการตั้งค่าแบบกำหนดเองสำหรับการปรับใช้ อย่าพยายามใช้สิ่งนี้โดยไม่มีเหตุผลที่ดี