如何创建可重用的 Twig 组件

Posted 2023-02-23

【中文标题】如何创建可重用的 Twig 组件

【英文标题】：How to create a reusable Twig component

【发布时间】：2019-07-05 08:51:48

【问题描述】：

我正在开发一个使用 Twig 进行渲染的 Symfony 3 应用程序。为了使代码更具可读性和可重用性，我需要将屏幕分成小部分，这些部分可以在其他屏幕中使用（例如时钟小部件）。起初看起来很简单，我可以使用 include Twig 方法来包含那部分代码。问题是我的时钟使用了一些特定的 CSS 和 JS 脚本来工作。

创建由 html、CSS 和 JS 组成的可重用组件的最佳方法是什么？提前谢谢！

【参考方案1】：

也许您可以使用 include 将数据传递给特定的部分组件并动态呈现它。

检查一下：https://twig.symfony.com/doc/3.x/tags/include.html

【参考方案2】：

Twig 中没有“组件”的概念或方法，但您仍然可以将 CSS + HTML + JS 代码封装在一个文件中，并包含它作为隔离的一段代码：

<style>...</style> # or use <link href="..."> #
<div>...</div>
<script>...<script> # or use <script src="..."> #

但是，Twig 可能不是实现它的正确工具，您应该通过 HTML 属性传递数据来查看一些前端框架（例如 VueJS https://vuejs.org/v2/guide/index.html）。

【讨论】：

好吧，我想有可能包含 HTML 并重载样式表和 javascripts 块。我理解你对 Vue.js 或其他前端框架的想法，但这不是我项目的可能选择。谢谢你的回答！