พรีวิวและ TypeScript client ที่ระบบสร้าง

public client ที่ระบบสร้างเรียก API /v1 ของ CMS ไม่ใช่ client สำหรับ API อีกแบบของแบ็กเอนด์ที่แยกออก API นั้นอธิบายใน เอกสารอ้างอิง API ของแบ็กเอนด์อิสระ

สร้าง client

เปิด การตั้งค่า → API → ไคลเอนต์ TypeScript ที่นี่แสดง schema identity ของ client สำหรับโมเดลที่บทบาทของคุณอ่านได้ และคัดลอกหรือดาวน์โหลดไฟล์ได้ ไฟล์ขึ้นต้นด้วยคอมเมนต์ @dee-wan/public-client ที่บันทึกเว็บไซต์ URL สาธารณะ เวอร์ชันสัญญา schema identity และตัวสัญญาเอง schema identity คือ digest แบบ SHA-256 ของภาษา นโยบายภาษา และการมองเห็นกับชนิดฟิลด์ของแต่ละโมเดล ป้ายชื่อ ชื่อ และลำดับฟิลด์ไม่ทำให้มันเปลี่ยน

หากต้องการอัปเดต client จากรีโพซิทอรีของคุณ ให้ดาวน์โหลด dee-wan-client.mjs จากการ์ดเดียวกันแล้ว commit ไว้ ต้องใช้ Node 18 ขึ้นไป ไม่ต้องติดตั้งแพ็กเกจ คำสั่งอ่าน site API token จาก DEE_WAN_SITE_TOKEN สร้าง token ใน การตั้งค่า → API และเก็บไว้ใน secret ของเซิร์ฟเวอร์หรือ CI โมเดลส่วนตัวต้องอยู่ในขอบเขตของ token แทน origin สาธารณะของเว็บไซต์ด้วยค่าจริง ค่าด้านล่างเป็นตัวอย่าง

DEE_WAN_SITE_TOKEN=dw_site_… node dee-wan-client.mjs pull --url https://www.example.com --out src/dee-wan-public.ts

คำสั่งอ่าน GET /v1/_client บน origin สาธารณะ และเขียนไฟล์เฉพาะเมื่อคำตอบครบและส่วนหัวตรงกับ identity ที่ส่งมา client ที่ดึงมาครอบคลุมโมเดลสาธารณะและโมเดลส่วนตัวในขอบเขตของ token identity จะตรงกับที่ Settings แสดงก็ต่อเมื่อทั้งสองครอบคลุมโมเดลชุดเดียวกัน

ก่อน deploy ทุกครั้ง เช่นใน CI ให้ตรวจไฟล์ที่ commit ไว้

DEE_WAN_SITE_TOKEN=dw_site_… node dee-wan-client.mjs check --file src/dee-wan-public.ts

check จบด้วยรหัส 0 เมื่อ identity ตรงกัน หรือเมื่อทุกการเปลี่ยนแปลงเข้ากันได้ ได้แก่ เพิ่มโมเดล ฟิลด์ หรือภาษา ฟิลด์กลายเป็นบังคับ โมเดลกลายเป็นสาธารณะ หรือค่า select ถูกลบ และจะแสดงรายการเหล่านั้น รหัส 1 คือการเปลี่ยนแบบ breaking ได้แก่ ลบโมเดล ฟิลด์ หรือภาษา เปลี่ยนชนิดฟิลด์หรือการเป็นรายการ ฟิลด์กลายเป็นไม่บังคับ มีค่า select ใหม่ โมเดลกลายเป็นส่วนตัว หรือเว็บไซต์ ภาษาเริ่มต้น หรือนโยบายภาษาเปลี่ยน รหัส 2 คือตรวจไม่ได้ เช่น อาร์กิวเมนต์ผิด ไม่มี token เครือข่ายหรือ HTTP ผิดพลาด หรือไฟล์ไม่มีส่วนหัว หลังมีการเปลี่ยนแปลง ให้รัน pull แก้ส่วนที่คอมไพล์ไม่ผ่าน แล้ว commit

