Aumframe — 官方手冊

Aumframe 是 WordPress 的視覺化設計工具。它不要求特定的佈景主題，也不需要其他外掛。

1. Aumframe 的運作方式

多數頁面建構器是將版面附加在一篇文章上。Aumframe 將設計附加在一條規則上， 由規則決定該設計接管前台的哪些網址。

這種路由模型帶來兩項實際差異：

• 一份設計可以套用於每一篇部落格文章、每一個分類彙整頁、404 頁面， 或由規則定義的其他網址集合。
• 當設計接管某個網址時，它會取代佈景主題原本為該網址輸出的內容。 因此在下方的範例中，佈景主題的頁首與頁尾並不存在。

介面上對規則的說明為：“The rules decide which front-end URLs this design takes over.”

2. 安裝

無須額外設定。安裝並啟用外掛即可。

1. Aumframe 已啟用，且是此測試站台上唯一安裝的外掛。
2. Aumframe 只新增一個頂層選單項目。其子項目（Forms、Inquiries、Content Model、 Translate layouts）將在後續章節說明。

3. Aumframe 主畫面

1. New blank design —— 建立一份僅含根框架的設計並在設計器中開啟。 從零開始建立設計時使用此選項。
2. Saved templates —— 列出所有已儲存的設計，以及各自的類型、規則與優先序。 新站台上此列表為空。
3. Import a scene —— 接受 scene JSON。瀏覽器會在送出前將 scene 編譯為 HTML 與 CSS； PHP 不編譯節點樹，因此本產品僅有單一套渲染實作。本節的操作流程不需要匯入 scene。

4. 建立設計

按下 New blank design，設計器隨即開啟。

1. INSERT —— 十一種基本元件。點選可將元件插入頁面末端，或拖曳至畫布上。 下方的 LAYERS 顯示節點樹；空白設計起始於單一個 Page 節點，排列方式為垂直堆疊。
2. 中央為畫布。虛線外框為根框架。
3. 右側為 INSPECTOR —— 未選取元素時為空白。
4. Save。其旁為 Preview 與 ▶ Live。
5. Desktop / Tablet / Mobile —— 選擇畫布上顯示的斷點。 個別斷點的數值在 inspector 中另行設定，參見 §5。

4.1 新增標題

在 INSERT 中點選 Heading。元件出現在畫布上並處於選取狀態。 inspector 預設開啟於 Style，切換至 Content 即可輸入文字：

1. Content —— 文字本身。
2. Tag —— h1 … h6。此為標題在文件大綱中的層級，與其視覺大小無關。 請先選定正確的層級，再於 Style 中調整尺寸。

4.2 新增內文

點選 Text，切換至 Content 並輸入一段文字，然後查看 inspector：

1. Content / Style / Motion / Data —— 選取元素的四個分頁。
2. Default / Hover / Pressed / Focus / Open / Scrolled … —— 目前編輯的數值所屬的狀態。 Default 代表「一般情況」。
3. Desktop / Tablet / Mobile —— 這些數值所屬的斷點。

每個數值都屬於特定的狀態 × 斷點組合。若變更未如預期呈現，請先確認目前選取的狀態與斷點。

其下的 Style 分為 Layout（可見性）、Size（Width/Height，各有 Fixed · % · Fill · Hug 及 min/max 限制）、Position（In flow · Absolute · Sticky · Fixed）、 Spacing 等群組。

4.3 設定設計的路由

未設定路由的設計不會出現在站台上。開啟 ⋯ → Template settings：

1. Name —— 僅供後台辨識，訪客不會看到。
2. Type —— 六個選項，決定該設計可接管哪些網址：

選擇 A single page，接著選定頁面：

1. Page —— “You have to pick one. Left empty, this design never appears on any URL.”

按下 Save settings，再按頂端的 Save。

4.4 檢查前台結果

開啟已綁定的頁面：

佈景主題的頁首與頁尾已不存在，整份文件即為該設計。

若需在多份設計之間共用頁首與頁尾，請使用 Site shell 類型， 而非在每份設計中各自複製一份。參見 §7。

5. 排版頁面

前面幾節說明的是介面控制項的位置。Aumframe 的版面由巢狀的容器構成， 每個容器定義其子元素的方向、間距與尺寸。

本節將建立一個文字與圖片並排的雙欄版面，再將其在 Mobile 斷點下改為垂直堆疊。

5.1 建立區塊容器

插入一個 Container，選取後開啟 Style：

