当前位置: 首页 > 面试题库 >

将导航栏添加到所有模板

冉高寒
2023-03-14
问题内容

我想在每个页面上显示一个导航栏。在PHP中,我会编写导航栏,然后将其包含在其他页面上。我试图将导航栏模板包括或扩展到其他模板中,但是没有用。它仅输出“这是主页”。如何在每个模板中正确包含导航栏?

layout.html

<!doctype html>
<html>
    <body>
        {% block navbar %}
            <style>
                body {
                    margin: 0;
                    padding: 0;
                }

                div{
                    background: #333;
                    color: #f9f9f9;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                }
            </style>

            <div>NAVBAR</div> 
        {% endblock %}

        {% block content %}
        {% endblock %}
    </body>
</html>

index.html

This is the home page.
{% extends "layout.html" %}

{% block navbar %} {% endblock %}

{% block content %}
    <h1>This is the homepage!</h1>
{% endblock %}

问题答案:

使用所有页面共有的布局和导航创建基本模板。然后扩展此模板以创建实际的页面。向基本模板中添加可以在其他模板中覆盖的块。

base.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>{% block title %} - My Site</title>
    </head>
    <body>
        <div>Navbar</div>
        {% block content %}{% endblock %}
    </body>
</html>

index.html

{% extends 'base.html' %}

{% block content %}
<h3>{% block title %}Home{% endblock %}</h3>
<p>Hello, World!</p>
{% endblock %}

请注意,导航栏仅在基本模板中定义。它不需要块,并且子模板中的内容将在其后被细分。



 类似资料:
  • 问题内容: 我试图将欢迎页面/简介页面添加到Kibana 4,并且需要修改导航菜单。我在/src/kibana/plugins/kibana/kibana.html上找到了导航源html文档,但无法确定从何处插入了选项卡名称。 这是进行呼叫的列表代码块: 与单词“ Discover”,“ Visualize”,“ Dashboard”和“ Settings”相关联,如下所示: http://www

  • 我有一个应用程序,我正在编写,它已经包含了很多代码,我决定我想添加一个导航抽屉到主要的activity工具栏,但我不知道如何做,不创建一个新的导航抽屉项目,复制我的整个项目到它,这似乎是很多工作,有没有一个教程添加导航抽屉到一个现有的项目?

  • 没起作用。 请帮帮忙。这可能是一个愚蠢的问题。但我对Andrdoid还不熟悉。 谢谢

  • 我正在学习android和java的编程,需要一些关于android上“导航抽屉”的帮助。 我正在努力为抽屉项的单击侦听器添加一个switch语句,我使用的代码取自以下示例:http://hmkcode.com/android-creating-a-navigation-drawer/ 我应该如何准确地处理switch语句,以便从触摸其中一个项目开始新的活动? 非常感谢。 编辑 public vo

  • 问题内容: 我正在尝试使用导航栏(“后退”按钮,标题等)和选项卡栏(底部的工具栏)制作一个应用程序。我使用的是子视图,因此不必担心状态栏,导航栏,标签栏的高度等问题。但是我认为这给我带来了麻烦,因为我似乎无法弄清楚如何设置导航栏和标签栏。 这就是我所拥有的。我究竟做错了什么? AppDelegate.h AppDelegate.m ViewController.h ViewController.m

  • 我有问题使我的导航栏坚持到页面的右手边(同时仍然在1040px容器)。我希望导航栏是在同一行的标题'Ejharris tutoring'但在右边 代码如下: 样式表: HTML: