首页 > 解决方案 > 我从基地延伸的树枝文件没有得到样式

问题描述

我有一个基本的树枝文件,当它渲染时,它会获得一些我在公共文件夹中的样式。但是我有另一个从基础延伸的树枝文件,它只改变了基础的主体块,并且没有获得它们共享的块中的样式(页眉和页脚)。

如果有人知道答案,请提前感谢。

我的基地(称为maleteo.html.twig)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>
            {% block title %}Maleteo
            {% endblock %}
        </title>
        {% block stylesheets %}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
            <link href="https://fonts.googleapis.com/css?family=Catamaran:400,500&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="assets/styles/styles.css">
            <script src="https://kit.fontawesome.com/d5a5c93a6c.js" crossorigin="anonymous"></script>
        {% endblock %}
    </head>
    {% block header %}
        <body>
            <div class="wrapper">
                <div class="container-fluid">
                    <header class="header row">
                        <img src="assets/img/logo.svg" alt="Maleteo" class="col-md-3">
                        <p class="logged-user col-md-offset-7 col-md-2"><span class="fas fa-user"></span> {{ app.user.username | default }}
                        {% if app.user == null %}<a href="{{ path('app_login') }}"> Login</a><span> / </span><a href="{{ path('register') }}"> Regístrate</a>{% endif %}
                        {% if app.user %}<a href="{{ path('app_logout') }}">Logout</a>{% endif %}
                        </p>
                    </header>
                </div>
            </div>
        {% endblock %}
        {% block body %}
            <main>
                <div class="jumbo">
                    <div class="wrapper">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="jumbo__ww-title">
                                        <div class="jumbo__w-title">
                                            <h1 class="jumbo__title heading1">
                                                Gana dinero guardando equipaje a viajeros como tú
                                            </h1>
                                            <ul class="jumbo__app-btns">
                                                <li>
                                                    <a href="#">
                                                        <img src="assets/img/app-store.svg" alt="" class="jumbo__app-btn">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="">
                                                        <img src="assets/img/google-play.svg" alt="" class="jumbo__app-btn">
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="container-fluid">
                        <section class="howworks">
                            <h2 class="howworks__title heading2">
                                ¿Cómo funciona?
                            </h2>
                            <ol class="howworks__steps row">
                                <li class="col-md-4">
                                    <div class="howworks__step">
                                        <div class="howworks__step-w-bola">
                                            <div class="howworks__step-bola">
                                                <span class="heading3">1</span>
                                            </div>
                                        </div>
                                        <div class="howworks__step-w-txt">
                                            <p class="howworks__step-title heading3">
                                                Regístrate:
                                            </p>
                                            <p class="howworks__step-txt">
                                                Para obtener todas las ventajas puedes registrarte
                                                <a href="{{ path('register') }}">aquí</a>.
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="col-md-4">
                                    <div class="howworks__step">
                                        <div class="howworks__step-w-bola">
                                            <div class="howworks__step-bola">
                                                <span class="heading3">2</span>
                                            </div>
                                        </div>
                                        <div class="howworks__step-w-txt">
                                            <p class="howworks__step-title heading3">
                                                Solicita/consulta las demos:
                                            </p>
                                            <p class="howworks__step-txt">
                                                Puedes solicitar una demo en nuestro formulario o ver las solicitudes
                                                <a href="{{ path('showDemos') }}">aquí</a>.
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="col-md-4">
                                    <div class="howworks__step">
                                        <div class="howworks__step-w-bola">
                                            <div class="howworks__step-bola">
                                                <span class="heading3">3</span>
                                            </div>
                                        </div>
                                        <div class="howworks__step-w-txt">
                                            <p class="howworks__step-title heading3">
                                                Disfruta:
                                            </p>
                                            <p class="howworks__step-txt">
                                                Empieza a disfrutar de todas las ventajas que ofrece maleteo.
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </section>

                        <section class="app-form">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="app-form__w-app-img">
                                        <img src="assets/img/iPhoneX.png" srcset="assets/img/iPhoneX@2x.png 2x, assets/img/iPhoneX.png 1x" alt="" class="app-form__app-img">
                                    </div>
                                </div>
                                <div class="col-md-5 col-md-offset-1">
                                    <div class="the-form">
                                        <form
                                            action="{{ path('newDemo') }}" method="POST">
                                            <p class="the-form__title heading3">
                                                Solicita una demo
                                            </p>

                                            <div class="the-form__group">
                                                <label for="nombre">
                                                    Nombre
                                                </label>
                                                <input type="text" id="inputName" class="the-form__input" placeholder="por ej. Vincent Chase" name="nombre">
                                            </div>

                                            <div class="the-form__group">
                                                <label for="email">
                                                    Email
                                                </label>
                                                <input type="email" id="inputEmail" class="the-form__input" placeholder="por ej. vincent@mga.com" name="email">
                                            </div>

                                            <div class="the-form__group">
                                                <label for="ciudad">
                                                    Ciudad
                                                </label>
                                                <select id="inputCity" class="the-form__input the-form__select" name="ciudad">
                                                    <option value=''>Selecciona una Ciudad</option>
                                                    <option value=''>----------------</option>
                                                    <option value='Alava'>Álava</option>
                                                    <option value='Albacete'>Albacete</option>
                                                    <option value='Alicante'>Alicante</option>
                                                    <option value='Almeria'>Almería</option>
                                                    <option value='Asturias'>Asturias</option>
                                                    <option value='Avila'>Ávila</option>
                                                    <option value='Badajoz'>Badajoz</option>
                                                    <option value='Barcelona'>Barcelona</option>
                                                    <option value='Burgos'>Burgos</option>
                                                    <option value='Caceres'>Cáceres</option>
                                                    <option value='Cadiz'>Cádiz</option>
                                                    <option value='Cantabria'>Cantabria</option>
                                                    <option value='Castellon'>Castellón</option>
                                                    <option value='Ceuta'>Ceuta</option>
                                                    <option value='Ciudad Real'>Ciudad Real</option>
                                                    <option value='Cordoba'>Córdoba</option>
                                                    <option value='Cuenca'>Cuenca</option>
                                                    <option value='Girona'>Girona</option>
                                                    <option value='Las Palmas'>Las Palmas</option>
                                                    <option value='Granada'>Granada</option>
                                                    <option value='Guadalajara'>Guadalajara</option>
                                                    <option value='Guipuzcoa'>Guipúzcoa</option>
                                                    <option value='Huelva'>Huelva</option>
                                                    <option value='Huesca'>Huesca</option>
                                                    <option value='Illes Balears'>Illes Balears</option>
                                                    <option value='Jaen'>Jaén</option>
                                                    <option value='A Coruña'>A Coruña</option>
                                                    <option value='La Rioja'>La Rioja</option>
                                                    <option value='Leon'>León</option>
                                                    <option value='Lleida'>Lleida</option>
                                                    <option value='Lugo'>Lugo</option>
                                                    <option value='Madrid'>Madrid</option>
                                                    <option value='Malaga'>Málaga</option>
                                                    <option value='Melilla'>Melilla</option>
                                                    <option value='Murcia'>Murcia</option>
                                                    <option value='Navarra'>Navarra</option>
                                                    <option value='Ourense'>Ourense</option>
                                                    <option value='Palencia'>Palencia</option>
                                                    <option value='Pontevedra'>Pontevedra</option>
                                                    <option value='Salamanca'>Salamanca</option>
                                                    <option value='Segovia'>Segovia</option>
                                                    <option value='Sevilla'>Sevilla</option>
                                                    <option value='Soria'>Soria</option>
                                                    <option value='Tarragona'>Tarragona</option>
                                                    <option value='Tenerife'>Santa Cruz de Tenerife</option>
                                                    <option value='Teruel'>Teruel</option>
                                                    <option value='Toledo'>Toledo</option>
                                                    <option value='Valencia'>Valencia</option>
                                                    <option value='Valladolid'>Valladolid</option>
                                                    <option value='Vizcaya'>Vizcaya</option>
                                                    <option value='Zamora'>Zamora</option>
                                                    <option value='Zaragoza'>Zaragoza</option>
                                                </select>
                                            </div>
                                            <div class="the-form__group the-form__group_checkbox">
                                                <input type="checkbox" id="privacity">
                                                <label for="privacity">
                                                    Acepto la
                                                    <a href="">política de privacidad</a>
                                                </label>
                                            </div>
                                            <input type="submit" class="the-form__btn btn btn-lg btn-primary" value="Enviar">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section class="opinions">
                            <h2 class="opinions__title heading2">
                                Opiniones de otros guardianes
                            </h2>
                            <p>Escriba su opinión
                                <a href="{{ path('showOpiniones') }}">aquí</a>
                            </p>
                            <ul class="row">
                                {% for opin in opiniones %}
                                    {% if opin.id < 4 %}
                                        <li class="col-md-4">
                                            <div class="opinion">
                                                <blockquote class="opinion__blq simple-bubble text-large">{{ opin.comentario }}</blockquote>
                                                <p class="opinion__author text-large">{{ opin.autor }}</p>
                                                <p class="opinion__author-address">{{ opin.ciudad }}</p>
                                            </div>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </section>
                    </div>
                </div>
            </main>
        {% endblock %}
        {% block javascripts %}{% endblock %}
        {% block footer %}
            <footer class="footer">
                <div class="wrapper">
                    <div class="container-fluid">
                        <img src="assets/img/logo.svg" alt="Maleteo" class="footer__logo">
                        <p class="footer__claim">
                            Hecho con ❤️ en Málaga.
                        </p>
                    </div>
                </div>
            </footer>
        {% endblock %}
    </body>
