使用Twig：块和嵌套，快速启动WordPress开发

百变鹏仔 3个月前 (09-22) #HTML

文章标签嵌套

在上一篇文章中，我介绍了通过 timber 将 twig 模板引擎与 wordpress 集成以及开发人员如何将 php 文件中的数据发送到 twig 文件。让我们讨论如何使用 twig 创建基本模板、这种 dry 技术的优点以及 timber-twig wordpress cheatsheet。

在 Twig 中创建基本模板

Twig 遵循 DRY（不要重复自己）原则。 Twig 最重要的功能之一是具有嵌套和多重继承的基本模板。虽然大多数人以线性方式使用 PHP 包含，但您可以创建无限级别的嵌套块来专门控制您的页面模板。

将您的基本模板视为其中包含多组块的父模板。子模板可以扩展父模板并修改其中的任何一个或多个块，而无需重写代码，这在两个模板中都是相似的。

让我们看一下父模板或基础模板示例，即 base.twig 文件。您可以将其与其他 Twig 模板一起放置在视图文件夹中。您可以在任何 Twig 模板中调用此文件，并将其用作该特定 Twig 文件的父模板。键入以下代码行以创建 views 文件夹。此基本模板将为您的 WordPress 主题提供基本结构。这是一个简单的 base.twig 文件的代码。