เซสชันผู้ดูแลยังดึงไฟล์เดียวกันด้วยมือได้

curl --fail --silent --show-error   -H "X-Site-Id: $DEE_WAN_SITE_ID" -b "$DEE_WAN_SESSION_COOKIE"   'https://admin.example.com/api/models/public-client.ts'   -o /tmp/dee-wan-public.ts

ไฟล์มีฟิลด์โมเดลที่แน่นอน ชนิดภาษาและ query รูปแบบคำตอบ และเมธอดของโมเดล เป็น TypeScript ที่ไม่ต้องใช้ dependency ไม่ใช่แพ็กเกจให้ติดตั้ง แอปของคุณไม่ import คำสั่งนี้ และ Dee Wan ไม่แก้ไขรีโพซิทอรีของคุณ

เรียกเมธอดของโมเดล

ตัวอย่างนี้สมมติว่าคุณสร้างโมเดลสาธารณะ article และภาษา en จริง ใช้โฮสต์สาธารณะของเว็บไซต์ ไม่ใช่ origin ผู้ดูแล และไม่ใส่ /v1 ต่อท้าย base

import { createClient } from './dee-wan-public';

const client = createClient({ baseUrl: 'https://www.example.com' });
const first = await client.article.list({ locale: 'en', limit: 20 });
const item = await client.article.get('hello', { locale: 'en' });

การเรียกจากเซิร์ฟเวอร์หรือขณะบิลด์ไม่ต้องตั้งค่า CORS หากแอปเบราว์เซอร์อยู่คนละต้นทาง ให้เพิ่มต้นทางใน การตั้งค่า → API → ต้นทางของเบราว์เซอร์ ดู การอนุญาตต้นทาง โมเดลส่วนตัวต้องมี token ใน options ของ createClient โดยเก็บเป็น secret ฝั่งเซิร์ฟเวอร์ ห้ามเผยแพร่ใน browser bundle ตรวจ data และข้อมูล page ของรายการ ส่ง opaque cursor กลับโดยไม่แก้ และตรวจภาษาที่ตอบกลับเมื่อใช้ fallback ดูสัญญาข้อผิดพลาดและแบ่งหน้าใน API สาธารณะ

เปิดใช้ origin Astro ที่รายงานไว้

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

หากตรวจยืนยันไม่สำเร็จ เป้าหมายเดิมจะยังทำงาน และรายการใหม่จะแสดง การแสดงตัวอย่างยังไม่ได้ยืนยัน ผู้ที่เข้าสู่ระบบและมี site:settings เลือกรายการที่บันทึกไว้และมีสิทธิ์อ่านพร้อมภาษา แล้วกด ยืนยันและเปิดใช้การแสดงตัวอย่าง เพื่อลองอีกครั้ง เซิร์ฟเวอร์ใช้ origin ที่บันทึกไว้ เบราว์เซอร์เปลี่ยนเป็น origin อื่นไม่ได้ หากพิสูจน์ไม่ผ่าน ติดต่อ origin ไม่ได้ สัญญาเป็นของไซต์อื่น หรือมีการแก้การตั้งค่าพร้อมกัน เป้าหมายเดิมจะยังคงอยู่และระบบจะแสดงเหตุผลที่ปฏิเสธ การตั้งค่า renderer ด้วยตนเองยังอยู่ที่ ตัวเลือกสำหรับนักพัฒนา → ตัวอย่างเว็บไซต์แบบกำหนดเอง.

เปิดพรีวิวร่างที่แสดงผลจริง

การเปิดดูตัวอย่างในตัวแก้ไขจะสร้างสิทธิ์อ่านหนึ่งรายการที่มีอายุ 30 นาที ใช้อ่านร่างนั้น ไม่ใช่ทั้งเว็บไซต์ และไม่ข้ามสิทธิ์โมเดลส่วนตัว อย่าบันทึกลง log นำไปทำดัชนี หรือแจกสิทธิ์นี้เป็น URL สาธารณะ ระบบปฏิเสธสิทธิ์ที่ไม่ถูกต้อง ให้สร้างพรีวิวใหม่แทนใช้ลิงก์หมดอายุ ลิงก์ใหม่แสดงร่างที่บันทึกแล้วของรายการที่เกี่ยวข้องและผู้สร้างลิงก์มีสิทธิ์อ่าน แต่ละครั้งจะตรวจบัญชี สิทธิ์ในไซต์ และสิทธิ์อ่านปัจจุบันของผู้สร้าง ฟิลด์และภาษาของรายการต้นทางยังจำกัดตามสิทธิ์ตอนสร้างลิงก์ ลิงก์เก่าที่ไม่มีสิทธิ์ขยายร่างยังแสดงเฉพาะรายการที่เผยแพร่แล้ว

