這篇文章是在Automattic收購Frantity及其團隊之前開始的。 Frontity的創始人計劃將框架過渡到一個社區驅動的項目，以確保其穩定性，無漏洞的操作和全面的文檔。像其他開源項目一樣，界限將保持自由，為社區貢獻和增強提供機會。其常見問題解答可用。
我上一篇文章詳細介紹了具有前景的無頭WordPress網站，並簡要檢查了其文件結構。本文深入研究@frontity/mars-theme軟件包（MARS主題），提供了定制的分步指南。火星主題是界線的默認主題，是一個很好的起點，類似於WordPress的二十二十一歲。
我們將探索火星主題的核心組件，包括其“構建塊”，並檢查包裝中包含的各種組件。我們將介紹實例的功能，操作和样式。
讓我們開始吧！
讓我們重新審視上一篇文章中的界面項目文件結構，突出顯示了Frontity的核心組件： frontity.settings.js ， package.json和packages/mars-theme文件夾。 package.json文件提供了重要的項目信息，包括名稱，描述，作者和依賴項。關鍵軟件包包括：
frontity ：包含前提應用程序開發方法和CLI的主要包裝。@frontity/core ：處理捆綁，渲染，合併，移動和服務。應用程序開發通常不需要直接訪問。完整的列表在“界限”文檔中。@frontity/wp-source ：連接到WordPress REST API，獲取火星主題的數據。@frontity/tiny-router ：管理window.history和路由。@frontity/html2react ：將HTML轉換為反應，使用處理器用反應組件替換HTML部分。 Frontity的Core或@frontity/package （也稱為“構建塊”），包括@frontity/components中有用的React組件庫，導出Link ， Auto Prefetch ，圖像， Image ， Props ，IFRAME， Iframe ， Switch和其他功能和其他功能和其他功能和對像等組件。詳細的描述和語法信息在軟件包參考API中。
界限文檔解釋了項目啟動過程： @frontity/file-settings在frontity.settings.js中定義的所有軟件包，其設置和導出均由@frontity/core合併為一個存儲。該商店允許在開發過程中使用@frontity/connect （Frontity的State Manager）訪問不同軟件包的狀態和操作。
接下來，我們將研究如何在火星主題中使用這些構建塊，以創建一個具有無頭WordPress端點的功能前線項目。
在自定義之前，讓我們熟悉火星主題（ @frontity/mars-theme ）文件結構：
<code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>
火星主題的src/list/index.js組件為： /src/index.js和src/components/index.js 。界限文檔提供了有關如何定義和互連這些組件的詳細說明。讓我們關注最重要的三個：根，主題和列表。
/src/index.js ） src/index.js文件（主題的根）至關重要。它是入口點，針對<div>在網站上標記以注入所有已安裝軟件包的根。界主題將<code>root和其他必要軟件包導出到DOM中。界限文檔使用插槽說明了這一點，並填充了可擴展性模式。火星主題軟件包中的一個示例顯示了它如何初始化根組件：
// Mars-Theme/src/components/index.js // ...（簡短省略代碼）...
根組件導出包括roots ， fills ， state ， actions和libraries在內的軟件包。有關根組件的更多詳細信息在於界限文檔中。
/src/components/index.js ）主題組件是Theme名稱空間導出的主要根級組件。它包含@frontity/connect功能，提供對state ， actions和libraries道具的訪問。這允許主題組件讀取狀態，使用操作並利用其他軟件包中的代碼。
// Mars-Theme/src/components/index.js // ...（簡短省略代碼）...
此示例，從火星主題的/src/components/index.js中，使用state.source.get()檢索數據以渲染列表和帖子之類的組件。
上一節涵蓋了主題級組件。現在，讓我們檢查一個特定的組件：列表。
列表組件由src/components/list/index.js導出，使用@loadable/components進行代碼分配。僅當用戶查看列表時，組件才會加載；查看單個帖子時，它不會渲染。
使用state.source.get(link)及其items字段的src/components/list/list.js組件渲染列表。
// src/components/list/list.js // ...（簡短省略代碼）...
connect函數提供了對全局狀態的訪問。 list-item.js and pagination.js也被導入。
Pagination組件（ src/components/list/pagination.js ）允許用戶在帖子頁面之間導航。
// src/components/list/pagination.js // ...（簡短省略代碼）...
connect功能可以授予對全球狀態和動作的訪問。
Post組件顯示單個帖子和頁面。結構類似，除了帖子包括元數據（作者，日期，類別等）。
// src/components/post.js // ...（簡短省略代碼）...
有條件的渲染可確保僅針對帖子顯示元數據，並且根據主題設置顯示了特色圖像。
列表組件對於顯示帖子至關重要。讓我們檢查其他基本要素。
src/components/link.js ） MarsLink組件（ src/components/link.js ）是@frontity/components/link組件的包裝器。
// src/components/link.js // ...（簡短省略代碼）...
它包括一個處理程序，可以在單擊鏈接時關閉移動菜單。
src/components/nav.js ） Nav組件（ src/components/nav.js ）在frontity.settings.js或前面狀態中定義的菜單項迭代，匹配URL並在標頭中顯示組件。
// src/components/nav.js // ...（簡短省略代碼）...
connect函數可提供對狀態的訪問。為移動視圖提供了其他菜單組件（ menu.js menu-modal.js
/src/components/featured-media.js ）特徵媒體在根組件的theme.state.featured中定義。完整的代碼在/src/components/featured-media.js中。
前線的造型與WordPress不同。 Frontity提供了可重複使用的組件，該組件是由樣式組件和情感（CSS-In-JS庫）構建的。
使用Emotion的styled功能創建樣式組件。例如：
//創建按鈕樣式組件
導入{樣式}從“界限”中;
const button = stypled.div`
背景：燈光；
寬度：100％；
文字平衡：中心；
顏色：白色；
`;css Prop允許使用模板文字進行內聯樣式。
/ *使用AS CSS Prop */
從“界限”導入{css};
const pinkbutton =（）=>（
<div css="{css`background:" pink>
我的粉紅色按鈕
</div>
）；<global></global>成分這<global></global>組件應用範圍內的樣式。
// ...（簡短省略代碼）...
本節演示了自定義火星主題。 （省略簡潔的詳細示例和代碼段；請參閱原始響應以獲取完整的代碼示例。）關鍵自定義包括：
<global></global>樣式組件。（省略了簡潔的資源和信用列表；請參閱完整列表的原始響應。）
對前線及其MARS主題的探索突出了其初學者友好性，低維護性以及與實驗塊主題的兼容性。但是，注意到當前的託管成本和文檔改進領域。計劃進一步探索使用Gatsby和Frantity以及WordPress Block主題的演變對無頭站點開發的進一步探索。
以上是火星主題：深入了解Frantity的無頭WordPress主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
