README

本 symfony 扩展包提供 BEM 辅助函数，以便在 twig 模板中使用。

安装

确保已经全局安装了 Composer，具体步骤请参考 Composer 文档中的安装章节。

使用 Symfony Flex 的应用程序

打开命令行，进入您的项目目录，并执行以下命令

$ composer require mothership/twig-bem-bundle

未使用 Symfony Flex 的应用程序

步骤 1: 下载扩展包

打开命令行，进入您的项目目录，并执行以下命令以下载此扩展包的最新稳定版本

$ composer require mothership/twig-bem-bundle

步骤 2: 启用扩展包

然后，将扩展包添加到项目 config/bundles.php 文件中已注册的扩展包列表中来启用它

// config/bundles.php

return [
    // ...
    Mothership\TwigBemBundle\TwigBemBundle::class => ['all' => true],
];

使用方法

bemBlock(blockName, modifiers = [])

可以这样使用： <div class="{{ bemBlock('myBlock') }}"></div>

参数

• blockName: 字符串
• modifiers: （可选）字符串数组

bemElem(elementName, modifiers = [])

此函数只能在父树中定义了 bemBlock 的情况下使用。可以这样使用： <div class="{{ bemElem('myElement') }}"></div>

参数

• elementName: 字符串
• modifiers: （可选）字符串数组

示例

{% block body %}
    <div class="{{ bemBlock('listing') }}">
        <div class="{{ bemElem('pagination') }}"></div>
        <div class="{{ bemBlock('product') }}">
            <div class="{{ bemElem('title') }}"></div>
        </div>
        <div class="{{ bemBlock('product', ['active', 'sale']) }}">
            <div class="{{ bemElem('title', ['bold']) }}"></div>
        </div>
    </div>
{% endblock %}

这将产生相应的输出/标记

<div class="listing">
    <div class="listing__pagination"></div>
    <div class="product">
        <div class="product__title"></div>
    </div>
    <div class="product product--active product--sale">
        <div class="product__title product__title--bold"></div>
    </div>
</div>