Question

问题面对 - 我有基本模板和一些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>

Answer 1

如果要从父模板继承和扩展块，则应使用{{parent（）}}函数，如下所示：

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

您可以在Twig documentation

中阅读更多详细信息

Answer 2

在您的页面模板中执行以下操作：

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

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

Answer 3

如果您需要添加特定的CSS链接，并且还从基础布局继承CSS个链接

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

即可

EX：

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

没有 parent()方法进入View Page会覆盖您的所有CSS链接到基本布局

Answer 4

在基本模板中移动树枝块外的css链接

<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>

这些样式表将在所有页面中提供，您的视图模板可以添加其他样式表。

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

4 个答案: