CSS中通配输入文字的小技巧——如何在元素名中包含通配符

Posted 2023-05-26 IZWB-003的技术中心

CSS中，在各类名称内使用通配的写法说明。

CSS中，*的作用是通配表示“全部”。遗憾的是，并没有一种通配元素名的方法。

例如，我有好几个东西class都标记为了my-element-序号，就像这样：

<p class="my-element-1"></p>
<p class="my-element-2"></p>
<p class="my-element-3"></p>
...

我现在希望让所有这些class的东西都应用同一个css规则。可惜，css并不支持这么一种写法：

.my-element-* 

那怎么办呢？实际上，css针对元素名等名字也可以实现通配，技巧是这么写：

[class^="my-element-"] 

就是这样。
“^=”的意思是：“以等号后面内容开头的所有”。那么这样写，规则就可以生效到所有以"my-element-"开头的class。
同理还有两种：
“$=”：以等号后面内容结束的所有
“*=”：包含等号后面内容的所有

就此，我们在css中希望通配应用到好几个元素上，就可以用这种方式实现了。

这种写法应用的是Attribute Selector。可参考mozilla的文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

开发者们一般建议，应用这种方式时，html里不写做class，而是自己起一个data-tagname。就像这样：

<p data-tagname="my-element-1"></p>
<p data-tagname="my-element-2"></p>
<p data-tagname="my-element-3"></p>
...

[data-tagname^="my-element-"] 

这样可以实现更好的容错。
就是这样。

---

参考资料：https://stackoverflow.com/questions/30445913/css-wildcard-element-name-selection

如何在 Symfony (Twig) 中包含可重用的小部件？

【中文标题】如何在 Symfony (Twig) 中包含可重用的小部件？

【英文标题】：How to include a reusable widget in Symfony (Twig)?

【发布时间】：2017-06-07 02:51:49

【问题描述】：

所以，我对 Symfony 和 Twig 还是很陌生。我想知道如何在模板中最好地包含/创建可重用代码的 sn-p。例如，假设您有一个要在每个页面上显示的侧边栏。

% extends 'AppBundle::base.html.twig' %

% block body %
    <div id="wrapper">
        <div id="content-container">
            # Main content... #
        </div>
        <div id="sidebar">
            % include 'sidebar.html.twig' %
        </div>
    </div>
% endblock %

在那个侧边栏中有几个小部件，它们都有自己的逻辑。您如何创建/包含这些小部件？

到目前为止，我遇到了几种解决方案。

作为控制器

第一个是 Twig 中的embed the widget as a controller(s)。