1. Arrangement —— Stack · Grid · Free · Merge into parent。 Stack 會將子元素排成一列，適用於大多數線性版面。
2. Direction —— Horizontal · Vertical（以及反向）。此項控制子元素的排列方向。
3. Gap —— 子元素之間的間距。同層元素之間的間距由父容器控制， 而非在各子元素上加入 margin。
4. Padding —— 容器內側、環繞內容的留白。⛓ 切換鈕可連動四邊； 連動狀態下為 Top 輸入數值，四邊會套用相同數值。

設定 Direction: Horizontal、Gap: 48、Padding: 56。

5.2 建立巢狀結構

INSERT 面板會依目前的選取狀態，標示下一個元素將插入的位置：

若要將元素插入容器內部，請先選取該容器。不需要另外瞄準放置區域。

在選取區塊容器的狀態下插入另一個 Container，它會被加入區塊內部， 作為文字欄使用。設定 Width: Fill、Direction: Vertical 與 Gap: 16， 再於其中插入一個 Heading 與一個 Text：

LAYERS 樹狀圖顯示目前的節點階層。本範例中為： Page → Container → Container → Heading, Text。

5.3 Fill、Hug 與 Fixed 尺寸模式

每個元素的 Width 與 Height 皆使用四種模式之一。面板會顯示所選模式的說明：

Width · limits（Min / Max）可約束最終尺寸。設定為 Fill 且 Max 480 的圖片 會隨版面放大，但不會超過 480px。

5.3b 其他排列模式

排列控制項提供四種模式。Stack 處理線性版面；其餘三種分別支援格線、 自由定位與併入父層的版面。編輯器為每種模式提供一行說明：

Merge into parent 會移除容器自身的方框。面板說明為： “Background, border, padding and radius stop working — there is no box left to paint.” 當子元素需要直接參與祖父層的版面時，使用此模式。

5.4 加入第二欄

重新選取外層的區塊容器。請透過 LAYERS 中的列來選取，以便與巢狀的文字欄區分：

若文字欄仍處於選取狀態，下一個插入的元素會被放入欄的內部，而非其旁。 插入第二欄之前，請先在 LAYERS 中確認選取的節點。

接著插入一個 Image。它會落在區塊內、文字欄之後，形成第二欄。設定 Width: Fill：

最終的結構為：區塊使用水平容器，各欄使用垂直容器，內容元素置於欄內。

5.5 設定 Mobile 斷點

將頂端工具列切換至 Mobile，選取區塊容器，設定 Direction: Vertical：

1. Direction 僅針對 Mobile 變更。Desktop 仍為 Horizontal。

斷點上的數值是覆寫，而非另一套獨立的版面。本範例中只有 Direction 在 Mobile 下被覆寫； 未設定 Mobile 覆寫值的項目，繼續沿用 Desktop 的數值。

編譯後的樣式表內容如下：

.af-n_1 { display: flex; flex-direction: row; }
@media (max-width: 640px) { .af-n_1 { flex-direction: column; } }

5.6 儲存、綁定與驗證

⋯ → Template settings，輸入名稱，Type: A single page，選定頁面， 按 Save settings，再按 Save。

實際頁面上量測到的版面如下：

5.7 兩份設計對應同一個網址

若兩份設計命中同一個網址，只有其中一份會被渲染。當兩者優先序相同時， 從前台無法直接判斷實際採用的是哪一份。Saved templates 表格會列出每份設計的規則 與優先序，可用於診斷路由衝突。

5.8 建立完整的模組

先前的範例採用最簡化的樣式，以便清楚呈現版面機制。下方的 hero 區塊使用相同的控制項， 直接在設計器中建立，未匯入任何 scene：

其所使用的元素皆來自前面各節：一個水平容器（深色填滿、padding 96、gap 64）， 內含一個垂直文字欄（eyebrow 13px、字距加寬、全大寫；標題 58px / 字重 700 / 行高 1.04； 內文 19px / 行高 1.62），旁邊配置一張圖片（Fill、max 560、圓角 18）。

新插入的 Text 會繼承前一個同層元素的排版設定。 在上述範例中， 內文段落繼承了 eyebrow 的 uppercase + tracking 2.4 + weight 600。 插入之後，請明確重設不應沿用的屬性（Letter case: unchanged、Tracking 0、 Weight: regular）。Heading 使用另一組預設值，不受此行為影響。

6. 將設計綁定到內容

直接輸入在設計中的靜態文字，只屬於該份設計。綁定（binding）會將節點連接到 當前所檢視內容的某個欄位，使一份設計能夠呈現多篇文章或其他內容項目。

6.1 Data 分頁

選取任一文字節點並開啟 Data：

1. Content —— 文字的來源。Not bound 表示「使用自行輸入的內容」。 否則請選擇一個欄位：