ตั้ง origin ของตัวแสดงพรีวิวและแม่แบบเส้นทางแต่ละโมเดลที่ การตั้งค่า → ซอร์สโค้ดและการเผยแพร่ → ตัวเลือกสำหรับนักพัฒนา → ตัวอย่างเว็บไซต์แบบกำหนดเอง สัญญาใช้ HTTPS origin (HTTP ใช้ได้เฉพาะที่อยู่ loopback: localhost, 127.0.0.1 หรือ [::1]), ตัวแทน {slug} และ {locale} และชื่อพารามิเตอร์โทเคนใน query ตัวแสดงผลต้องผ่านการยืนยันของเว็บไซต์นั้นก่อน CMS จะรายงาน rendered: true การตั้งค่าอย่างเดียวไม่พอ หากยังไม่มีตัวแสดงผลที่ผ่านการยืนยัน การดูตัวอย่างจะเปิด JSON จาก API สาธารณะและรายงาน rendered: false

สำหรับ Astro site ที่สร้าง ให้กำหนด previewApiOrigin ใน apps/site/src/owned/extensions.ts เป็น origin ของ API สาธารณะ CMS อย่างชัดเจนแล้วตรวจสัญญาตัวแสดงผล ค่าเริ่มต้นคือ null มีเพียงเส้นทาง /preview ที่ใช้การเชื่อมต่อนี้ขณะทำงาน หน้าที่เผยแพร่ตามปกติใช้ snapshot ที่สร้างไว้ ยกเว้นหน้าที่มีส่วน «รายการล่าสุด» และ route /blog ของ Blog: หน้าเหล่านี้อ่านรายการที่เผยแพร่แล้วตอน request จาก /v1 บนโฮสต์ของเว็บไซต์เอง (Worker สาธารณะของ Dee Wan ใน topology อ้างอิง) หรือจาก publicApiOrigin ในส่วน owned เมื่อพัฒนาในเครื่อง และตอบ no-store ส่วน «รายการล่าสุด» ภายในส่วนที่ใช้ร่วมกันที่แสดงในพื้นที่จะถูกตรึงไว้ตอนสร้างเว็บไซต์แทน คำตอบพรีวิวเป็น no-store และต้องไม่เข้าระบบค้นหาหรือแคชสาธารณะ เว็บไซต์ที่แยกออกควรปิดการเชื่อมต่อสำหรับพรีวิวนี้เมื่อเลิกใช้ CMS

แก้ไขจากพรีวิว

ในตัวแก้ไขรายการ ดูตัวอย่างที่นี่ เปิดผลการแสดงผลที่บันทึกไว้ข้างฟิลด์ ตัวเลือกนี้มีให้เมื่อตัวแสดงผลที่ผ่านการยืนยันของเว็บไซต์กำหนดเส้นทางให้โมเดลและรองรับ editor bridge หน้าจอกว้าง (ตั้งแต่ 1280 พิกเซล) แสดงฟิลด์และผลการแสดงผลคู่กัน หน้าจอที่แคบกว่าแสดงทีละแผง พร้อมแท็บ ฟิลด์ และ ตัวอย่าง ส่วน ดูตัวอย่างบนเว็บไซต์ ยังเปิดผลการแสดงผลในแท็บใหม่เหมือนเดิม

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

