个人中心
gpt4 book ai didi

html - Symfony 3 - 导航栏在除一页以外的每一页上都正确显示？

转载 作者：太空宇宙 更新时间：2023-11-03 22:28:42 26 4
gpt4 key购买 nike

大家好，我正在用 Symfony 3 开发一个应用程序，它有一个导航栏。导航栏在每个页面上都得到了扩展，并且在每个页面上都能正确显示。导航栏使用 bootstrap 的 css 来设计导航栏。

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

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

{% block body %}
<div class="art">
    <div class="container">
        <h1>Arthritis Care</h1>
        <p>You have signed up to the app with your specified illness being Arthritis.</p>
        <p>Try exploring our app</p>
    </div>
</div>

<div class="container">
    <div class="row">
            <div class="col-sm">
                <div class="column1">
                Arthritis Care & Exercises
                </div>
                <img src="../images/arthritisHands.png" alt="Hands With Arthritis" height="300" width="350">
            </div>
             <div class="col-sm">
                 <div class="column2">
                     Arthritis Ireland
                 </div>
                 <img src="../images/artIreland.png" alt="Arthritis Ireland Logo" height="300" width="350">
             </div>
            <div class="col-sm">
                <div class="column3">
                    Useful Numbers & Information
                </div>
                <img src="../images/redphone.png" alt="Red Phone" height="300" width="350">
            </div>
    </div>
</div>
{% endblock %}

enter image description here

它对其他所有页面都是这样工作的。但是对于这一页，它显示的是导航栏的选项，而不是 css？有谁知道这是什么原因？

{# default/scheduler.html.twig #}
{% extends 'base.html.twig' %}

{% block stylesheets %}

<link rel='stylesheet' type='text/css' href='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler_flat.css") }}' charset="utf-8"/>
<link rel="stylesheet" href="{{ asset('css/scheduler.css') }}"/>
{% endblock %}

{% block body -%}

<div id="scheduler_element" class="dhx_cal_container" style='width:100%; height:600px;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>
</div>

{% endblock %}

{% block javascripts %}
<!-- Include the scheduler library -->
<script src='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler.js") }}' type='text/javascript' charset="utf-8"></script>

<!-- Include jQuery to handle AJAX Requests -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Include Momentjs to play with the dates -->
<script src="{{ asset("libraries/momentjs/moment.js") }}"></script>

<script>

    window.GLOBAL_APPOINTMENTS = {{ appointments|raw }};


    window.GLOBAL_SCHEDULER_ROUTES = {
        create: '{{ path("scheduler_create") }}',
        update: '{{ path("scheduler_update") }}',
        delete: '{{ path("scheduler_delete") }}'
    };

    window.GLOBAL_CATEGORIES = {{ categories|raw }};
</script>

<!-- Include the schedulerScripts that you will need to write in the next step -->
<script src='{{ asset("libraries/schedulerScripts.js") }}' type='text/javascript' charset="utf-8"></script>
{% endblock %}

enter image description here

供引用的导航栏 Twig 模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

{% block title %}Health Centre Ireland{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/css/bootstrap.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('redcross.ico') }}" />
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" a href="#">Health Centre Ireland</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarsExampleDDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="{{ path('login') }}">Home <span class="sr-only"></span> </a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="{{ path ('scheduler') }}">Calender</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">Message Board</a>
        </li>

            <li class="nav-item">
                {% if app.user %}
                <a class="nav-link" href="
                    {{ logout_path('main') }}">
                        Log Out</a>
                {% else %}
                <a class="nav-link" href="
                {{ path ('login') }}">
                    Log In</a>
                {% endif %}

        <li class="nav-item">
            {% if app.user %}
                <a class="nav-link" href="{{ path('deleteuser') }}"> Delete Account</a>
            {% endif %}
        </li>
    </ul>
    <img class="redcross"
         src="../images/redcross.png" height="40" width="40">
</div>

{% if app.session.flashBag.has('success') %}
    <div class ="alert alert-success">
        {% for msg in app.session.flashBag.get('success') %}
            {{ msg }}
        {% endfor %}
    </div>
{% endif %}
</nav>

{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}

最佳答案

在您的模板中，您删除 stylesheets block 的内容。

你必须调用 {{ parent() }} Twig 函数来继承基本模板:

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

    <link rel='stylesheet' type='text/css' href='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler_flat.css") }}' charset="utf-8"/>
    <link rel="stylesheet" href="{{ asset('css/scheduler.css') }}"/>
{% endblock %}

https://twig.symfony.com/doc/2.x/tags/extends.html#child-template

关于html - Symfony 3 - 导航栏在除一页以外的每一页上都正确显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49797282/

26 4 0
文章推荐： Node.js http.get 在函数中返回 "undefined"
文章推荐： javascript - 有没有一种方法可以多次要求一个文件作为不同的模块
文章推荐： c# - 将通用对象转换为强类型 T
文章推荐： javascript - 火力地堡 : Wait For Async and Push to an array