Symfony2从基模板扩展模板时,会覆盖基模板链接


Symfony2 when extending the template from the base template its overriding the base template links

面临的问题-我确实有一些CSS和JS链接的基础模板,我已经创建了一个视图页面,我想添加一些CSS链接,这只是特定于这个视图页面,没有其他视图页面,这个视图页面从这个基础模板扩展。当我将一些CSS链接添加到视图页面时,它覆盖了基础模板CSS和JS文件。

任何解决方案都将受到赞赏。提前谢谢。

下面是我的BaseTemplate - 的代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Login Page{% endblock %}</title>
<!-- Bootstrap -->
{% block stylesheets %}
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/bootstrap-theme.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/signin.css') }}" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% endblock %}
</head>
...

下面是我的视图页面,我从基础模板扩展-

{% extends '::base.html.twig' %}
{% block stylesheets %}
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
{% endblock %}
<div class="container">
    <form class="form-signin" role="form" action="{{ path("user_auth_homepage") }}" method="POST">
      <h2 class="form-signin-heading">Login</h2>
      <input class="form-control" name="email" placeholder="Email address" required="" autofocus="" type="email">
      <input class="form-control" name="password" placeholder="Password" required="" type="password">
      <label class="checkbox">
        <input value="remember-me" type="checkbox" name="remember_me"> Remember me
      </label>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</div>

如果你想从父模板中继承和扩展一个块,你应该使用{{parent()}}函数,像这样:

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
{% endblock %}

你可以在Twig文档中阅读更多细节

在你的页面模板中做如下:

{% block stylesheets %}
  {{ parent() }}
  <link href="your_new_css" type="text/css" rel="stylesheet"/>
{% endblock %}

它将打印stylesheets块的父内容并应用您的新样式

如果您需要添加特定的CSS链接并从Base布局继承CSS链接

在视图页中使用parent()方法

,

{% block stylesheets %}
  {{ parent() }}
  <link href="{{ asset('') }}" rel="stylesheet" />
{% endblock %}

没有 parent()方法进入视图页将覆盖所有的CSS链接到基本布局

在基模板中将css链接移出twig块

<head>
    <title>{% block title %}Login Page{% endblock %}</title>
    <!-- Bootstrap -->
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/bootstrap-theme.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/signin.css') }}" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    {% block stylesheets %}
    {% endblock %}
</head>

这些样式表将在所有页面中可用,并且您的视图模板可以添加其他样式表