</html>

然后是我从maleteo扩展的文件:

{% extends 'maleteo.html.twig' %}

{% block title %}Login
{% endblock %}

{% block body %}
    <main>
        <div class="jumbo">
            <div class="wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">


                            <form method="post">
                                {% if error %}
                                    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                {% endif %}

                                {% if app.user %}
                                    <div class="mb-3">
                                        Has ingresado como:
                                        {{ app.user.username }},
                                        <a href="{{ path('app_logout') }}">Logout</a>
                                    </div>
                                {% endif %}

                                <h1 class="h3 mb-3 font-weight-normal">Por favor, ingrese con su cuenta:</h1>
                                <label for="inputUsername">Username</label>
                                <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" required autofocus>
                                <label for="inputPassword">Password</label>
                                <input type="password" name="password" id="inputPassword" class="form-control" required>

                                <input
                                type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                                {#
                                        Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
                                        See https://symfony.com/doc/current/security/remember_me.html

                                        <div class="checkbox mb-3">
                                            <label>
                                                <input type="checkbox" name="_remember_me"> Remember me
                                            </label>
                                        </div>
                                    #}

                                <button class="btn btn-lg btn-primary" type="submit" onclick {{ path('maleteo-home') }} ]>
                                    Sign in
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}

标签: symfonytwigstylesextends

解决方案


尝试删除

{% block stylesheets %}{% endblock %}

来自基本模板的定义(保持样式),或使用

{% block stylesheets %} {{ parent() }} {% endblock %}

title在和body块之间的子模板中


推荐阅读