ตัวแสดงผลบล็อกแบบจัดการและแบบสร้างล่าสุดให้แก้ข้อความและริชเท็กซ์ตรงค่าที่แสดงได้ ดับเบิลคลิกค่า กดป้าย Edit หรือโฟกัสลิงก์ฟิลด์แล้วกด Enter เพื่อเปิดช่องแก้ไขปกติทับบนตัวอย่าง พร้อมเครื่องมือจัดรูปแบบ แล้วกด เสร็จสิ้น การแก้ไขยังอยู่ในร่างจนกด บันทึก ฟิลด์ชนิดอื่นและตัวแสดงผลรุ่นเก่าจะเปิดช่องที่ตรงกันในฟอร์ม ตัวแสดงผลของโมเดลอื่นเปิดใช้ได้ด้วย data-dw-editor-inplace บนมาร์กเกอร์ของบริดจ์ โดยต้องแสดงร่างที่ตรวจสอบแล้วและลิงก์ฟิลด์ เฟรมส่งเพียงฟิลด์และตำแหน่ง เอดิเตอร์ตรวจสิทธิ์และเป็นผู้เปลี่ยนค่าทั้งหมด

กับตัวแสดงผลที่ลิงก์ฟิลด์ได้ (editor bridge 3 ซึ่งไซต์ที่ generate แล้วประกาศไว้):

• ดับเบิลคลิกค่าที่แสดงผล คลิกค่านั้นพร้อม Alt, Ctrl หรือ Cmd กดป้าย Edit ของค่านั้น หรือโฟกัสแล้วกด Enter หากแก้ไขตรงตัวอย่างไม่ได้ ตัวแก้ไขจะเปิดฟิลด์ที่ตรงกันในฟอร์มและโฟกัสฟิลด์นั้น
• โฟกัสฟิลด์ในตัวแก้ไข ผลการแสดงผลจะวาดกรอบรอบทุกองค์ประกอบที่แสดงฟิลด์นั้นและเลื่อนไปยังองค์ประกอบแรก
• ในโมเดลหน้า section ชื่อเรื่อง และข้อเท็จจริง (facts) แก้ไขในตัวแก้ไขหน้า การเลือกสิ่งเหล่านี้จะเสนอ เปิดตัวแก้ไขหน้า
• การคลิกธรรมดาในผลการแสดงผลไม่ตามลิงก์ใด พรีวิวจึงยังเปิดอยู่

กับตัวแสดงผลที่รองรับเฉพาะ editor bridge 1 พรีวิวยังทำงาน และตัวแก้ไขจะแจ้งว่าลิงก์ฟิลด์ใช้ไม่ได้กับตัวแสดงผลนี้ ในพื้นที่ทำงานหน้า ตัวอย่างเว็บไซต์ ใช้ frame เดียวกัน: การเลือกจะโฟกัสฟิลด์ของ section ที่ระบุ

ตัวแสดงผลในตัว (ไซต์ที่ generate และ managed renderer) ลิงก์โมเดลหน้าและโพสต์ของ Blog ในโพสต์ ชื่อเรื่อง วันที่ ภาพปก ผู้เขียน ลิงก์หมวดหมู่และแท็ก และแต่ละบล็อกของเนื้อหา (รวมบล็อกของปลั๊กอิน ผ่านข้อความในบล็อกนั้น) ลิงก์ไปยังฟิลด์ของตน สัญญาตัวแสดงผลของทั้งสองกำหนดเส้นทางให้โมเดล post ดังนั้นหลัง generate หรือ deploy ใหม่ ให้ยืนยันและเปิดใช้ตัวแสดงผลอีกครั้ง โมเดลทั่วไปอื่นได้ลิงก์ฟิลด์เฉพาะจาก custom renderer ที่รองรับ bridge 3 ดู ข้อกำหนดข้อมูลหน้า

พรีวิวแบบ managed ฝังใน frame ได้เฉพาะโดย origin ของตัวแก้ไขที่ลิงก์ระบุ และเฉพาะเมื่อมี nonce ของตัวแก้ไข จากนั้นจะอนุญาต ancestor นั้นเพียงหนึ่งเดียวและสคริปต์ bridge ตาม hash พรีวิวหรือหน้าที่เผยแพร่อื่นทั้งหมดยังคง frame-ancestors 'none'

