【问题标题】:How do I add a navbar on every page of my website?如何在我网站的每个页面上添加导航栏?
【发布时间】:2015-03-14 23:00:22
【问题描述】:

您好,我是创建网站的新手,最近一直在搞乱 HTMl 和 CSS。我创建了一个导航栏,并希望将其放在每一页上。我以前研究过这个,但就是想不通。它只是没有放在页面上的导航栏中。

home.html

                            <!DOCTYPE html>
                            <html>
                            <head>
                            <link rel="stylesheet" type="text/css" href="style.css">
                            </head>
                            <body>
                            <?php include 'navbar.php';?>
                            <div id="hbox1">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            <div id="hbox2">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            <div id="hbox3">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here!</a></p>
                            </div>
                            <div id="hbox4">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            </body>
                            </html>

和 navbar.php

                            <h1>&nbsp&nbspMy Homepage</h1>
                            <ul id="nav">
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            </ul>

【问题讨论】:

  • 我现在用 代替。它仍然没有工作。我一定是做错了什么。很抱歉我是新手。
  • 您需要发布您的代码,而不是“图片”。
  • 很抱歉,我花了这么长时间才弄清楚你的标签是 8 次:P
  • 其实就是每行代码后面跟4个空格(或者更多)。使用 Notepad++ 使这项任务变得更容易;-)

标签: php html css navbar


【解决方案1】:

您的代码无法正常工作的原因是您尝试使用.html 文档解析 PHP 代码。

您要么指示 Apache 将 .html 文件视为 PHP,要么将 home.html 重命名为 home.php


.html 文件视为PHP。

在服务器根目录中的.htaccess

<FilesMatch "\.(htm|html|php)$">
SetHandler application/x-httpd-php
</FilesMatch> 

或单个文件名:

<Files yourpage.html>
AddType application/x-httpd-php .html
</Files>

或多个文件名:

<FilesMatch "^(file_one|file_two|file_three)\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

AddType application/x-httpd-php .php .htm .html
AddHandler x-httpd-php .php .htm .html

对于 HostGator 托管的人:Source

AddHandler application/x-httpd-php5 .html .htm

如果你在本地使用 XAMPP 开发,你应该使用 AddHandler 而不是 AddType

AddHandler application/x-httpd-php .html .htm

【讨论】:

【解决方案2】:

Fred 是对的,你的文件扩展名必须注册为 php 可解释的。

我个人建议您将主文件的扩展名更改为 .php,而不是将您的 Web 服务器配置为使用 php 解释 html。

您还需要考虑使用允许您扩展内容的模板引擎(如TwigSmarty)。有一个基本模板定义 narbar、工具栏或其他页眉/页脚并使用其他文件扩展它是一种常见的做法。

下面是 Twig 的示例:

base.html

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

content1.html

{% extends 'base.html' %}
{% block body %}
  My pretty content1
{% endblock %}

【讨论】:

    猜你喜欢
    • 2019-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-28
    • 1970-01-01
    • 2017-11-29
    • 2014-08-01
    • 1970-01-01
    相关资源
    最近更新 更多