gumdrop

กัมดรอป

สคริปต์การกำหนดค่าเป็นศูนย์เพื่อแสดงเอกสาร Markdown เป็นหน้า HTML แบบคงที่

Gumdrop ได้รับการออกแบบให้เป็นสคริปต์แบบสแตนด์อโลนที่ใช้งานง่ายซึ่งสามารถสร้างเว็บไซต์และเอกสารที่เขียนด้วย Markdown โดยจะโหลดการขึ้นต่อกันทั้งหมดแบบไดนามิกจาก CDN (รวมถึงตัวแยกวิเคราะห์ Markdown) และไม่ต้องการการกำหนดค่าหรือการเริ่มต้นใดๆ

การติดตั้ง

Gumdrop ไม่จำเป็นต้องติดตั้ง คุณเพียงแค่ต้องโหลดมันลงในเอกสาร HTML พร้อมแท็ก script

 < script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script > 

การใช้งาน

หากต้องการสร้างเว็บไซต์แบบคงที่ด้วย Markdown สิ่งที่คุณต้องทำคือสร้างเทมเพลต HTML ( index.html ) บนเซิร์ฟเวอร์ไฟล์ของคุณและเพิ่ม Gumdrop เป็นไฟล์สคริปต์ภายนอก

 < main > </ main >
< script src =" path/to/gumdrop.js " >

โปรดทราบว่าคุณต้องให้บริการไฟล์ของคุณผ่านโปรโตคอล http / https เนื่องจากโปรโตคอล file ไม่รองรับคำขอดึงข้อมูล

สามารถโหลดไฟล์ Markdown ในโฟลเดอร์ pages ได้ Gumdrop เฝ้าดูส่วนแฮชของ URL และโหลดไฟล์ Markdown ที่เกี่ยวข้องจากโฟลเดอร์ pages ไฟล์ Markdown ที่แยกวิเคราะห์จะได้รับการแสดงผลในโหนด HTML <main> หากมีอยู่ใน body ไฟล์ดีฟอลต์ที่จะโหลดหากไม่มีการระบุไฟล์คือ pages/index.md หากต้องการสร้างลิงก์ไปยังไฟล์อื่นในโฟลเดอร์ pages เพียงสร้างลิงก์ที่มีชื่อนำหน้าด้วย #!/

 [ Link to about.md ] ( #!/about )

คุณสามารถโหลดทรัพยากรแบบคงที่ (เช่น รูปภาพ) ได้จากโฟลเดอร์ใดๆ ที่ให้บริการโดยไฟล์เซิร์ฟเวอร์ของคุณ เส้นทางจะสัมพันธ์กับ index.html หน้าแสดงข้อผิดพลาดสำหรับข้อผิดพลาด HTTP ต่างๆ สามารถวางไว้ในโฟลเดอร์ errors ได้ แต่ละไฟล์ควรตั้งชื่อตามรหัสข้อผิดพลาด HTTP ที่แสดง (เช่น errors/404.md )

คุณสามารถระบุข้อมูลเพิ่มเติมสำหรับเอกสารของคุณได้ใน YAML Front Matter คุณสามารถเข้าถึงข้อมูลนี้ได้ในเอกสาร Markdown ใดๆ ของคุณที่มีเทมเพลตหนวด

คุณยังสามารถใช้ไฟล์แยกกันเพื่อจัดเก็บข้อมูลและลิงก์ไฟล์ทรัพยากรเหล่านี้กับเอกสารที่อยู่เบื้องหน้าได้ ไฟล์ทรัพยากรสามารถใช้ประเภท YAML (ค่าเริ่มต้น), JSON หรือ Markdown ค่าใดๆ ในส่วนหน้าของเอกสารที่มีหมายเหตุประกอบเป็นประเภท !file จะถือเป็นรีซอร์สของไฟล์ พาธของไฟล์ที่ขึ้นต้นด้วยการนำหน้า / จะสัมพันธ์กับ index.html หากไม่มีการนำหน้า / โฟลเดอร์ data จะถือว่าเป็นตำแหน่งของทรัพยากร หากไม่มีการระบุประเภทไฟล์ (นามสกุล) ระบบจะใช้นามสกุล . .yaml สำหรับไฟล์ทรัพยากร .md ค่าที่ส่งคืนจะเป็นเอกสาร Markdown ที่แสดงผล

 # data/todo.yaml

todos :
  - title : First todo
    text : Complete your first assignment
    completed : true
  - title : YAML
    text : Learn more about YAML Front Matters
    completed : false 

 ---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}

คุณสมบัติ

• การกำหนดค่าเป็นศูนย์ ไม่จำเป็นต้องเริ่มต้น
• ไม่มีโค้ดฝั่งเซิร์ฟเวอร์ ต้องการเพียงเซิร์ฟเวอร์ไฟล์แบบคงที่เท่านั้น
• ไม่มีขั้นตอนการสร้าง/สร้าง เป็นเพียงไฟล์ที่คุณให้บริการเท่านั้น
• คุณสมบัติ Markdown พิเศษผ่าน ExtraMark
• การนำทางโดยการร้องขอการดึงข้อมูล
• การแคชไฟล์ในเครื่องเพื่อให้โหลดเร็วขึ้น
• ข้อมูลเพิ่มเติมในส่วนหน้าและไฟล์ข้อมูลที่จัดการโดยเทมเพลตหนวด
• หน้าข้อผิดพลาดสำหรับรหัสข้อผิดพลาด HTTP ต่างๆ (404, 500, 300)

การเน้นไวยากรณ์

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

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />

การใช้งานกับเพจ GitHub

คุณสามารถใช้ Gumdrop กับ GitHub Pages ได้เนื่องจากสามารถใช้เป็นเซิร์ฟเวอร์ไฟล์แบบคงที่ได้ เพื่อป้องกันไม่ให้ GitHub Pages พยายามแปลงไซต์ของคุณด้วย Jekyll ให้เพิ่มไฟล์ .nojekyll เปล่าไปที่รูทของไซต์ของคุณ

มีส่วนร่วม

ยินดีรับแนวคิด คำแนะนำ รายงานข้อบกพร่อง และคำขอดึงข้อมูลทั้งหมด -