keystone ssg
1.0.0
คีย์สโตนดูล้าสมัยในช่วงนี้ ฉันขอแนะนำให้คุณลองดู Astro หรือ Vite แทน
Keystone เป็นตัวสร้างไซต์คงที่ซึ่งเหมาะสำหรับการสร้างเว็บไซต์ขนาดเล็กอย่างรวดเร็ว ไม่จำเป็นต้องตั้งค่าใดๆ และชุดคุณลักษณะที่มีประโยชน์ต่างๆ จะเปิดใช้งานตามค่าเริ่มต้น
/public เท่านี้ก็พร้อมใช้งานแล้วสร้างไดเร็กทอรีใหม่และรันคำสั่งต่อไปนี้เพื่อตั้งค่า Keystone, package.json และ git ต้องมีโหนด 14.xx
$ npm install keystone-ssg
เยี่ยมมาก คุณติดตั้งแล้ว!
เริ่มเซิร์ฟเวอร์การพัฒนา Keystone จากนั้นไปที่ http://localhost:8080 เพื่อดูเว็บไซต์ตัวอย่าง
$ npm run dev
โปรเจ็กต์ถูกสร้างขึ้นภายในโฟลเดอร์ /public หลังจากรันคำสั่ง พร้อมสำหรับการอัพโหลด
$ npm run build
มีไดเร็กทอรีที่สำคัญหกไดเร็กทอรีภายในโปรเจ็กต์คีย์สโตน ซึ่งแต่ละไดเร็กทอรีมีวัตถุประสงค์ของตัวเอง:
ไฟล์ HTML .html & markdown .md ทุกไฟล์ในโฟลเดอร์เพจจะสอดคล้องกับเพจในเว็บไซต์ของคุณ มีไฟล์สองไฟล์ในโครงการตัวอย่างที่นี่ ลองเปิด index.html การกำหนดเส้นทางอัตโนมัติจะรวมไฟล์ไว้ในโฟลเดอร์ /public เมื่อรัน npm run build ดังนี้:
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
คุณอาจสังเกตเห็นว่า index.html มีแท็กต่อไปนี้: <_template basic.html /> ซึ่งจะวางเนื้อหาของ index.html ไว้ในไฟล์เทมเพลต slotted ที่ /templates/basic.html รูปแบบแท็ก HTML แบบกำหนดเองนี้ใช้งานได้ภายในไฟล์ .md เช่นกัน
เทมเพลตสามารถใช้กับ /pages เพื่อจัดทำกรอบงานสำเร็จรูปสำหรับเพจของคุณ ใช้แท็ก <_slot /> ภายในไฟล์เทมเพลตเพื่อระบุจุดเริ่มต้นสำหรับเนื้อหาของคุณ เปิด /templates/basic.html และมองหา:
< _var title default="Keystone default title" /> นี่คือช่องตัวแปรที่มีชื่อ title ในไฟล์เทมเพลต โดยมีค่าเริ่มต้นที่เป็นทางเลือก
การใช้สิ่งต่อไปนี้เป็นแท็กเทมเพลตภายใน /pages จะช่วยให้คุณสามารถป้อนค่าที่กำหนดเองลงในเทมเพลตจากหน้าเนื้อหา:
< _template basic.html title="A custom title" /> โฟลเดอร์ /components ใช้สำหรับส่วนประกอบที่นำมาใช้ซ้ำได้ แท็ก <_import> ใช้เพื่อนำเข้าส่วนประกอบไปยังไฟล์ HTML อื่นๆ ซึ่งมีตัวอย่างอยู่ภายใน /templates/basic.html
< _import header.html /> แท็ก <_import> ยังสามารถใช้เพื่อนำเข้าเนื้อหาของไฟล์ประเภทอื่นๆ (JS, SCSS ฯลฯ) หลังจากที่รวมแหล่งที่มาเป็นครั้งแรก
วางไฟล์ Javascript ไว้ในโฟลเดอร์ /src แท็กต่อไปนี้จะถูกแปลงเป็นแท็กนำเข้า <script> ปกติ โดยลิงก์ไปยังไฟล์ของคุณ /src/main.js :
< _script main.js />รองรับการนำเข้า ES6 อย่างสมบูรณ์ และไฟล์ผลลัพธ์จะถูกถ่ายโอนด้วย Babel รวมกลุ่มกับ Rollup และย่อขนาด
โฟลเดอร์ /styles ใช้สำหรับ CSS/SCSS ของคุณ แท็กต่อไปนี้จะถูกแปลงเป็นแท็กนำเข้า <link> css ปกติ โดยลิงก์ไปยังไฟล์ /styles/main.scss ที่คอมไพล์แล้วของคุณ:
< _style main.scss /> คุณสมบัติ node-sass ทั้งหมดได้รับการสนับสนุนอย่างสมบูรณ์ รวมถึง @import
เนื้อหาแบบคงที่จะถูกวางไว้ที่นี่ เช่น แบบอักษร รูปภาพ ไอคอน ทุกอย่างที่นี่จะถูกโอนไปยังโฟลเดอร์ที่เกี่ยวข้องในไดเร็กทอรีราก ตัวอย่างเช่น:
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' />package.json อย่าใช้เครื่องหมายทับเริ่มต้น เว้นแต่คุณต้องการเข้าถึงไฟล์ภายนอกโครงการ.keystone-page-loading จะถูกตั้งค่าให้ display: block หากตั้งค่าคลาสให้ display: none ใน CSS สามารถใช้เพื่อสร้างตัวบ่งชี้การโหลดได้search.json ในไดเร็กทอรีราก นี่คืออาร์เรย์ JSON ที่มีออบเจ็กต์สำหรับแต่ละเพจ โดยแสดงรายการเนื้อหาข้อความ ชื่อ และพาธของเพจpublic โปรดลบบรรทัด public ออกจาก .gitignore หากคุณต้องการใช้เพื่อส่งไปยัง Git package.json ด้วยเวอร์ชันที่คุณกำลังอัปเดตและรัน npm install keystone-ssg เพื่อการอัพเกรดอย่างรวดเร็ว| แท็ก | คำอธิบาย | คุณสมบัติ |
|---|---|---|
<_template> | นำเข้าไฟล์ปัจจุบันลงใน <_slot> ภายในไฟล์เทมเพลต | [ชื่อไฟล์], [ชื่อตัวแปร], src |
<_slot> | ใช้ภายในไฟล์เทมเพลตเป็นจุดเริ่มต้นสำหรับไฟล์ที่นำเข้า | ไม่มี |
<_var> | ใช้ภายในไฟล์เทมเพลตเพื่อแทนที่ด้วยตัวแปรที่นำมาจาก <_template> | [ชื่อตัวแปร] ค่าเริ่มต้น |
<_import> | นำเข้าส่วนประกอบ | [ชื่อไฟล์], src |
<_script> | สร้างแท็ก <script> ที่เชื่อมโยงกับสคริปต์ที่รวมไว้ | [ชื่อไฟล์], src |
<_style> | สร้างแท็ก <link> ที่เชื่อมโยงไปยังไฟล์ css ที่ให้มา | [ชื่อไฟล์], src |
| สั่งการ | คำอธิบาย | ความแตกต่างของเอาท์พุต |
|---|---|---|
npm run dev | สร้างเว็บไซต์เพื่อการพัฒนา จากนั้นเริ่มต้นเซิร์ฟเวอร์การพัฒนา Keystone |
|
npm run build | สร้างเว็บไซต์เพื่อการผลิต |
|
ไฟล์ปรับแต่งคือ keystone.config.js
| ตัวเลือก | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| ไดนามิกลิงก์ | เปิดใช้งานลิงก์ท้องถิ่นที่โหลดแบบไดนามิกบนเว็บไซต์ Keystone ของคุณ โดยไม่จำเป็นต้องรีเฟรช | จริง |
| ค้นหาไฟล์ | สร้าง search.json ในไดเร็กทอรีราก | จริง |
| ดัชนีเส้นทาง | ไดเรกทอรีรากของเว็บไซต์ของคุณ | - |
| ท่าเรือ | พอร์ตเซิร์ฟเวอร์ dev, localhost: 8080 | 8080 |
| พอร์ตWs | พอร์ตที่สองที่ใช้สำหรับเซิร์ฟเวอร์ dev | 8081 |
| devServerIp | ตำแหน่งของเซิร์ฟเวอร์ dev, localhost :8080 แทนที่ด้วย IP ภายในอุปกรณ์ของคุณเพื่อดูเซิร์ฟเวอร์ dev บนอุปกรณ์ภายใน (ตัวอย่าง: '192.168.1.103') | 'โฮสต์ท้องถิ่น' |
| เฝ้าดู | ไดเร็กทอรีที่เซิร์ฟเวอร์ Keystone dev ดูซึ่งจะบังคับให้คอมไพล์ใหม่และรีเฟรชหน้าเมื่อมีการแก้ไขไฟล์ | ['เทมเพลต', 'เพจ', 'สินทรัพย์', 'ส่วนประกอบ', 'src', 'สไตล์'] |
| สร้าง | ไดเร็กทอรีหน้าเนื้อหา | 'หน้า' |
| เสิร์ฟ | ไดเร็กทอรีที่มีเว็บไซต์ที่สร้างขึ้น | 'สาธารณะ' |
| คอมไพล์ใหม่แบบเต็ม | บังคับให้คอมไพล์ไฟล์ทั้งหมดใหม่ทั้งหมดหลังจากการเปลี่ยนแปลงแต่ละไฟล์ในโหมดการพัฒนา | เท็จ |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
หากคุณมี PLUGIN_ERROR หลังจากติดตั้งและเรียกใช้ตัวอย่าง นี่เป็นปัญหา Babel ให้เรียกใช้คำสั่งต่อไปนี้เพื่อแก้ไข:
npm install @babel/core @babel/preset-env --save-dev