class WidgetController extends Controller

    public function recentArticlesWidgetAction()
    
        // some logic to generate to required widget data
        // ...

        // Render custom widget template with data
        return $this->render('widgets/recentArticles.html.twig', array('data' => $data)
        );
    
    public function subscribeButtonWidgetAction()
    
        // ...

        return $this->render('widgets/subscribeButton.html.twig', array('data' => $data)
    

    // Many more widgets
    // ...

并像这样将其包含在“sidebar.html.twig”中

<div id="sidebar">        
    # Recent Articles widget #
     render(controller('AppBundle:Widget:recentArticlesWidget' )) 

    # Subscribe-Button widget #
     render(controller('AppBundle:Widget:subscribeButtonWidget' )) 

    # and so on #
</div>

作为服务

我还看到一些人将小部件注册为服务（可以直接在 Twig 中使用）。与小部件主类

// src/AppBundle/Service/RecentArticlesWidget.php
namespace AppBundle\Service;

use Symfony\Component\DependencyInjection\ContainerInterface;

class RecentArticlesWidget

    protected $container;

    public function __construct(ContainerInterface $container)
    
        $this->container = $container;
    

    public function getRecentArticles()
    
        // do some logic (use container for doctrine etc.)
    

然后注册为服务，

# src/AppBundle/Resources/config/services.yml
services:
    recentArticlesWidget:
        class:     AppBundle\Service\RecentArticlesWidget
        arguments: ["@service_container"]

传递给控制器​​中的模板，

namespace AppBundle\Controller;

class SidebarController 

    public function showAction($request) 

        // Get the widget(s) 
        $recentArticlesWidget = $this->get('recentArticlesWidget'); 

        // Pass it (them) along
        return $this->render('sidebar.html.twig', array('recentArticlesWidget' => $recentArticlesWidget));
    

所以它可以在 Twig 中像这样简单地使用

# sidebar.html.twig #

 recentArticlesWidget.getRecentArticles()|raw 

或者，您还可以通过将服务添加到 Twig 配置中来直接将服务添加到 Twig 全局变量中。这样，控制器就不需要将它传递到视图中。

#app/config/config.yml
twig:
    globals:
        # twig_var_name: symfony_service
        recentArticlesWidget: "@recentArticlesWidget"

作为 Twig 扩展

这与使用上面的服务（see the documentation）非常相似。您创建了一个与之前显示的服务几乎相同的 twig 扩展类

// src/AppBundle/Twig/RecentArticlesWidgetExtension.php
namespace AppBundle\Twig;

class RecentArticlesWidgetExtension extends \Twig_Extension

    protected $container;

    public function __construct(ContainerInterface $container)
    
        $this->container = $container;
    

    public function getFunctions()
    
        return array( 
            "getRecentArticles" => new Twig_Function_Method($this, "getRecentArticles")
            // register more functions
        );
    

    public function getRecentArticles()
    
        // do some logic (use container for doctrine etc.)
    

    // Some more functions...

    public function getName()
    
        return 'WidgetExtension';
    

将其注册为带有添加标签的服务

# src/AppBundle/Resources/config/services.yml
services:
    recentArticlesWidget:
        class: AppBundle\Twig\RecentArticlesWidgetExtension
        arguments: [@service_container]
        tags:
            -  name: twig.extension 

并像 Twig 中的全局函数一样简单地使用它

# sidebar.html.twig #

 getRecentArticles() 

想法

我注意到的一件事是，对于最后两种方法，逻辑和视图似乎不再分离。您基本上编写了一个小部件函数并让该函数输出小部件的完整 html。这似乎违背了 Symfony 试图强制执行的模块化和模式。

另一方面，为每个小部件调用不同的控制器或控制器操作（使用它们自己的树枝渲染）似乎可能需要比可能需要的更多处理。我不确定它是否真的会减慢任何速度，但我想知道它是否过度。

长话短说，有没有在 Symfony 中使用可重用小部件的最佳实践？我确信其中一些方法也可以混合使用，所以我只是想知道如何最好地解决这个问题。

【参考方案1】：

Twig 扩展和 Twig 宏应该为您指明正确的方向。

对视图使用宏，对业务逻辑使用扩展。

在您的 Twig 扩展示例的旁注中，最好只传递您正在使用的服务而不是整个服务容器。

【参考方案2】：

我宁愿使用块和父模板。简单地说，在主布局中插入侧栏，并拥有所有其他需要侧栏的模板 从中继承。

类似这样的：

layout.html.twig 会是这样的：

% block title
// title goes here
%endblock%

<div id="wrapper">
    <div id="content-container">
        % block pageContent %
        % endblock %
    </div>
    <div id="sidebar">
        // Side bar html goes here
    </div>
</div>

现在所有页面都将从这个layout.html.twig 继承。例如，一个名为home.html.twig 的页面将是：

home.html.twig

% extends 'AppBundle::layout.html.twig' %

% block title%
// this page title goes here
% endblock %

% block pageContent %
    //This page content goes here
% endblock %

您可以根据需要添加任意数量的块，例如每个页面的 css 和 js 块。

希望这会有所帮助！

【讨论】：

感谢您的回答！您的建议是有用且正确的。但是，我的问题更多是关于如何最好地将复杂代码放在树枝模板的侧边栏（或其他任何地方）中。例如，需要进行自己的查询并具有各种逻辑来生成输出的内容。通常不会在主控制器中传递的东西。我以小部件作为一个简单的例子（给我取三篇最受欢迎的文章并很好地展示它们）。如上所述，我个人倾向于嵌入额外的“小部件控制器”，但我想知道其他人都做了什么。

【参考方案3】：

我认为最简单的方法是在模板中定义一个块，然后扩展该模板以渲染块，如下所示：

#reusable.html.twig

% block reusable_code %
  ...
% endblock %

和

#reused.html.twig
% extends 'reusable.html.twig' %

 block('reusable_code') 

如果您想要更多的可重用性，或者您的块包含业务逻辑或模型调用，则可以使用 twig 扩展

【讨论】：

他正在谈论在该小部件中使用逻辑数据，以一种他不必在每个控制器响应中发送该数据的方式。

“如果您想要更多的可重用性，或者您的块包含业务逻辑或模型调用，则可以使用树枝扩展”我应该添加一个示例