หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

แยมสแต็ค

นี่คือการทดลองที่ฉันพยายามสร้างไซต์ JAMstack

สถาปัตยกรรมการพัฒนาเว็บสมัยใหม่ที่ใช้ JavaScript ฝั่งไคลเอ็นต์, API ที่นำมาใช้ซ้ำได้ และมาร์กอัปที่สร้างไว้ล่วงหน้า

ส่วนผสมคือ:

  • JavaScript: ตรรกะฝั่งไคลเอ็นต์ด้วย jQuery
  • API: ตรรกะฝั่งเซิร์ฟเวอร์พร้อม Azure Functions Core Tools ที่โฮสต์บน Azure
  • มาร์กอัป: HTML แบบคงที่ที่สร้างด้วย Hugo
  • เนื้อหา: CMS ไร้หัวที่ใช้ Git พร้อม Netlify CMS

ซอร์สโค้ดสำหรับไซต์ Hugo:

  • /src/ไซต์

ซอร์สโค้ดสำหรับฟังก์ชัน Azure:

  • /src/api

เว็บไซต์นี้โฮสต์โดย Netlify ที่:

  • http://jamstack-cms.netlify.com

วิ่ง

หากต้องการรันไซต์ในเครื่อง ให้แก้ไข /src/site/data/api.toml: 

[ recipe ]
get_ingredients = " http://localhost:7071/api/Ingredients/ "

[ submit ]
post_recipe = " http://localhost:7071/api/Recipe "

เรียกใช้ไซต์ Hugo:

cd src/site

hugo server

เรียกใช้ฟังก์ชัน Azure:

cd src/api

func host start --cors http://localhost:1313

เรียกดู:

http://localhost:1313

การระบุแหล่งที่มา

สูตรแยมนำมาจากเว็บไซต์ Tasteline.com ของสวีเดน:

  • แยมแอปเปิ้ล: http://www.tasteline.com/recept/appelmos-grundrecept/
  • แยม Lingonberry: http://www.tasteline.com/recept/lingonsylt/
  • แยมสตรอเบอร์รี่: http://www.tasteline.com/recept/jordgubbssylt/

การแปลจากภาษาสวีเดนเป็นภาษาอังกฤษเสร็จสิ้นด้วย Google Translate

ภาพนี้นำมาจาก Flickr:

  • แอปเปิ้ล: https://www.flickr.com/photos/1sock/7910673688/ โดย 1sock
  • Lingonberries: https://www.flickr.com/photos/kymis/2875484409/ โดย Jyrki Kymäläinen
  • สตรอเบอร์รี่: https://www.flickr.com/photos/42787780@N04/6984507532/ โดย Fried Dough
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด