Communitygithub.com

miketropi/nextora-site-composition

組合 Nextora 或 Nextora 子區塊佈景主題的表面層 — HTML 模板與模板部件、PHP 區塊樣式及其分類、頁面模板與模板階層、首頁與文章索引、從精簡模板引用的檔案系統樣式、核心查詢/歸檔/搜尋迴圈與明確查詢上下文、頁首與頁尾所有權,以及檔案系統與網站編輯器的自訂。當請求涉及登陸頁佈局、頁面模板、歸檔或搜尋組合、可重用樣式或區段、頁首/頁尾部件、查詢迴圈,或詢問為何模板檔案編輯在前端無效時使用。

nextora-site-composition 是什麼?

此技能負責管理 Nextora 系列的區塊佈景主題組合層,涵蓋 `templates/`、`parts/`、`patterns/` 目錄以及 `theme.json` 中描述這些資源的宣告。開發者或 AI 代理可使用此技能來組合登陸頁、歸檔頁、搜尋頁、頁面模板、可重用區塊樣式以及頁首/頁尾部件,同時確保遵循正確的模板階層與所有權規則。它支援基於檔案系統的工作流程,並整合 Site Editor 的資料庫自訂功能,優先重用現有區塊與樣式,而非建立新區塊。其工作流程包含解析主題根目錄、讀取現有表面、在正確模板中放置組合、決定部件所有權、以 PHP 檔案與真實標頭撰寫樣式、使用核心區塊與明確上下文組合查詢迴圈、維持準確的 theme.json 宣告、處理 Site Editor 的遮罩問題,以及針對實際站點進行驗證。它明確避免產生模擬生產內容、不必要的 PHP 頁面模板或重複的區段列表。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/miketropi/nextora-skills/tree/main/skills/nextora-site-composition

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Nextora 網站組合

擁有 Nextora 來源區塊佈景主題的組合層:templates/、parts/、patterns/ 以及描述它們的 theme.json 宣告。區塊內部細節請參閱 ../nextora-gutenberg-blocks/SKILL.md;外觀與預設資料請參閱 ../nextora-design-system/SKILL.md;子佈景主題啟動與資源請參閱 ../nextora-child-themes/SKILL.md。

要載入的參考資料

  • references/templates-and-patterns.md — 包含真實檔案名稱的模板階層、部件所有權與覆寫規則、樣式標頭與分類慣例、隱藏樣式加精簡模板的配方、查詢組合與清理輔助函式、檔案系統與資料庫的自訂、觀察到的缺陷,以及下游 WordPress 驗收配方。在步驟 3 之前載入它。
  • source-map.md — 那裡每個錨點名稱的來源。
  • quality-gates.md — 決定組合是否完成的關卡。

本地檔案優先於這些參考資料中引用的所有值。

有序工作流程

1. 解析主題根目錄並讀取本地表面

父主題是模板目錄,啟用的佈景主題是樣式表目錄:

get_template_directory();      // 父主題根目錄
get_stylesheet_directory();    // 啟用中佈景主題根目錄(子佈景主題啟用時)

依序讀取:theme.json(customTemplates、templateParts)、templates/、parts/、patterns/、目標的 blocks/*/block.json 名稱,以及 inc/ 中的查詢或模板輔助函式。子佈景主題對模板或部件的副本會覆寫父主題中同名的檔案,因此已存在的內容決定了大部分的答案。

2. 在組合任何內容之前,先找出已存在的內容

重複使用勝過發明,依此順序:

  1. 已存在且就是該區段的樣式。
  2. 已存在且已呈現該區段的區塊(父主題 nextora/* 或子佈景主題自己)。
  3. 一個由現有區塊組成的新子佈景主題樣式。
  4. 一個組合這些樣式的精簡模板。
  5. 一個子佈景主題部件覆寫 — 僅限於子佈景主題真正擁有的表面。
  6. 一個新的區塊 — 僅在請求的行為或編輯結構無法由任何現有區塊表達時。

絕不將模擬文章作為生產內容提供,也絕不複製父主題的聯絡表單後端:父主題已提供 nextora/contact-form 區塊,而範例的聯絡頁面將其組合在一個子佈景主題的包裝群組內。

3. 將組合放置在正確的模板中

套用來自 references/templates-and-patterns.md 的階層:

  • front-page.html 在存在時管理首頁;home.html 是文章索引,不是首頁的同義詞;index.html 是備用。
  • 歸檔、單一、搜尋和特定頁面的模板優先於索引備用。
  • 在 theme.json 的 customTemplates 中宣告的名稱,必須在宣告它的佈景主題中有一個對應的 templates/<name>.html。

讀取佈景主題自己的 templates/ 列表,而非猜測檔案名稱:父主題提供 front-page、home、index、archive、single、search、page、page-full-width、about-us、contact-us、frequently-asked-questions、theme-terms-conditions、theme-privacy-policy、404;範例子佈景主題提供自己一組不同名稱的集合。

4. 決定部件所有權,然後引用部件

一個 wp:template-part 引用會首先解析樣式表目錄,因此一個子佈景主題的 parts/header.html 會在其使用的任何地方取代父主題的頁首。

  • 如果子佈景主題沒有理由擁有父主題的頁首/頁尾,則保留它們:不要新增複製的部件。
  • 如果子佈景主題擁有某個部件,則給予它一個子佈景主題擁有的主體,並在引用中說明;不要留下一個會固定在父主題副本的 theme 屬性。
  • 範例子佈景主題的 parts/header.html 和 parts/footer.html 各是一個區塊引用(nextsaas/site-header、nextsaas/site-footer);父主題的頁首部件則組合了 nextora/scrolling-promotion 和 nextora/header。
  • 來源中的引用語法在子佈景主題中是 {"slug":"header","tagName":"div"},在父主題中是 {"slug":"header","tagName":"header","area":"header"}。符合目標自己的慣例;絕不硬編碼檔案系統路徑。

5. 以 PHP 檔案與真實標頭撰寫樣式

樣式位於 patterns/*.php。它們的註冊來自檔案標頭,而非來自 register_block_pattern() 呼叫 — 兩個來源佈景主題都沒有呼叫它;兩者都只用 PHP 註冊分類。所需的標頭欄位和別名規則在 references/templates-and-patterns.md 中:

  • Title、Slug: <child-slug>/<pattern-slug>(唯一)、Categories,以及一個說明何時使用它的 Description。
  • 樣式主體是編輯器在插入時所插入的序列化區塊標記,從標頭註解的結尾 */ 之後開始。
  • 它必須可解析,只使用已註冊的區塊,並在插入後保持可編輯狀態。

6. 為全頁組合指定恰好一個權威

對於一個新的全頁組合,將區段列表放在一個隱藏的檔案系統樣式中 — 標頭中使用 Inserter: no — 並從一個精簡模板中引用它:

<!-- wp:template-part {"slug":"header","tagName":"div"} /-->

<!-- wp:pattern {"slug":"nextfolio/page-landing"} /-->

<!-- wp:template-part {"slug":"footer","tagName":"div"} /-->

不要同時將區段列表重複放入模板中。範例目前持有兩次相同的列表(patterns/page-home.php 和 templates/front-page.html),而父主題的模板內嵌了帶有 metadata.patternName 的樣式標記;這種重複正是此規則為新工作所取代的。當僅編輯一個現有區塊時,保留現有的重複 — 只有在區段內容實際變更時才更新其他副本。

7. 使用核心區塊與明確上下文組合查詢

  • 歸檔、文章索引、搜尋和文章詳情委託給帶有 "inherit":true 的 wp:query,因此主查詢提供上下文;範例的 index.html、home.html、archive.html 和 search.html 都這樣做。
  • 從 core/post-template 加上 core/post-* 區塊建立迴圈,添加 wp:query-pagination,並始終提供 wp:query-no-results。
  • 對於單篇文章表面,使用 wp:query-title、core/post-title、core/post-content、core/comments + core/comment-template + wp:comments-pagination + wp:post-comments-form,而不是傳統迴圈。
  • 一個開始其自己迴圈的區塊應傳遞經過清理的屬性:重用子佈景主題的 inc/blocks/query.php 輔助函式(如果存在),否則將頁面大小限制在允許範圍內,並驗證文章類型、分類法和詞彙。預備 SQL 不能替代此驗證。

