面临的问题-我确实有一些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>
这些样式表将在所有页面中可用,并且您的视图模板可以添加其他样式表