ดูตัวอย่างการเปลี่ยนแปลงที่ยังไม่บันทึก

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

• ไม่มีอะไรถูกบันทึก ค่าต่าง ๆ จะถูกตรวจแบบเดียวกับตอนบันทึก แล้วจึงแสดงผล ค่าเหล่านั้นไม่เปลี่ยนร่างที่บันทึกไว้ เวอร์ชันที่เผยแพร่ เลขรีวิชัน หรือข้อมูลที่อ่านผ่าน API สาธารณะ เซิร์ฟเวอร์ไม่บันทึกล็อกค่าเหล่านี้ คำขอที่ใหญ่กว่า 1 MiB จะถูกปฏิเสธ
• ต้องมีสิทธิ์แก้ไขรายการในภาษาที่แสดง ผู้อ่านจะเห็นเวอร์ชันที่บันทึกไว้
• ความสัมพันธ์ใช้ร่างล่าสุดที่บันทึกแล้วของรายการปลายทาง รวมถึงรายการที่ยังไม่เคยเผยแพร่ ระบบใช้ความสัมพันธ์ที่คุณเลือกไว้แม้ยังไม่บันทึกรายการต้นทาง แต่ไม่ดึงการแก้ไขที่ยังไม่บันทึกในรายการอื่น ความสัมพันธ์ทั่วไปและภายในคอมโพเนนต์ใช้สิทธิ์ปัจจุบันของรายการ ฟิลด์ และภาษา รวมถึงกฎซ่อนฟิลด์ส่วนตัว ภาษาใช้ลำดับสำรองของไซต์ ขยายได้ไม่เกินสี่ระดับหรือ 128 รายการ เมื่อพบวงจรจะเก็บเพียงตัวระบุ รายการที่ขยายอยู่ใน item.expanded ส่วน API สาธารณะยังอ่านเฉพาะเวอร์ชันที่เผยแพร่แล้ว
• รูปภาพคือไฟล์ที่คุณเลือกในแต่ละฟิลด์รูปภาพ พร้อมการครอปและจุดโฟกัสที่คุณตั้ง แสดงแบบเดียวกับรายการที่บันทึกแล้ว เซิร์ฟเวอร์ค้นหาแต่ละไฟล์ด้วย id ในคลังของเว็บไซต์นี้ตามสิทธิ์ปัจจุบันของคุณ และไม่ใช้ที่อยู่ที่เบราว์เซอร์ส่งมา ไฟล์ของเว็บไซต์อื่น ไฟล์ที่ไม่มีอยู่แล้ว และไฟล์ส่วนตัวที่วางในที่ที่รายการที่บันทึกแล้วจะปฏิเสธ (คือที่อื่นนอกจากฟิลด์ของโมเดลส่วนตัว) จะถูกปฏิเสธ และแผงจะบอกเหตุผล ไฟล์ส่วนตัวในฟิลด์ของโมเดลส่วนตัวจะแสดงข้อมูลของไฟล์โดยไม่มีที่อยู่ เหมือนรายการที่บันทึกแล้ว ที่อยู่ของภาษาคือที่อยู่ที่คุณพิมพ์ และรายการจะแสดงที่ที่อยู่นั้น ไม่มีอะไรถูกจอง: ไม่มีการจองที่อยู่ ไม่มีการเขียนการเปลี่ยนเส้นทาง และการแสดงตัวอย่างไม่เปลี่ยนที่อยู่ของหน้าที่เผยแพร่บนเว็บไซต์จริง
• ลิงก์ฟิลด์ใช้แบบเดียวกัน: ดับเบิลคลิกค่าที่แสดงหรือกดป้าย Edit เพื่อเปิดฟิลด์นั้น และโฟกัสฟิลด์เพื่อเน้นค่าของมัน
• โมเดลหน้าเว็บดูตัวอย่างในตัวแก้ไขหน้า ไม่ใช่ที่นี่
• ถ้ารายการถูกเปลี่ยนที่อื่น ภาษานั้นยังไม่มีเนื้อหาที่บันทึกไว้ หรือดีไซน์ของเว็บไซต์แสดงรายการไม่ได้ แผงจะคงภาพล่าสุดที่ใช้ได้ไว้และบอกเหตุผล ลองใหม่หลังแก้สาเหตุ