| | | |---|---| | post.title | 文章標題 | | post.excerpt | 摘要 | | post.content | 內文（格式化文字） | | post.date | 日期 | | post.url · post.author.name · post.author.url | | | post.thumbnail.url · .alt · .hasImage | 精選圖片 | | site.title · site.description · site.url · site.logo … | 站台層級的數值 |

1. Link URL —— 將元素的連結目標與其顯示內容分開綁定。 標題綁定 post.title、連結綁定 post.url 的卡片，即構成一張完整的「文章卡」。
2. Let a field decide whether it shows —— 條件顯示。綁定至 post.thumbnail.hasImage 後，沒有精選圖片的文章上該元素會整個隱藏， 而不會留下空白。

加入綁定後會出現第四個控制項：Show when there is nothing. 當綁定解析為空值時，前台會呈現此處填入的內容。若留空，該節點在前台不會輸出任何替代內容。

建立三個綁定節點：標題、日期、內文。

畫布上仍顯示節點的佔位內容，因為該處並未渲染任何特定文章。綁定於前台才會解析。

6.2 將設計套用至內容類型

若要讓綁定後的設計套用於整個內容類型，請開啟 ⋯ → Template settings → Type: Content template：

• “Every post, or everything of one content type.”
• Content type —— 文章填 post，頁面填 page，或自訂類型的 slug。
• “One rule takes over every piece of content of that type. With no specific ID it applies site-wide.”

此設定寫出的規則為 {"kind":"singular","post_type":"post"}。

6.3 驗證內容範本

兩篇不同的文章、同一份設計，未另行撰寫任何內容：

設計定義呈現方式，WordPress 提供被綁定的內容。符合規則的新文章會沿用同一份設計， 無須在設計器中另行調整。

6.4 列表：query 與 Loop

綁定後的節點顯示的是當前內容項目的欄位。若要呈現列表（例如部落格索引、 「相關作品」或三個精選項目），需要兩個部分：

1. 一個 Data query，指定要擷取哪些內容；
2. 一個 Loop，指向該 query。其第一個子元素為單列的範本，Loop 會按結果筆數重複它。

插入一個 Loop。inspector 中其名稱為 Repeater，而 INSERT 面板顯示 “Laid out as a 3-column grid” —— 因此 Loop 本身就是一個預設啟用 Grid 排列的容器。

其 Data 分頁中有 Loop source 區段，初始狀態下無可用項目： “This loop has nothing to repeat over yet.”

建立 query

Data → Data queries → ＋ New.

1. Data source —— Content · Terms · This page’s query · A field on this content · Breadcrumb。Content 表示「擷取一批文章」。This page’s query 則是沿用 WordPress 已為當前網址解析完成的結果：“Search result pages must use it, and archives need it to paginate.”
2. Content type —— Posts · post、Pages · page，或站台上任一自訂類型。
3. How many —— 筆數。
4. Order by —— Publish date · Title · Manual order · Random · Comment count · Custom field， 並另有 Direction。

其下另有：Filter by taxonomy、Exclude the current post（製作「相關文章」時請開啟， 否則讀者當前閱讀的文章會出現在自己的列表中）、Only where a field is…、 以及 Follow the current term。

設定為「依發佈日期取 3 篇」：

將 Loop 連接至 query

重新選取 Loop，將 Repeat over 設為該 query：

• Repeat over —— 未設定時，Loop 在前台不會輸出任何內容。 若列表未顯示，請先確認此欄位是否指向預期的 query。
• Name for one row —— 預設為 post。子元素的綁定使用此名稱， 建立綁定後再變更名稱，需要一併更新那些綁定。

建立單列範本

在 Loop 內插入一個 Container，並加入綁定 post.title 的 Heading 與綁定 post.excerpt 的 Text，綁定方式與 §6.1 相同。第一個子元素即為單列範本， Loop 會為每一筆結果重複它。

儲存設計並綁定至頁面，結果如下：

實際儲存的資料為：

queries:  { "q1": { "postType": "post", "limit": 3, "orderby": "date", "order": "DESC" } }
Loop:     { "as": "post", "queryId": "q1" }
children: post.title · post.excerpt

已知問題，1.21.0 已修正。 在該版本之前，選取 Loop 並開啟 Data 分頁會導致設計器 當機 —— Loop source 面板並不存在，因此 loop 的 query 只能透過匯入 scene JSON 設定。 請先將舊版更新後再依本節操作。

6.5 彙整頁與當前頁面的 query

§6.4 使用自訂 query 擷取內容。彙整頁的運作方式不同：WordPress 已經為當前網址 （例如分類頁、標籤頁或文章列表頁）解析出文章集合，設計應直接呈現該既有的 query。 另建一個內容 query 會忽略當前的彙整脈絡，並使分頁失效。

