portable-text-conversion

โดย sanity-io

แปลงเนื้อหา HTML และ Markdown เป็นบล็อก Portable Text สำหรับ Sanity ใช้เมื่อย้ายเนื้อหาจาก CMS รุ่นเก่า นำเข้า HTML หรือ Markdown เข้าสู่ Sanity…

npx skills add https://github.com/sanity-io/agent-toolkit --skill portable-text-conversion

Portable Text Conversion

Convert external content (HTML, Markdown) into Portable Text for Sanity. Three main approaches:

  1. markdownToPortableText — Convert Markdown directly using @portabletext/markdown (recommended for Markdown)
  2. htmlToBlocks — Parse HTML into PT blocks using @portabletext/block-tools (for HTML migration)
  3. Manual construction — Build PT blocks directly from any source (APIs, databases, etc.)

Portable Text Specification

Understand the target format before converting. PT is an array of blocks:

[
  {
    "_type": "block",
    "_key": "abc123",
    "style": "normal",
    "children": [
      {"_type": "span", "_key": "def456", "text": "Hello ", "marks": []},
      {"_type": "span", "_key": "ghi789", "text": "world", "marks": ["strong"]}
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "jkl012",
    "style": "h2",
    "children": [
      {"_type": "span", "_key": "mno345", "text": "A heading", "marks": []}
    ],
    "markDefs": []
  },
  {
    "_type": "image",
    "_key": "pqr678",
    "asset": {"_type": "reference", "_ref": "image-abc-200x200-png"}
  }
]

Key rules:

  • Every block and span needs _key (unique within the array)
  • _type: "block" is for text blocks; custom types use their own _type
  • markDefs holds annotation data; marks on spans reference markDefs[*]._key or are decorator strings
  • Lists use listItem ("bullet" | "number") and level (1, 2, 3...) on regular blocks

Conversion Rules

Read the rule file matching your source format:

  • Markdown → Portable Text: rules/markdown-to-pt.md — @portabletext/markdown with markdownToPortableText (recommended)
  • HTML → Portable Text: rules/html-to-pt.md — @portabletext/block-tools with htmlToBlocks
  • Manual PT Construction: rules/manual-construction.md — build blocks programmatically from any source

Note: @sanity/block-tools is the legacy package name. Always use @portabletext/block-tools for new projects. The API is the same.

Skills เพิ่มเติมจาก sanity-io

tdd
sanity-io
การพัฒนาที่ขับเคลื่อนด้วยการทดสอบด้วยวงจรแดง-เขียว-ปรับปรุง ใช้เมื่อผู้ใช้ต้องการสร้างฟีเจอร์หรือแก้ไขบั๊กโดยใช้ TDD กล่าวถึง "แดง-เขียว-ปรับปรุง" ต้องการ...
performance-optimization
sanity-io
ปรับปรุงประสิทธิภาพการทำงานของแอปพลิเคชัน ใช้เมื่อมีข้อกำหนดด้านประสิทธิภาพ เมื่อสงสัยว่าประสิทธิภาพลดลง หรือเมื่อ Core Web Vitals หรือเวลาโหลด...
content-experimentation-best-practices
sanity-io
แนวทางที่มีโครงสร้างสำหรับการออกแบบ ดำเนินการ และวิเคราะห์การทดสอบเนื้อหาเพื่อปรับปรุงอัตราการแปลงและการมีส่วนร่วม ครอบคลุมกรอบสมมติฐาน การเลือกเมตริก การคำนวณขนาดตัวอย่าง และการทดสอบนัยสำคัญทางสถิติสำหรับการทดสอบแบบ A/B และหลายตัวแปร รวมถึงแหล่งข้อมูลโดยละเอียดเกี่ยวกับค่า p ช่วงความเชื่อมั่น การวิเคราะห์กำลัง และวิธีแบบเบย์สำหรับการตีความผลลัพธ์ มีรูปแบบการบูรณาการ CMS สำหรับจัดการตัวแปรในระดับฟิลด์และการเชื่อมต่อภายนอก...
content-modeling-best-practices
sanity-io
แนวทางการสร้างแบบจำลองเนื้อหาที่มีโครงสร้างสำหรับการออกแบบสคีมา ความสามารถในการนำกลับมาใช้ใหม่ และการส่งมอบเนื้อหาหลายช่องทาง ครอบคลุมหลักการสำคัญ: การจัดการเนื้อหาในฐานะข้อมูลมากกว่าหน้าเว็บ การรักษาแหล่งข้อมูลเดียวที่เชื่อถือได้ การออกแบบสำหรับช่องทางในอนาคต และการปรับปรุงขั้นตอนการทำงานของผู้เขียน รวมถึงกรอบการตัดสินใจสำหรับการอ้างอิงเทียบกับวัตถุที่ฝังตัว การแยกส่วนความรับผิดชอบ และรูปแบบการนำเนื้อหากลับมาใช้ใหม่ ให้คำแนะนำด้านอนุกรมวิธานและการจำแนกประเภทสำหรับแนวทางแบบราบ ลำดับชั้น และแบบแง่มุม ใช้ได้กับ...
portable-text-serialization
sanity-io
เรนเดอร์และซีเรียลไลซ์ Portable Text เป็น React, Svelte, Vue, Astro, HTML, Markdown และข้อความธรรมดา ใช้เมื่อต้องการใช้งานการเรนเดอร์ Portable Text ในฟรอนต์เอนด์ใดๆ…
sanity-best-practices
sanity-io
แนวทางปฏิบัติที่ดีที่สุดและคู่มือการผสานรวมที่ครอบคลุมสำหรับการพัฒนา Sanity CMS ในหลากหลายเฟรมเวิร์กและหัวข้อ ครอบคลุมการผสานรวมเฟรมเวิร์กมากกว่า 10 รายการ รวมถึง Next.js, Nuxt, Astro, Remix, SvelteKit และ Angular พร้อมรูปแบบเฉพาะของเฟรมเวิร์กและคำแนะนำในการตั้งค่า รวมถึงคู่มือหัวข้อสำหรับการออกแบบสคีมา การปรับแต่งคิวรี GROQ, Visual Editing, Portable Text, รูปภาพ, TypeGen, การแปลภาษา และการย้ายเนื้อหา มีโครงสร้างอ้างอิงด่วนสำหรับโหลดเฉพาะคู่มือที่เกี่ยวข้องตามประเภทงาน...
sanity-migration
sanity-io
วางแผน ดำเนินการ และตรวจสอบการย้ายข้อมูลจากระบบ CMS และระบบเนื้อหาอื่น ๆ มาสู่ Sanity ใช้เมื่อต้องการย้ายหรือเปลี่ยนแพลตฟอร์มไปยัง Sanity จาก AEM, Adobe Experience Manager, Contentful, Strapi, Webflow, WordPress, Payload, Drupal, ไฟล์ Markdown/MDX/frontmatter, การส่งออก WXR/XML, API ของ CMS, การดัมพ์ฐานข้อมูล, HTML แบบคงที่ หรือเมื่อออกแบบขั้นตอนการทำงานสำหรับการสกัด การแปลง การแปลง Portable Text การย้ายสินทรัพย์ การเปลี่ยนเส้นทาง การตรวจสอบความถูกต้อง และการตัดโอเวอร์
data-analysisdatabasedevelopment
seo-aeo-best-practices
sanity-io
คำแนะนำการปรับแต่ง SEO และ AEO อย่างครอบคลุม ครอบคลุมเมทาดาตา ข้อมูลที่มีโครงสร้าง EEAT และความพร้อมสำหรับ AI ครอบคลุมทั้งการปรับแต่งเครื่องมือค้นหาแบบดั้งเดิม (SEO) และการปรับแต่งเครื่องมือค้นหาคำตอบด้วย AI (AEO) บน Google, ChatGPT, Perplexity และแพลตฟอร์มที่คล้ายกัน รวมถึงพื้นฐานทางเทคนิคของ SEO: เมทาดาตา, แท็ก Open Graph, แผนผังเว็บไซต์, robots.txt, hreflang และการกำหนดค่า SEO ระหว่างประเทศ มีรูปแบบข้อมูลที่มีโครงสร้างแบบ JSON-LD สำหรับสคีมาบทความ, คำถามที่พบบ่อย, เส้นทางนำทาง และผลิตภัณฑ์ ดำเนินการ...