ตัวแสดงผลที่สร้างขึ้นและตัวแสดงผลของคุณเอง

เว็บไซต์ Astro บล็อกที่สร้างขึ้นมีตัวตรวจสอบมาให้ โดยตรวจร่างด้วยคีย์ สาธารณะ จึงไม่มีความลับของการเรนเดอร์ บัญชี เซสชัน หรือข้อมูลรับรองของผู้ให้บริการอยู่ในเว็บไซต์ และการตรวจสอบลายเซ็นไม่เรียก CMS การติดตั้งต้องมี MANAGED_RENDER_HMAC_KEY และ FRONTEND_URL หากไม่มีจะไม่มีคีย์ และ การตั้งค่า → ซอร์สโค้ดและการเผยแพร่ → ตัวเลือกสำหรับนักพัฒนา → ตัวอย่างเว็บไซต์แบบกำหนดเอง จะแจ้งไว้

1. เปิด การตั้งค่า → ซอร์สโค้ดและการเผยแพร่ → ตัวเลือกสำหรับนักพัฒนา → ตัวอย่างเว็บไซต์แบบกำหนดเอง หนึ่งครั้ง คีย์พรีวิวรายการที่ยังไม่บันทึก จะบันทึกคีย์สาธารณะของเว็บไซต์ไว้สำหรับการสร้าง
2. สร้างเว็บไซต์ใหม่และปรับใช้ เว็บไซต์ที่สร้างขึ้นจะมีคีย์สาธารณะนี้ติดมาด้วย ไม่ต้องวางอะไร ขณะที่ยังไม่มีคีย์ เว็บไซต์จะไม่ประกาศอะไร และจุดปลายทางจะตอบ 501
3. กด ยืนยันและเปิดใช้ ใน การตั้งค่า → ซอร์สโค้ดและการเผยแพร่ → ตัวเลือกสำหรับนักพัฒนา → ตัวอย่างเว็บไซต์แบบกำหนดเอง เว็บไซต์จะประกาศ entry_preview พร้อมโมเดลบล็อกและรหัสคีย์ใน /.well-known/dee-wan-renderer.json เฉพาะเมื่อมีคีย์อยู่ จากนั้น ดูตัวอย่างที่นี่ จะแสดงการเปลี่ยนแปลงที่ยังไม่บันทึก

หากต้องการแทนที่คีย์ที่สร้างขึ้น กด คัดลอกคีย์ แล้ววาง JSON ลงใน apps/site/src/owned/entry-preview.config.ts แทน null ไฟล์นี้เป็นของคุณ การสร้างใหม่จะไม่แทนที่ และค่าในไฟล์นี้มีผลเหนือคีย์ที่สร้างขึ้น

• ร่างที่ลงนามระบุเว็บไซต์ origin ของตัวแสดงผล รายการ ภาษา เวอร์ชันที่คุณโหลด ไบต์ที่ตรงกันทุกตัว และอายุ 60 วินาที ตัวแสดงผลปฏิเสธเว็บไซต์ origin รายการ ภาษา เวอร์ชัน ไบต์ origin ของตัวแก้ไข หรืออายุอื่นทั้งหมด เฟรมต้องเปิดจาก origin ของตัวแก้ไขที่เป็นผู้ลงนาม
• จุดปลายทางคือ /.well-known/dee-wan-entry-preview รับฟอร์มจากตัวแก้ไข และไม่เขียน แคช หรือบันทึกล็อกอะไรเลย
• Astro ปฏิเสธการส่งฟอร์มข้าม origin แต่เฟรมของตัวแก้ไขอยู่คนละ origin เว็บไซต์บล็อกที่สร้างขึ้นจึงปิดการตรวจนั้น และตรวจซ้ำใน src/middleware.ts สำหรับทุกที่อยู่ ยกเว้นจุดปลายทางนี้
• เปลี่ยนคีย์ สร้างคีย์ใหม่และบันทึกในบันทึกตรวจสอบเป็นการเปลี่ยนการตั้งค่าเว็บไซต์ คีย์เดิมใช้ไม่ได้ทันที: สร้างและปรับใช้เว็บไซต์ใหม่ (หรืออัปเดตค่าที่แทนที่ไว้) แล้วกด ยืนยันและเปิดใช้ อีกครั้ง ระหว่างนั้น ดูตัวอย่างที่นี่ แสดงเวอร์ชันที่บันทึกไว้ และแจ้งว่าเว็บไซต์ตรวจด้วยคีย์รุ่นเก่า
• หากเว็บไซต์ไม่ประกาศคีย์หรือประกาศคีย์รุ่นเก่า แผงจะแสดงเวอร์ชันที่บันทึกไว้และบอกเหตุผล

