现在我们了解到，twig 与 wordpress 插件 timber 一起可以帮助开发人员在开发 wordpress 主题时编写模块化代码。通过这种模块化方法，您可以分别处理 web 应用程序的逻辑层和视图层。让我们跳到稍微更技术性的内容：创建 twig 模板、将 html 转换为 twig 文件，以及如何使用 twig 模板呈现逻辑或数据。
安装木材
首先，我要安装 Timber，这是一个 WordPress 插件，有助于将 Twig 模板引擎与 WP 集成。那么，让我们开始吧。
- 登录您的 WordPress 信息中心。
- 转至插件 > 添加新插件。
- 搜索 Timber 插件。
- 安装并激活插件。
安装 Timber 后，您现在可以开始将模板文件拆分为数据和视图文件。
创建树枝模板
在我们开始创建 Twig 模板之前，我假设您已经进行了某种本地 WordPress 设置。对于这个特定的教程，我的设置是：
- 本地主机 WP 安装（我使用的是 ServerPress 的 DesktopServer）。
- 已安装并激活 Timber 插件。
- 可选：任何基础/入门主题（我使用自己的主题，即 Neat）。
UpStatement 还构建了一个 Timber Starter 主题。
让我们开始吧。我想在主页顶部显示欢迎消息。如果没有 Twig，我该怎么办？也许，我会在 PHP 文件中包含 HTML 代码并回显欢迎消息，就像我在下面的代码示例中所做的那样。我的 index.php 文件看起来像这样。
<?php
/**
* Homepage
*/
get_header(); ?>
<div> <?php echo "Welcome to my blog!"; ?> </div>
<?php get_footer(); ?>
现在，我本地 WordPress 安装的主页在顶部显示一条欢迎消息。这是屏幕截图。
问题
这种方法的问题在于我们将数据/逻辑与视图混合在一起。该文件越复杂，维护就越困难，更不用说理解了，例如，如果您在此代码后面添加带有一些参数的 WordPress 循环，然后再进行过滤和分页。除此之外，当您最终得到一些逻辑时，HTML 中的 PHP 看起来并不好。
模块化方法
为了使其更加模块化，我们可以将主页上的内容视为块或组件的形式。默认情况下可以有两个完整的，即来自 The_Loop 的帖子和分页。现在我们想在顶部添加另一个组件，即欢迎消息，让我们为该组件创建一个 Twig 文件。
在编辑器中打开一个新的空白文件，然后复制粘贴以下代码行。
<!-- Welcome Template -->
<section class="welcome_message">
<h2>Welcome to my website!</h2>
</section>
在主题的根目录中创建一个名为 views 的新文件夹，并使用 .twig 扩展名保存此文件。例如，我将文件保存为 welcome.twig。
渲染树枝模板
Timber 为我们提供了一些有用的函数，其中之一就是渲染函数。你可以这样称呼它：
Timber::render();
该函数最多可以接受四个参数。由于这超出了本文的范围，您可以在 Timber 文档中阅读相关内容。我们可以将主题的 views 文件夹中存在的任何 Twig 文件的名称传递给此函数。
让我们在 index.php 文件中渲染欢迎消息。
<?php
/**
* Homepage
*/
get_header();
// Timber Render.
Timber::render( 'welcome.twig' );
get_footer();
Timber 渲染 welcome.twig 文件，加载 HTML 并在前端显示新修改的视图层，如下所示：
render() 函数将 welcome.twig 作为它的参数，但只要树枝模板位于名为 views 的文件夹内，它就会自动读取该文件。
如果您想对文件夹使用自定义名称/路径，则必须提供该文件夹的路径。例如，我在主题的根目录中创建了一个 twig 文件夹，并将其添加到渲染函数的参数中。
DM企业建站系统运动健身减肥健身馆网站模板, DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装，把模板和区块组装起来，产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC，手机，微信都可以访问)。后台操作简单，维护方便。DM企业建站系统安装步骤：第一步，先用phpmyadmin导入sql文件。 第二步：把文件放到你的本地服务
<?php Timber::render('twig/welcome.twig'); ?>
官方加载顺序
Timber 将首先查看子主题，然后回退到父主题（与 WordPress 逻辑相同）。官方的加载顺序是：
- 用户定义的位置
- 调用PHP脚本的目录（但不是主题）
- 子主题
- 父主题
- 调用PHP脚本的目录（包括主题）
第 2 项插入到其他项之上，这样如果您在插件中使用 Timber，它将使用插件目录中的 twig 文件。
所以，现在index.php文件里面没有HTML，它正在渲染一个Twig模板。
现在让我们将一些动态数据从 index.php 发送到 welcome.twig 文件并使用 Timber 进行渲染。
通过 Timber 将数据发送到 Twig 文件
要将数据从 PHP 文件发送到 Twig 文件，您需要定义一个上下文数组。渲染函数采用一组数据来为 Twig 模板提供某种上下文。我们将该数组称为 $context，它是一个关联数组，即它占用键值对。
让我们添加一个键值对，作为动态欢迎消息，我们的 PHP 文件会将其发送到 Twig 文件。
数据文件
我的 index.php 文件现在看起来像这样。
<?php
/**
* Homepage
*/
get_header();
// Context array.
$context = array();
// Dynamic message.
$var = 'Dynamic Message';
// Dynamic data.
$context['the_message'] = $var;
// Render twig file with the give $context array.
Timber::render( 'welcome.twig', $context );
get_footer();
因此，在 index.php 文件中，我在第 8 行定义了一个空的 $context 数组。然后，在第 11 行，我创建了一个变量 $var，其值为 'Dynamic Message'。 在第 14 行，我创建了一个键 the_message ，它等于 $var。
在第 17 行，我使用 welcome.twig 文件调用了渲染函数，但这一次，它需要一个额外的参数，即 $context 数组。这个新参数实际上包含 Timber 将从 PHP 文件发送到 Twig 文件的数据。
因此，我们定义了上下文数组并添加了动态消息（您可以通过向其添加某种逻辑来向不同的用户显示不同的消息，例如显示当前用户的名字）。
模板文件
现在我们需要在 Twig 文件中使用此数据，即 the_message。我们可以通过在 Twig 模板中放置双括号来回显变量。例如，要在 twig 文件中回显 $var，我们可以编写 {{ var }}。这正是我所做的。
<!-- Message Template -->
<section class="message">
<h2>{{ the_message }}</h2>
</section>
the_message 的值将打印在 h2 标签内。我知道，就是这么简单，而且代码看起来也很干净。
就是这样！保存代码，在前端查看动态欢迎信息。这是最终的屏幕截图。
结论
总而言之，现在您可以使用 PHP 文件来编码逻辑并向 Twig 模板提供数据，该模板包含 HTML 并在双括号内呈现 Twig 变量或函数。
这种模块化方法可以为 WordPress 主题中的每个组件生成单独的模板文件。考虑拥有一个 message.twig 组件，您可以在主题中的任何位置使用它来显示您想要的任何消息，任意次数。
这是 Twig 与 Timber 的基本实现。不过，在接下来的两篇文章中，我将介绍 Timber WordPress Cheatsheet、使用 Timber 管理图像以及在不使用疯狂步行器功能的情况下创建菜单。
如果您有任何疑问，请在下面的评论中发表或在 Twitter 上联系。您还可以在此 GitHub 存储库中查看我的主题代码。