{# Base Template: base.twig #}{% block html_head_container %}    {% include 'header.twig' %}{% endblock %}<body class="{{body_class}}">	<div class="wrapper">		{% block content %}		    <!-- Add your main content here. -->		    <p>SORRY! No content found!</p>		{% endblock %}	</div>	<!-- /.wrapper -->{% include "footer.twig" %}</body></html>

Twig 中的评论：{# 基本模板：base.twig #}

您可以使用 {# comment here #} 语法在 Twig 中编写注释。要注释掉模板中的部分行，请使用注释语法 {# ... #}。这对于调试或为其他模板设计者或您自己添加信息非常有用。您可以在第 1 行找到注释。

块： {% block html_head_container %} {% endblock %}

Twig 和 Timber 的整个理念都围绕着 WordPress 中的模块化代码方法。我一直在反复写关于 Twig 中的数据以组件或块的形式处理的想法。

块用于继承，同时充当占位符和替换。它们详细记录在扩展标签的文档中。

{% block add_block_name_here %} 阻止此处的内容 { % endblock % }

在上面编写的代码中，您可以找到一个名为 html_head_container 的块，它跨越第 3 行到第 7 行。扩展此 base.twig 基本模板的任何模板都可以继承同一块的内容或修改它以添加其他内容。还有另一个名为 content {% block content %} 的块，该块跨越第 13 行到第 18 行。

类似地，创建块的概念也得到了进一步扩展，您还可以创建无限级别的嵌套块。这才是真正的DRY原则。

包含语句：{% include "header.twig" %}

Twig 模板可以包含其他 Twig 模板，就像我们在 PHP 中所做的那样。这个 base.twig 文件将是一个通用包装器，如果没有它的页眉和页脚文件，它是不完整的。因此，语法 {% include "file.twig" %} 将帮助我们包含两个不同的 Twig 模板：

扩展基本模板

我们创建了一个 base.twig 文件作为父模板，并将内容块留空。该块可以在任何会修改它的自定义 Twig 文件中使用，并且基本模板的其余部分将按原样继承。例如，让我们创建一个 single.twig 文件，该文件将扩展 base.twig 模板并修改 content 块。

{# Single Template: `single.twig` #}{% extends "base.twig" %}{% block content %}    <div class="single_content">        <h1>{{ post.title }}</h1>        <p>{{ post.get_content }}</p>    </div>{% endblock %}

此代码显示自定义 single.twig 文件。在第 3 行，该模板扩展为 base.twig 作为其父模板或基本模板。 extends 标签可用于从另一个模板扩展模板。

这里，与 header 和 footer 相关的所有详细信息均继承自 base.twig 文件，该文件是父模板，而 content 块将替换为帖子标题和内容。这有多有趣？

木材的 WordPress 备忘单

Timber 的开发人员已确保它从核心到最终用户以各种可能的方式补充 WordPress。尽管 Timber 中 WordPress 函数的转换语法有些不同，但它有很好的文档记录。在本文末尾，我将分享 WordPress 函数及其 Timber 等效函数的一些转换列表。让我们回顾一下。

简要回顾！

在我的上一篇文章中，我创建了一条欢迎消息，该消息仅通过演示网站主页上的 PHP 字符串填充。其代码可以在 GitHub 上的分支中找到。让我们再次重复此过程，但使用不同且更具技术性的方法。

现在，我将显示相同的欢迎消息，但这次是通过创建一个填充在主页上的新页面。

检索 Twig 中的 WordPress 函数

创建一个标题为“欢迎来到我的博客！”的新页面。并在点击发布按钮之前在其中添加一些内容。

现在让我们在主页上显示这个欢迎页面的内容。为此，请再次转到 index.php 文件并添加以下代码行。

<?php/** * Homepage */// Context array.$context = array();// Add the page ID which is 4 in my case.$context[ 'welcome_page' ] = Timber::get_post( 4 );// Timber render().Timber::render( 'welcome.twig', $context );

在这里，我添加了一个 $context 数组，在其中添加了一个元素 welcome_page 然后使用 get_post() 函数来获取我刚刚创建的页面。为此，我提交了页面 ID，在本例中为 4。

在 welcome.twig 文件中，让我们查看 print_r 元素 welcome_page 并看看我们得到了什么数据。我的welcome.twig 文件目前看起来像这样。

{# Message Template: `welcome.twig` #}<section class="message">        <pre class="brush:php;toolbar:false">            <code>{{ welcome_page | print_r }}</code>

我可以确认 $context 数组中的这个元素现在有一个 ID 为 4 的特定页面的 TimberPost 对象。

从这里我们可以获得所有可以在前端显示的属性。例如，我只想显示页面标题和内容。所以现在我的 welcome.twig 文件如下所示：

{# Message Template: `welcome.twig` #}<section class="message">        <h2>{{ welcome_page.title }}</h2>        <p>{{ welcome_page.content }}</p></section>

主页上有我们需要的信息。

WordPress 备忘单

正如我之前所说，Timber 为您提供了一些 WordPress 函数的便捷转换。这些功能可以帮助您获取与以下内容相关的信息：

get_context() 函数

有一个 Timber::get_context() 函数，用于检索开发人员希望在整个网站的前端显示的网站信息负载。文档是这样解释的：

这将返回一个对象，其中包含我们在整个站点中需要的许多常见内容。像你的 nav、wp_head 和 wp_footer 这样的东西你每次都会想要开始（即使你稍后覆盖它们）。您可以执行 $context = Timber::get_context(); print_r( $context ); 查看内部内容或打开 timber.php 自行检查。

<?php $context = Timber::get_context(); ?>

不仅如此，您还可以通过方便的过滤器将您自己的自定义数据添加到此函数中。

<?php/** * Custom Context * * Context data for Timber::get_context() function. * * @since 1.0.0 */function add_to_context( $data ) {    $data['foo'] = 'bar';$data['stuff'] = 'I am a value set in your functions.php file';$data['notes'] = 'These values are available everytime you call Timber::get_context();';$data['menu'] = new TimberMenu();return $data;}add_filter( 'timber_context', 'add_to_context' );

您可以在下面找到更多与此类似的转换，这些转换可以与 Timber 一起使用。

博客信息

身体等级

主题

wp_函数

让我们从博客信息开始尝试一些功能。将 foo 写入 {{ site.name }}。

前端将显示这样的站点标题：

Timber 还具有一些函数转换，可以通过 TimberPost( )。在解释这个函数的用法之前，我们先列出与其相关的函数转换。

发布

用法

在 single.php 文件中使用此代码。

<?php$context = Timber::get_context();$context[ 'post' ] = new TimberPost(); Timber::render( 'welcome.twig', $context );?>

现在让我们测试 Twig 文件中的 {{ post.title }} 函数。

<section class="single_post">        <h2>{{ post.title }}</h2>        </section>

保存，前端会显示这样的帖子标题：

轮到你了！

今天，您在构建 WordPress 主题时见证了 Timber 和 Twig 的 DRY 原则的实际实施。阅读本教程并尝试实现它，如果您有任何问题，请告诉我。您可以在此 GitHub 存储库的 WP Cheatsheet 分支中找到完整的代码。

在下一篇也是上一篇文章中，我将讨论如何在基于 Twig 的 WordPress 模板中处理图像和菜单。在此之前，请在 Twitter 上与我联系以获取您问题的答案，或在此处发布问题。

文章推荐