因此需將 query 的 Data source 設為 This page's query：

“Uses this page's own query results. Search result pages must use it, and archives need it to paginate.”

接著設定 ⋯ → Template settings → Type: Archive template：

1. Taxonomy —— category、post_tag 或自訂分類法。 *“Leave it empty for the post list page.”*
2. Content type —— 留空表示不限。

兩者皆留空時，該設計涵蓋站台上所有彙整頁；填入其一則僅涵蓋該項。

分頁

顯示四十篇中十篇的彙整頁，需要通往其餘三十篇的連結。插入一個 Form / shortcode 元件並填入 [aum_pagination]：

在一個含四篇文章的分類、且「部落格頁面最多顯示 2 篇」的設定下，實測結果如下：

在第 2 頁，Loop 顯示的是另一組文章，而設計本身並未改變。這確認了 Loop 使用的是 當前頁面的 query。

當文章數量不足一頁時，WordPress 不會輸出分頁連結，該 shortcode 也不會產生輸出。

站台根目錄並非彙整頁。 當 Settings → Reading 設為「Your latest posts」時， / 會將自身回報為首頁（front page）而非彙整頁，因此彙整範本不涵蓋它。 請為根目錄另行建立設計並使用 Type: Front page（1.24.0 新增 —— 在此之前， 即使引擎已支援該規則，選項並未出現在列表中）。

7. Site shell：共用的頁首與頁尾

當設計接管某個網址時，佈景主題的頁首與頁尾不會被渲染。Site shell 可為這些設計 提供共用的外層結構。

shell 本身不比對任何網址，而是讓各頁面的設計渲染於其內部。設定頁的說明如下： “A shell takes part in no URL matching. Drop in a ‘slot’ primitive and the content template’s output fills it. It works under any theme — the header and footer come from here, not from the theme.”

7.1 建立 Site shell

新增設計 → ⋯ → Template settings → Type: Site shell → Save settings。

接著依頁面的閱讀順序建立結構：

1. 頁首用的 Container —— 設定 Direction: Horizontal、加入 padding， 並在其中放置一個 Heading；
2. 一個 Content slot（Primitives，左下角）；
3. 頁尾用的 Container。

完成後的 shell 具有下列圖層結構：

Page
  Container      ← 頁首
    Heading
  Content slot   ← 各頁面自身的設計渲染於此
  Container      ← 頁尾
    Text

按下 Save。shell 沒有路由需要設定。

7.2 驗證 Site shell

§5 與 §6 的設計未作任何變更。儲存 shell 之後，各設計都渲染於其內部：

三份不同的設計 —— 由內容範本渲染的文章、以 Loop 建立的索引，以及一個單獨的頁面 —— 上方皆為同一組頁首，下方皆為同一組頁尾。啟用中的佈景主題仍為 Twenty Twenty-Five， 而其中沒有任何部分來自該佈景主題。

7.3 Site shell 的使用要求

未包含 content slot 的 shell，渲染時不會帶入頁面本身的設計。 由於 shell 一經儲存 即於全站生效，請在發佈 shell 之前先加入必要的 content slot。

每個 shell 只使用一個 slot。 slot 具有名稱（預設為 content），頁面的輸出會渲染至 同名的 slot 中。

需要 1.22.0 或更新的版本。 在此之前 Content slot 元件並不存在 —— 設定面板會要求一個介面上無法插入的 slot —— 而且按下 Save settings 之後， 下一次 Save 會以「This design was changed elsewhere after you opened it」失敗。 使用舊版時請先更新；兩個問題皆已修正。

8. 複用：composites、components 與 instances

INSERT 面板提供三種行為各異的複用機制。

8.1 Composites：預先組好的節點樹

Site header、Button、Section 與 Row 是預先排列好的節點樹。插入之後， 這些節點與原始的 composite 互相獨立；修改其中一份插入的副本，不會影響其他副本。

8.2 Components：一個母版，多個 instance

Components 分頁包含兩組：隨站台提供的共用元件庫（空心圖示）， 以及使用者自建的元件（實心圖示）。若尚未儲存任何自建元件，則僅顯示共用元件庫：

若要建立元件，請先以一般容器的方式建立一次，在圖層樹中選取該容器， 再按下 Save as component：

系統會就地要求輸入名稱：

請以可重複使用、以內容為依據的方式為元件命名。例如 Contact band 這個名稱， 無論該元件用於聯絡頁、頁尾或到達頁，都仍然成立。

完成後它會出現在元件庫中並標示為自建元件，格線下方的說明亦變更為 “Instances follow the component. Edit it once and every use changes.”

