SeedTemplate Framework
Structure-First 的結構化內容框架，透過單一 st-* 語意標記定義 Node / Slot / Data Binding，將視覺排版與資料結構完美分離。
此頁為系統入口，提供規格文件、概念架構與範例快速連結。
架構概念：規則對應到結構化模板
SeedTemplate 允許非工程人員直接編輯富文本模板，系統能自動根據 st-* 標記抓取並驗證對應的 JSON 結構。以下圖為例，左側定義了常見的 Book
(書籍) 結構需求，而右側的 Structural Template 以直觀的 HTML 標籤實現這些規則。
💡 後端整合規範：
當與 Granary.Api 等 SeedTemplate 預設後端服務搭配時，傳遞的 JSON 結構中，其 Metadata
物件必須包含 docType (指定內容類別) 以及 id (資源唯一識別碼) 兩個關鍵屬性，系統才能正確處理儲存與讀取請求。
graph LR
subgraph Rules["JSON Structure Rules"]
direction TB
Root["Root: Book"]
Meta["Metadata"]
DocType["docType: 'book'"]
ID["id (uses st-type='id')"]
Chaps["chapters
(List 1..N)"] Root --> Meta Root --> Chaps Meta --> DocType Meta --> ID end subgraph HTML["Structural Template (HTML)"] direction TB HTMLRoot["< article st-node='Book' >"] HTMLMeta["< section st-node='Metadata' >"] HTMLDocType["< input st-field='metadata.docType' value='book' readonly >"] HTMLId["< input st-type='id' st-field='metadata.id' >"] HTMLSlots["< ol st-slot='Chapter'
st-list-field='chapters' >"] HTMLRoot --> HTMLMeta HTMLRoot --> HTMLSlots HTMLMeta --> HTMLDocType HTMLMeta --> HTMLId end Root -.映射.-> HTMLRoot Meta -.映射.-> HTMLMeta DocType -.映射.-> HTMLDocType ID -.映射.-> HTMLId Chaps -.映射.-> HTMLSlots classDef jsonBox fill:#f8fafc,stroke:#94a3b8,stroke-width:2px,color:#0f172a classDef htmlBox fill:#eff6ff,stroke:#60a5fa,stroke-width:2px,color:#1e3a8a class Root,Meta,Chaps,DocType,ID jsonBox class HTMLRoot,HTMLMeta,HTMLDocType,HTMLId,HTMLSlots htmlBox
(List 1..N)"] Root --> Meta Root --> Chaps Meta --> DocType Meta --> ID end subgraph HTML["Structural Template (HTML)"] direction TB HTMLRoot["< article st-node='Book' >"] HTMLMeta["< section st-node='Metadata' >"] HTMLDocType["< input st-field='metadata.docType' value='book' readonly >"] HTMLId["< input st-type='id' st-field='metadata.id' >"] HTMLSlots["< ol st-slot='Chapter'
st-list-field='chapters' >"] HTMLRoot --> HTMLMeta HTMLRoot --> HTMLSlots HTMLMeta --> HTMLDocType HTMLMeta --> HTMLId end Root -.映射.-> HTMLRoot Meta -.映射.-> HTMLMeta DocType -.映射.-> HTMLDocType ID -.映射.-> HTMLId Chaps -.映射.-> HTMLSlots classDef jsonBox fill:#f8fafc,stroke:#94a3b8,stroke-width:2px,color:#0f172a classDef htmlBox fill:#eff6ff,stroke:#60a5fa,stroke-width:2px,color:#1e3a8a class Root,Meta,Chaps,DocType,ID jsonBox class HTMLRoot,HTMLMeta,HTMLDocType,HTMLId,HTMLSlots htmlBox
Template Rules (Conceptual)
Book Template Rules
Structure:
- Root: Book
- Metadata
- docType: "book"
- id (use st-type="id")
- Title
- Chapter+
- chapter.title
- Body (Paragraphs)
- paragraph.text
- Notes
- note.text
HTML Structural Markers
<article st-node="Book">
<section st-node="Metadata">
<input st-field="metadata.docType" value="book" />
<input st-type="id" st-field="metadata.id" />
</section>
<header st-node="Title">
<input st-field="title.text" />
</header>
<ol st-slot="Chapter" st-list-field="chapters" st-q="+">
<li st-node="Chapter" st-repeat="Chapter">
<input st-field="chapter.title" />
<section st-node="Body">
<ol st-slot="Paragraph" st-list-field="body.paragraphs" st-q="*">
<li st-node="Paragraph" st-repeat="Paragraph">
<input st-field="paragraph.text" />
</li>
</ol>
</section>
<ol st-slot="Notes" st-list-field="notes" st-q="*">
<li st-node="Notes" st-repeat="Notes">
<input st-field="note.text" />
</li>
</ol>
</li>
</ol>
</article>
Framework Guide
閱讀框架特色、核心規則與導覽。
Template Spec
查看 `st-*` 模板規格與動作語意。
Frontend Example
template / scripts / style / data 分離，並共用 framework engine。