หากใช้ตัวแสดงผลของคุณเอง ให้คัดลอก apps/site/src/lib/entry-preview-verifier.ts จากเว็บไซต์ที่สร้างขึ้น โมดูลนี้ไม่มี import และใช้ Web Crypto Ed25519 เท่านั้น (Node 24, Cloudflare Workers, เบราว์เซอร์รุ่นปัจจุบัน) เรียก verifyEntryPreview({ envelope, body }, config, context) ด้วยสองช่องฟอร์ม envelope และ body การตั้งค่าที่วางไว้ และบริบทที่มี site_id ของตัวแสดงผล origin ของตัวเอง ตัวตนของรีลีส (renderer_contract_digest) models ที่รองรับการแสดงผล now เป็นวินาที Unix และพารามิเตอร์ editor_origin จากที่อยู่ของเฟรม เมื่อสำเร็จจะคืน item ที่ตรวจแล้วเพื่อนำไปแสดงในหน้าโพสต์ของคุณเอง มิฉะนั้นคืนการปฏิเสธพร้อม status (403, 409, 413, 422 หรือ 501) และ reason ประกาศการรองรับใน /.well-known/dee-wan-renderer.json ด้วย entry_preview: { "version": 1, "models": ["post"], "key_ids": [<kid from the configuration>] } โดยทุกโมเดลต้องมีเส้นทางด้วย entryPreviewDeclaration(config, models) สร้างการประกาศนี้ และคืน null ขณะยังไม่มีการตั้งค่า อย่าประกาศจนกว่าจุดปลายทางจะทำงาน ตัวแสดงผลที่ใช้คีย์เรนเดอร์ของการติดตั้งร่วมกัน (ตัวแสดงผลแบบmanaged) ไม่ประกาศ key_ids

ภาพบนไซต์ที่ generate แล้ว

เว็บไซต์ Astro ที่สร้างขึ้นแสดงรูปในส่วนเนื้อหา ภาพปกบล็อก และรูปผู้เขียนผ่าน deliverImage ใน apps/site/src/lib/media-presentation.ts หน้าพรีวิวและหน้าที่เผยแพร่ใช้กฎการส่งรูปเดียวกัน รูปแบรนด์ในส่วนหัวและรูปในข้อความจัดรูปแบบใช้ URL ที่บันทึกไว้

• ทุกภาพได้ width และ height จากขนาดที่บันทึกไว้ หรือจาก crop เมื่อการใช้ครั้งนั้นมี crop ภาพที่ไม่มีขนาดบันทึกไว้จะไม่ได้ค่าเหล่านี้และไม่มี srcset
• ใช้ crop และ focal point ของการใช้ครั้งนั้นเท่านั้น ภาพเดียวกันที่ใช้สองครั้งเก็บการจัดเฟรมสองชุด
• ไฟล์ที่เก็บไว้ไม่เปลี่ยนเลย