8.3 元件的 instance

再次放置該元件並選取它。inspector 顯示的不再是 Frame，而是 `Instance`：

• `Contact band · used in 2 places` —— 此計數為即時值，統計範圍是整個站台， 而非僅限當前這份設計。
• Component content —— 每個 instance 可覆寫其各部位的文字，此處為 Heading 與 Text。“Left empty, it follows the component default.” 結構與樣式維持共用，內容則可因 instance 而異。
• Edit component 會開啟母版。 “Structure and styles changed there reach every instance.”

儲存元件會將其變更發佈至本站台上所有使用該元件 instance 的範本。 編輯元件時請將全站複用的影響範圍納入考量。

1.22.0 及更舊的版本： 在尚未儲存任何自建元件時，面板會列出共用元件庫， 並在其正下方顯示「No components yet」。列表是正確的，該訊息只統計了自建元件。 1.23.0 已修正。

9. Motion

Motion 分頁提供四個獨立的驅動器（driver），以及一組已調校完成的文字效果。 同一個元素上可以同時啟用多個驅動器。

9.1 畫布上的動畫狀態

若設計中含有大量進場動畫，畫布上便會充滿不可見的元素。因此畫布顯示的是每個動畫 播放完成後的狀態，並提供 ▶ Play once 按鈕以供預覽： “otherwise the element is transparent and impossible to select.”

亦即畫布呈現的是動畫的最終狀態，而非初始狀態。

9.2 設定 Entrance

• Entrance style —— From below 等選項。
• Springiness —— “Left is crisp, right is soft and bouncy.”
• Trigger point —— “How much of the element has to be visible before it starts.” 0.2 表示元素露出五分之一時。

9.3 在小於特定寬度時停用動效

驅動器上方的 Only from width → Minimum viewport width 定義了停用動效的視窗寬度下限：

“Below this width the element has no motion at all and simply shows its final state — the way to keep a wall or a tilt off phones without building a second copy of the section.”

如此即可在較小的視窗下停用動效，而不需另建一份設計。

9.4 Effects

僅能選擇其一：None、Letter by letter、Liquid text。 “The parameters are already tuned — strength is the only knob left to you.” 這些是作用於整個元素的處理，而非屬性動畫，因此與四個驅動器分開設置。

9.5 Scroll driver

啟用 Scroll driver 後會出現 Effect 控制項，內含四種預設：Parallax rise、 Fade in on scroll、Shrink on scroll 與 Rotate on scroll，預設值為 Parallax rise。

此驅動器隨頁面位置持續作用，如摺疊狀態下的說明所述： “Interpolates with the scroll position every frame — not ‘fires once at a point’.” 因此元素會隨頁面捲動而推進效果，並在頁面往回捲時反向。這與 Entrance 不同 —— 後者在觸發條件達成後只播放一次。

該選單亦可能顯示 Custom。這是一種狀態標示，代表已儲存的數值不再對應任何預設， 例如設計由 kit 或較舊版本建立的情況。它並非可直接選用的預設值。

9.6 Pointer tracking

1. Effect —— 3D tilt、Magnetic pull、Horizontal shift。
2. Measured against —— Itself、Parent、Window。“Whether the cursor position is measured against the element itself or the whole window.” Itself 僅在游標位於元素上方時 產生反應；Window 則會持續回應整個頁面範圍內的游標移動。
3. Springiness —— “Left is crisp, right is soft and bouncy.” 此滑桿控制的是整體彈性反應，而非分別設定剛性與阻尼。

啟用 3D tilt 可能會為所選元素的父層加上 perspective。面板說明為： “Needs perspective on the parent — the panel adds it for you.” 若父層沒有 perspective 值，Aumframe 會加入 perspective: 900。 rotateX 與 rotateY 需要此 perspective 才能呈現可見的 3D 效果。

9.7 Continuous motion

1. Effect —— Float up and down、Breathing scale、Pulsing brightness、 Drift side to side、Slow spin。
2. One cycle —— “In seconds. The longer, the quieter.” 內建預設使用的週期為： 脈動 2.4 秒、浮動 4 秒、漂移 7 秒、緩慢旋轉 24 秒。

Continuous motion 沒有觸發條件：“it moves from the moment the page loads.” 因此所選的動效會在頁面運作期間持續播放。

9.8 組合多個驅動器

Entrance、Scroll、Pointer 與 Continuous motion 是彼此獨立的驅動器。 當它們控制不同屬性時可以組合使用。例如 Scroll 控制垂直位移、Continuous motion 控制縮放， 因為 transform 的各個分量是分開處理的。

當兩個驅動器寫入同一個屬性時會產生衝突。此時由較晚綁定的驅動器提供實際生效的數值， 較早的數值則仍然保留在資料中。綁定順序為 Scroll、Loop、Pointer， 因此在屬性重疊時，順序較後者優先。

編輯器會針對這類衝突顯示警告：

例如預設的 Parallax rise（Scroll）與預設的 Float up and down（Continuous motion） 都會寫入垂直位移。兩者同時啟用即會出現該警告，並提供一個可將重複屬性從被覆寫的 驅動器中移除的操作。

另有三種衝突採用相同的警告形式：

這些衝突不會產生渲染錯誤。被覆寫的設定在面板中仍然可見，只是不會生效。 請依據衝突警告找出並移除重疊的屬性。

10. Content Model：不需程式碼的內容類型

站台往往需要文章與頁面以外的結構化內容，例如自行車、案例研究、職缺或常見問題。 Aumframe → Content Model 可在不撰寫程式碼、也不安裝其他外掛的前提下， 定義這些內容類型及其欄位。

“Definitions live in the database, not in code — so you can export them as a model pack and import it into the next site in the same industry.”

10.1 建立內容類型

• Singular / Plural name（單複數名稱）與 Identifier（識別碼）。 識別碼一經建立即無法變更，變更等同建立另一個類型： “changing it means a different type, and existing content is orphaned.” 請在建立內容之前，選定簡短且全小寫的識別碼。
• URL prefix 與 Menu icon。
• Visible on the front end (has its own URL) 與 Has a listing page (archive) —— “The listing page is the URL an Aumframe archive template can take over. Data-only types such as FAQ or downloads do not need it.” 僅會嵌入於其他頁面中顯示的類型， 請將列表頁關閉。
• Built-in areas —— Title、Content、Excerpt、Featured image、Order、Comments。 關閉該類型不具備的項目後，編輯畫面也不再提供它們。
• Use this type as a product catalog —— “Lets layouts bind price and a call-to-action through the same paths an e-commerce or inquiry site uses, so one product card works on every kind of site.” 此設定使同一份卡片設計既能用於商店，也能用於詢價型站台。

10.2 欄位

+ Add field 為該類型加入自有資料，共十七種欄位類型：

每一種欄位類型都可在設計器的 Data 分頁中綁定（§6.1）。 例如自行車上的 Frame size 欄位，可由一個 Text 節點顯示。

刪除欄位不會刪除內容： “Existing content is not deleted, but the front end will no longer be able to read it.”

10.3 分類法

+ Add taxonomy 定義內容的分組方式。行為由 Hierarchical 設定決定： “‘Hierarchical’ behaves like categories (one bike belongs to one series). Unchecked behaves like tags (many per item).”

10.4 Model pack

Export 會將整個模型（類型、欄位、分類法）輸出為 JSON， 同產業的下一個站台可將其貼入 Import。

• 匯入預設僅新增：已存在的類型會保留其現有定義。
• Replace everything 選項亦可使用，並標示為 dangerous: overwrites current definitions。 僅在確實需要取代既有定義時使用。

11. 表單與詢問

Aumframe → Forms 是表單建構器；Inquiries 是送出內容的存放處。

11.1 建立表單

Aumframe → Forms 列出既有表單，並在每一張表單旁顯示送出筆數：

Add new 開啟建構器：

輸入標題、加入欄位，並設定送出後的行為：

11.2 將表單加入頁面

側邊欄提供 shortcode [aum_form id="12"]，並說明可使用的位置：

“Works in the block editor, the classic editor and widgets. On a page built with Aumframe, drop in a ‘Form’ node instead.”

在 Aumframe 的設計中，請使用 Form / shortcode 元件並選取該表單。 在區塊編輯器、傳統編輯器或小工具中，則改為插入該 shortcode。

11.3 Inquiries

每一筆送出的內容除了以郵件寄出之外，也會儲存在 Aumframe 中。 已儲存的內容可依表單篩選，且即使通知郵件被退回或被歸類為垃圾郵件，仍然可以查閱。

12. Translate layouts

空狀態說明了 Aumframe 與多語言外掛之間的職責劃分：

“No languages are available. Install and configure a multilingual plugin first — this screen translates the layout; that plugin translates your content.”

Aumframe 不翻譯文章內容。它擷取的是輸入於設計之中的文字，例如標題、按鈕文字、 嵌入元件的同意說明，並將這些文字提供給已設定的多語言外掛使用。 如此一來，翻譯後的頁面仍可沿用同一份 Aumframe 版面。

12.1 可用語言的來源

