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

Dodger ที่มีศิลปะ

เว็บไซต์ Next.js เพื่อโฮสต์แกลเลอรีศิลปะโดยใช้ Google Spreadsheets และ Google Drive เป็นแบ็กเอนด์

การตั้งค่า

แบ็กเอนด์ข้อมูล

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

เอกสารตัวอย่างใช้รูปภาพจากเว็บ (พร้อมใช้งานอย่างอิสระบน Pexels.com) แต่คุณสามารถใช้ Google Drive เพื่ออัปโหลดรูปภาพ จากนั้นคุณสามารถใช้ CDN เช่น Cloudinary เพื่อให้บริการรูปภาพจาก Google Drive โดยอัตโนมัติ หรือดาวน์โหลดภาพลงบนเว็บเซิร์ฟเวอร์ของคุณลงในไดเรกทอรีที่คุณให้บริการเว็บไซต์ "สร้าง"

การกำหนดค่า

ในการกำหนดค่าไซต์ของคุณให้คัดลอกไฟล์ env.local.default ไปที่ .env.local และแก้ไขเพื่อชี้ไปที่สเปรดชีต Google และ CDN ของคุณหากคุณใช้งาน

คุณสามารถใช้บริการฟรีเช่น OpenSheet.vercel.app เพื่อแปลงสเปรดชีตเป็นจุดสิ้นสุด JSON หรือใช้สคริปต์ scripts/download-images เพื่อดาวน์โหลดข้อมูลเมตาเป็นไฟล์ JSON ไปยัง public/metadata.json คุณต้องลบการกำหนด METADATA_URL ออกจากไฟล์. .env.local หากคุณใช้ไฟล์ metadata.json จาก public/ ไดเรกทอรีของคุณ

set IMAGE_CDN_PREFIX="" ถ้าคุณใช้รูปภาพที่ดาวน์โหลดในเครื่องบนเซิร์ฟเวอร์ของคุณ กำหนดค่ารูปขนาดย่อในเอกสารข้อมูลเมตาเพื่อให้ภาพของคุณสามารถพบได้ที่ตำแหน่ง - ${IMAGE_CDN_PREFIX}/image/${thumbnail} คุณสามารถใช้คำนำหน้า ../ คำนำหน้าบนรูปขนาดย่อของคุณได้หากรูปขนาดย่อไม่ได้อยู่ในไดเรกทอรี image

นอกจากนี้ให้ลบการกำหนด FORCE_CDN หากคุณไม่ต้องการใช้ CDN เมื่อพัฒนาในพื้นที่

การแก้ไขปัญหา

ด้วย NodeJS รุ่นใหม่ (18+?) หากคุณพบข้อผิดพลาดต่อไปนี้: 

  opensslErrorStack: [ ' error:03000086:digital envelope routines::initialization error ' ],
  library: ' digital envelope routines ' ,
  reason: ' unsupported ' ,
  code: ' ERR_OSSL_EVP_UNSUPPORTED '

คุณสามารถตั้งค่า NODE_OPTIONS env var เพื่อให้ผู้ให้บริการ OpenSSL ดั้งเดิม 

 export NODE_OPTIONS=--openssl-legacy-provider

สร้างและปรับใช้

yarn build สร้างเว็บไซต์ และ yarn export จะส่งออกไซต์ไปยังไซต์คงที่

ดูตัวอย่างการปรับใช้สคริปต์ใน scripts/ ไดเรกทอรีเพื่อดูวิธีการปรับใช้เว็บไซต์นี้ คุณสามารถดูเว็บไซต์สาธิตได้ที่นี่

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด