火星主題：深入了解Frantity的無頭WordPress主題

這篇文章是在Automattic收購Frantity及其團隊之前開始的。 Frontity的創始人計劃將框架過渡到一個社區驅動的項目，以確保其穩定性，無漏洞的操作和全面的文檔。像其他開源項目一樣，界限將保持自由，為社區貢獻和增強提供機會。其常見問題解答可用。

我上一篇文章詳細介紹了具有前景的無頭WordPress網站，並簡要檢查了其文件結構。本文深入研究@frontity/mars-theme軟件包（MARS主題），提供了定制的分步指南。火星主題是界線的默認主題，是一個很好的起點，類似於WordPress的二十二十一歲。

我們將探索火星主題的核心組件，包括其“構建塊”，並檢查包裝中包含的各種組件。我們將介紹實例的功能，操作和样式。

讓我們開始吧！

目錄

• 簡介：了解前線的構件
• 第1節：探索火星主題結構
• 第2節：利用列表組件
• 第3節：鏈接，菜單和特色圖像
• 第4節：造型一個前線項目
• 第5節：自定義前線火星主題
• 第6節：資源和致謝
• 結論：最終思想和思考

陣線的基本組成部分

讓我們重新審視上一篇文章中的界面項目文件結構，突出顯示了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端點的功能前線項目。

第1節：了解火星主題結構

在自定義之前，讓我們熟悉火星主題（ @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()檢索數據以渲染列表和帖子之類的組件。

第2節：使用列表組件

上一節涵蓋了主題級組件。現在，讓我們檢查一個特定的組件：列表。

列表組件由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
// ...（簡短省略代碼）...

有條件的渲染可確保僅針對帖子顯示元數據，並且根據主題設置顯示了特色圖像。

第3節：鏈接，菜單和特色圖像

列表組件對於顯示帖子至關重要。讓我們檢查其他基本要素。

鏈接組件（ 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中。

第4節：造型一個前線項目

前線的造型與WordPress不同。 Frontity提供了可重複使用的組件，該組件是由樣式組件和情感（CSS-In-JS庫）構建的。

使用樣式組件

使用Emotion的styled功能創建樣式組件。例如：

 //創建按鈕樣式組件
導入{樣式}從“界限”中;

const button = stypled.div`
  背景：燈光；
  寬度：100％；
  文字平衡：中心；
  顏色：白色；
`;

使用CSS道具

css Prop允許使用模板文字進行內聯樣式。

 / *使用AS CSS Prop */
從“界限”導入{css};

const pinkbutton =（）=>（
  <div css="{css`background:" pink>
    我的粉紅色按鈕
  </div>
）；

使用<global></global>成分

這<global></global>組件應用範圍內的樣式。

 // ...（簡短省略代碼）...

第5節：自定義前線火星主題

本節演示了自定義火星主題。 （省略簡潔的詳細示例和代碼段；請參閱原始響應以獲取完整的代碼示例。）關鍵自定義包括：

• 重命名主題包。
• 使用動態菜單獲取（使用WP-Rest-API V2菜單插件）進行重構導航。
• 修改文件結構為更好的組織。
• 添加自定義頁腳組件。
• 自定義主題標題。
• 添加<global></global>樣式組件。
• 實施流體版式。
• 添加WebFonts。
• 造型頁和帖子（包括Gutenberg塊樣式）。

第6節：資源和致謝

（省略了簡潔的資源和信用列表；請參閱完整列表的原始響應。）

結論：最終思想和思考

對前線及其MARS主題的探索突出了其初學者友好性，低維護性以及與實驗塊主題的兼容性。但是，注意到當前的託管成本和文檔改進領域。計劃進一步探索使用Gatsby和Frantity以及WordPress Block主題的演變對無頭站點開發的進一步探索。