語言列表是透過 aumframe/translatable_languages 過濾器取得，而非掃描已安裝的外掛。 若沒有任何元件提供此過濾器，它會回傳空陣列，該頁面即維持上述的空狀態。

當站台設有一種預設語言，並至少再加入一種語言時，語言即成為可用。 翻譯完成度並非必要條件；此頁面列出的是可用語言，而非翻譯進度。

語言偵測與版面文字翻譯

語言偵測與版面文字翻譯是兩項獨立的能力。在使用 WPML 或 Polylang 的站台上， 它們可能由不同的外掛提供：

因此在使用 WPML 或 Polylang 時，該頁面可以列出已設定的語言，即使沒有任何已安裝的元件 能夠翻譯版面文字本身。頁面上方的提示會說明此狀況。WPML 與 Polylang 翻譯的是文章與 頁面的內容，而直接儲存於設計之中的文字不屬於該範圍。

若翻譯請求沒有回傳任何已翻譯字串，Aumframe 會中止處理，而不會建立一份未變更的翻譯 並將其標記為最新。它會區分「沒有可用的版面翻譯器」與「有翻譯器但未回傳結果」 （例如金鑰過期或額度用罄）。部分結果會被保存：未回傳的字串維持原文。

12.2 Translate layouts 的實際畫面

當語言可用時，此頁面會依所選語言列出每一份設計：

1. Language —— 選擇此表格所對應的語言。
2. Translate everything out of date —— 對該語言下所有過期的設計執行翻譯。

每一列代表一份設計，顯示其 slug，並回報下列數值：

Translate everything out of date 可一次更新多份過期的版面， 在變更影響多份設計時特別實用。

13. 其餘的基本元件

前面章節僅提及過六個基本元件，本節逐一說明。引號內的文字取自 Aumframe 對應面板的原文。

13.1 Icon

1. Pick one —— 提供 29 個內建圖示，說明為 “29 built in, all following the text color.” 這些圖示是使用 currentColor 的內嵌 SVG，因此會繼承周圍文字的顏色， 不需另行設定色彩。
2. Custom SVG —— 接受自訂 SVG 內容。“Write only what goes inside `<svg>`, drawn on a 24×24 grid. Fill this in and the icon picked above is ignored; clear it to go back.”

自訂路徑應使用 24×24 的座標系統。填入自訂 SVG 時會覆蓋上方所選的內建圖示； 清空該欄位即可恢復使用所選圖示。

13.2 Shape

Shape 提供三個欄位以填入自訂 SVG 內容：

1. viewBox —— “Defines the internal coordinate system — it decides how the numbers inside the SVG convert.” 例如 0 0 300 70 定義了一個 300×70 的內部座標空間， 與元素實際渲染尺寸無關。
2. Scaling —— Stretch to fill、Keep proportions · centered、Keep proportions · top left。 面板說明兩者的差異：“‘Stretch to fill’ suits things that may deform, like a line chart; ‘keep proportions’ suits artwork.”
3. SVG contents —— “Write only what goes inside `<svg>`. Use currentColor to follow the text color.”

與 Icon 不同，Shape 自行定義 viewBox，因此可使用 24×24 以外的座標空間， 包括寬型圖表與整頁寬的分隔圖形。

13.3 Canvas

Canvas 沒有專屬於該元件的 Content 欄位。它渲染一個空的 <canvas> 元素， 僅保留所有元素共用的控制項。

Canvas 的用途是作為元件行為或自訂腳本的繪圖表面，同時仍納入 Aumframe 一般的尺寸系統。 它本身不繪製任何內容。

新插入的 Canvas 預設為高度 260px、設定為 Fill。由於 canvas 沒有內在的內容高度， 將其高度設為 Hug 可能會解析為 0。

Motion 面板中的 WebGL 效果（Cursor ripple、Liquid warp）不適用於 Canvas， 僅適用於圖片、影片與容器。

13.4 Audio

1. Source —— 從媒體庫選取項目。面板說明：“Inside a loop, bind it to an audio field instead — one clip per row.” 在 Loop 內綁定來源，可讓每一筆結果 各自渲染一個播放器（§6.4）。
2. URL —— 同一來源的文字形式，供外部託管的檔案使用。
3. Controls —— Native 或 None。“Off when a behaviour (Audio list) supplies its own play button.”
4. Preload —— None、Metadata 或 Auto，預設為 None。 這可避免頁面含有多個播放器時，在播放之前就請求多個音訊檔案。

13.5 Embed