8. 保持 theme.json 宣告準確

僅為佈景主題擁有的表面,以及僅為非核心模板的名稱,宣告 customTemplates 和 templateParts 條目。請參閱 references/templates-and-patterns.md 以了解範例中觀察到的重新宣告以及新工作的規則。

9. 考慮到 Site Editor

檔案系統模板和部件可能被 Site Editor 中儲存的資料庫自訂所遮罩。如果檔案編輯沒有改變前端,請在觸碰檔案之前尋找已儲存的模板或樣式。絕不靜默覆寫真實站點的自訂;僅在可丟棄的環境中檢查或重置。

10. 針對執行中的站點驗證

在前端解析每個模板和部件,確認樣式已插入並保持可編輯,確認請求的 WordPress 最低版本和當前支援的發行版本,並執行 references/templates-and-patterns.md 中的瀏覽器配方。將任何你未實際演練的項目標記為未驗證。

完成檢查

  • 每個使用的模板和部件都解析到預期的佈景主題;沒有孤立的 theme 屬性將父主題部件固定在子佈景主題模板中。
  • 沒有不必要的區塊、沒有經典 PHP 頁面模板、沒有模擬的生產內容。
  • 新的全頁組合:一個隱藏樣式中的權威,從一個精簡模板中引用;沒有重複的區段列表。
  • 樣式可解析,使用已註冊的區塊,擁有唯一的別名,且其分類是佈景主題在 PHP 中註冊的那些。
  • 查詢迴圈使用明確上下文、經過清理的屬性以及一個無結果狀態。
  • theme.json 僅宣告擁有的、非核心的模板名稱。
  • 已套用 quality-gates.md,包括其組合驗收部分。

邊界

僅限 Markdown 指令:無執行時期腳本、產生器、複製的佈景主題樹或安裝程式,且不得編輯父主題或範例子佈景主題。父主題的樣式庫和範例的組合是供讀取的證據,而非要複製的檔案。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

miketropi/nextora-child-themes

Create, bootstrap or audit a child theme of the Nextora parent block theme — the style.css header with Template nextora, the functions.php load order, the single version constant kept in sync with the header, the front-end and editor-canvas asset pipeline with its parent handle dependencies, the child block registrar and inserter category, PHP/i18n conventions, and the optional feature-file layout. Use when a request names a Nextora child, a new child theme name or slug, a child theme header or version bump, child CSS/JS enqueueing, editor canvas styles, a child block folder or block category, porting Nextsaas conventions into a new child, or asks why child code cannot call the parent at file scope. Pair with nextora-design-system for any child that must follow palette or visitor font/colour switching.

miketropi/nextora-ecosystem

Entry point for work on the Nextora block-theme ecosystem — child themes, Gutenberg blocks, design presets and the visitor colour/font switcher, and template/part/pattern composition. Use when a request mentions Nextora or a Nextora child theme, when the task spans more than one of those areas, or when you need the source map and production quality gates for this ecosystem before writing code. Also use to decide which specialist skill a multi-part request needs.

nextora-design-system

Own colours, typography, spacing tokens, style variations and the optional visitor colour/font switcher for the Nextora parent theme and its child themes. Use when a request mentions a palette, colour role, preset slug, font family or font preset, theme.json settings, Tailwind @theme aliases, CSS custom properties, a style variation, "follow the palette", "must switch with the visitor's choice", scoped block colours, or appearance for a new child theme.

nextora-gutenberg-blocks

Build or change Gutenberg blocks in the Nextora parent theme or a Nextora child theme — block.json registration, typed attributes, native visual editing with RichText and media, InspectorControls settings panels, repeatable list editors with modal item editing, render.php output, view scripts, block style variations, and the esbuild block pipeline. Use when a request mentions a block, block.json, edit.tsx, index.tsx, render.php, ServerSideRender, InnerBlocks, a repeater or list editor, a modal item form, an inspector panel, a block category, or "add/restyle a section block" for Nextora.

相關技能