การส่งภาพแบบแปลงแล้วปิดอยู่จนกว่าคุณจะประกาศโฮสต์ media ที่โซน Cloudflare เปิด Image Transformations ไว้ ตั้งค่า imageTransformOrigins ใน apps/site/src/owned/extensions.ts เช่น ["https://media.example.com"] ค่าที่ผิดจะทำให้ build ล้มเหลวพร้อมระบุชื่อ จากนั้นภาพบนโฮสต์ที่ประกาศไว้จะส่งเป็น https://media.example.com/cdn-cgi/image/width=640,quality=85,format=auto,fit=scale-down,trim=<top>;<right>;<bottom>;<left>/<key> พร้อม srcset ที่มีขนาด 48, 96, 160, 320, 640, 960 และ 1280 พิกเซลซึ่งเล็กกว่าขนาดสุดท้าย โดยขนาดสุดท้ายคือค่าที่น้อยกว่าระหว่างความกว้างหลังจัดเฟรมกับ 1920 พิกเซล รูปที่โหลดแบบ lazy ใช้ค่าเริ่มต้น sizes="auto, 100vw" รูปที่โหลดทันทีใช้ 100vw และรูปผู้เขียนใช้ 3rem คอมโพเนนต์ที่เขียนเองกำหนด sizes ได้ โดย trim ตัด crop เป็นพิกเซลก่อนย่อขนาด ภาพอื่นทั้งหมดใช้ URL เดิม crop จะแสดงด้วย CSS (aspect-ratio, object-fit: cover, object-position) และ focal point แสดงด้วย object-position

การตรวจรับบนระบบที่ deploy แล้วเป็นขั้นตอนที่ทำด้วยมือ ทำหนึ่งครั้งต่อโฮสต์ media:

1. ในแดชบอร์ด Cloudflare เปิดโซนที่ให้บริการโฮสต์ media แล้วไปที่ Images → Transformations และเปิดการแปลงภาพให้โซนนั้น ผลที่คาด: โซนแสดงว่าเปิดแล้ว
2. เพิ่มโฮสต์ใน imageTransformOrigins แล้ว build และ deploy ไซต์
3. เปิดหน้าที่เผยแพร่แล้วที่มีภาพที่จัดเฟรมไว้ ในแผง network ของเบราว์เซอร์ คำขอภาพไปที่ /cdn-cgi/image/... บนโฮสต์ media และตอบ 200 พร้อม content type ของภาพ ผลที่คาด: ภาพแสดงตาม crop และ width/height บน img ตรงกับขนาดหลังจัดเฟรม
4. ลดความกว้างหน้าต่างเหลือ 390 พิกเซลแล้วโหลดใหม่ ผลที่คาด: เบราว์เซอร์ดึงตัวเลือกที่เล็กกว่าจาก srcset
5. ขอ URL เดิม ผลที่คาด: ได้ไบต์เดิมที่ไม่เปลี่ยน

คำตอบ 404 หรือข้อผิดพลาด 9xxx ที่ /cdn-cgi/image/ หมายความว่ายังไม่ได้เปิดการแปลงภาพให้โซนนั้น ให้เอาโฮสต์ออกจาก imageTransformOrigins จนกว่าจะเปิด

ซอร์สอ้างอิง: backend/src/api/models.ts, backend/src/lib/public-types/generate.ts, backend/src/lib/public-types/contract.ts, frontend/static/dee-wan-client.mjs, backend/src/api/content_lifecycle.ts, backend/src/lib/site-settings.ts, backend/src/lib/graduate/site-media-presentation.ts, backend/src/lib/graduate/site-emit.ts, backend/src/lib/field-link-runtime.ts และ backend/src/lib/page-contract/field-links.ts

ขั้นตอนถัดไป

อ่าน API อ่านข้อมูลสาธารณะ สำหรับสัญญาการอ่านทั้งหมด ตัวกรอง และการปฏิเสธ

---

ยังไม่เปิดตัว (pre-MVP) และยังไม่มีเวอร์ชันเสถียร
คอมมิตซอร์สโค้ด: e207e63239a627fbd2ae9c414ef7c6eb19fcfe5a (มีการแก้ไขที่ยังไม่คอมมิต)
วันที่สร้างเอกสาร (UTC): 2026-10-21T09:28:24.214Z
คอมมิตสำหรับอัปเกรด: ระบุไม่ได้: มีการแก้ไขที่ยังไม่คอมมิต. บันทึกการเปลี่ยนแปลง