火星主题：深入了解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主题的演变对无头站点开发的进一步探索。