这篇文章是在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中文网其他相关文章！