1. URL —— 接受地圖、影片、預約行事曆等服務。“Map, video, booking calendar. Paste the whole `<iframe>` snippet if that is what you were given — the address is taken out of it.”
2. Shape —— 16:9、4:3、3:2、1:1、21:9 或 Fill the box。
3. Ask before loading —— 預設啟用。“On: a placeholder the visitor clicks. A third-party frame contacts that third party and may set cookies as the page loads, so this is both the privacy-safe and the fast default.”
4. 啟用同意閘後，Button text 與 Small print 兩個欄位可供設定， 預設值分別為 “Load this content” 與 “Loading it contacts a third party and may set cookies.”

Raw HTML (advanced) 位於上述控制項下方，說明為 “used only when no URL is set above”。 若已填入 URL，則不會使用 raw HTML 的內容。

13.6 Form / shortcode

此元件只有一個欄位，預先填入 [aum_form id="1"]。站台上已有表單時，可從列表中選取。 若尚無表單，面板會顯示：“No forms yet. Create one under ‘AumCreate → Forms’, or just type another shortcode here.”

該欄位同時接受其他 WordPress 外掛提供的 shortcode， 使以 shortcode 輸出的內容也能放置於 Aumframe 的設計之中。

13.7 所有元素共用的控制項

下列區段會出現在每一個被選取的元素上：

除 Site header 之外的其他 composite 為：Button（“Frame + Text + a hover state”）、 Section（“A full-width band with a centred content column that follows the theme's content width”）與 Row（“A horizontal container with two equal-width cells”）。

14. 仍由 WordPress 管理的頁面資料

設計取代的是前台渲染出來的輸出。該頁面仍然是一個 WordPress 頁面， WordPress 繼續管理下列項目：

• 文章標題與永久連結；
• SEO 描述與 og:description —— 即使該內容已不再顯示， 它們仍然由文章自身的內容推導而來；
• 以及附屬於該文章的其他一切：作者、日期、修訂版本、留言設定。

在前述範例中，可見的內文完全由設計渲染，而 <meta name="description"> 中 仍然是原本的頁面內容。

請勿僅因為 Aumframe 設計接管了前台渲染，就刪除該 WordPress 頁面的內容。 該內容雖不再顯示，但在此已驗證的設定中，它仍是描述文字的來源。

15. 疑難排解

「Found unsaved changes from just now — the last session probably ended unexpectedly. [Restore] [Discard]」 編輯設計期間，Aumframe 會保留一份本機草稿。若分頁關閉、瀏覽器非預期結束， 或在儲存之前離開頁面，下次開啟該設計時會提示此草稿。Restore 會載入未儲存的草稿， Discard 則刪除草稿並保留資料庫中的版本。Discard 無法復原。 若不確定草稿內容，請先還原並檢視結果，再決定是否捨棄。

變更似乎沒有生效。 請檢查 inspector 中的狀態列與斷點列（§4.2）。設定在 Hover × Mobile 上的數值， 在選取 Default × Desktop 時不會顯示。

設計沒有出現在站台上。 開啟 ⋯ → Template settings 檢查路由設定。未綁定頁面、或沒有相符規則的設計， 不會在前台渲染。

16. 選用的整合

本節所述的整合皆為選用項目。本手冊中的所有流程，都是在原廠 WordPress 佈景主題下、 僅安裝 Aumframe 的環境中驗證完成的。

AumCreate 佈景主題

設計涵蓋其規則所命中的網址，其餘部分 —— 404、購物車、帳號頁、作者頁 —— 仍由佈景主題負責。在本站台上以相同的兩個網址、分別在兩種佈景主題下實測：

AumCreate 佈景主題不會改變已被 Aumframe 接管之網址的輸出。對於沒有設計命中的網址， 它會透過自身的 header.php 與 footer.php 渲染 shell，提供全站一致的外框。

AumKit

kit 打包了 Aumframe 設計、內容模型與媒體檔。安裝之前，AumKit 會檢查該 kit 所宣告的 各項需求，並以 missing · inactive · too old · ok 回報每一項。

AumNexCart 與 AumReserva

兩者皆為獨立外掛，且都未直接引用 Aumframe（在已驗證的版本中，兩個外掛裡提及它的 檔案數為零）。整合是透過 §10 的 “Use this type as a product catalog” 選項達成： 內容類型標示為此之後，無論資料由哪一個外掛提供，卡片設計都能透過相同的路徑 綁定價格與行動呼籲資料。

多語言外掛

參見 §12。Aumframe 提供儲存於設計中的文字，多語言外掛則翻譯文章內容。 兩者的職責彼此獨立。

17. Preview、Live 與隱藏分支

頂端工具列提供三個控制項，分別對應不同的預覽與編輯需求。

使用 Live 檢視動效與互動，使用 Preview 開啟已儲存的前台結果， 使用 ◌ 在畫布上顯示因條件而隱藏的分支。