为侧边菜单创建外部文件答案

【问题标题】：Create an external file for side menu为侧边菜单创建外部文件
【发布时间】：2020-02-14 14:48:27
【问题描述】：

如何为我的侧边菜单创建外部文件？

<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
<a href="C++.html" style="font-size: 1.1em;font-weight: 900;">C++</a>
<a href="CSharp.html" style="font-size: 1.1em;font-weight: 900;">C#</a>
<a href="Go.html" style="font-size: 1.1em;font-weight: 900;">Go</a>
<a href="Java.html" style="font-size: 1.1em;font-weight: 900;">Java</a>
<a href="JavaScript.html" style="font-size: 1.1em;font-weight: 900;">JavaScript</a>
<a href="PHP.html" style="font-size: 1.1em;font-weight: 900;">PHP</a>
<a href="Python.html" style="font-size: 1.1em;font-weight: 900;">Python</a>
<a href="Ruby.html" style="font-size: 1.1em;font-weight: 900;">Ruby</a>
<a href="Swift.html" style="font-size: 1.1em;font-weight: 900;">Swift</a>

目前我在每个文件中都有这些链接，而且代码太多了。有没有办法为菜单项创建一个外部文件？

我试过this，但问题是class="active"。当我的菜单项在 index.php 中时，我想突出显示一个菜单项当我的菜单位于每个单独的 HTML 文件中时，我知道如何实现这一点，但是当它位于外部 PHP 文件中时，我该怎么做？

索引.php

<html>
<head>
  <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
  <link rel="stylesheet" type="text/css" href="CSS/Nav.css">
  <link rel="stylesheet" type="text/css" href="CSS/Card.css">
  <link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="sidenav">

 <h1>&nbspOthers</h1>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS Excel</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS PowerPoint</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS Word</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">WordPress</a>
</div>

</body>
</html>

主文件

<?php include('index.html'); ?>

【问题讨论】：

不要使用 JS 来包含来自另一个页面的静态内容（因为它会向服务器发出额外的请求）。相反，您应该能够在将 HTML 发送到浏览器之前在服务器上“包含”内容。具体操作方式取决于您使用的服务器类型及其支持的技术。
现在我自己托管它。如果我获得足够的流量@RoryMcCrossan，我可能会转移到服务器
我有几个问题：您是文件.html 还是.php 文件？你的文件的命名不清楚，你的主文件包括index.html，你的另一个文件是index.php。您是否在托管您网站的服务器/计算机上安装了 PHP 解释器（如 Apache）？如果主机没有 PHP 解释器，则不会解释 PHP 文件中的 PHP 代码

标签： javascript jquery html css include

【解决方案1】：

您不应该使用 javascript 来包含您的菜单。您可以使用 PHP 简单地将您的菜单（但我建议标头）文件包含到您的页面：

<?php include('/template/header.html'); ?>

或者你可以使用像Gulp这样的预处理器：

@@include('./template/header.html')

var fileinclude = require('gulp-file-include'),
gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

或Pug或Grunt和......

关于您在 cmets 中的问题。假设您在主文件夹中，并且有这 3 个文件：

index.php
header.html
homepage.html
footer.html

index.php 应该是这样的：

<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>

然后在浏览器中打开 index.php 。

** 不要同时使用 index.html 和 index.php。

如果它不起作用。您的 index.php 文件中应该会出现错误。

当您的代码有效时。我建议您使用 readfile() 而不是 include 。如果您的其他文件只是 html 并且其中没有任何 php 代码。

【讨论】：

由于某种原因 PHP 包含不起作用。我应该在我的 .html 代码中安装一些额外的插件来实现 php 或其他东西吗？
@HaileyAsh 你有什么错误吗？您的主文件（例如：index.php）是否与 header.html 文件位于同一目录中？
把index.html的扩展名改为index.php，然后使用这个文件里面的php代码。

【解决方案2】：

正如Abolfazl Ghaemi 指出的那样：

您不应该使用 javascript 来包含您的菜单。您可以使用 PHP 简单地将您的菜单（但我建议标头）文件包含到您的页面：
<?php include('/template/header.html'); ?>

Gulp/Grunt 解决方案很好，但我会坚持使用 <?php include(); ?> 解决方案来解决您的问题。

主机会说 PHP 吗？

如果浏览器可以很好地读取 HTML 来为您提供网页，那么它们就无法读取 PHP。相反，PHP 需要由主机上的某些东西执行，并且您将需要一个 PHP 解释器，例如 Apache。

如果您还没有，我强烈建议您使用install it 甚至是完整的AMP stack。

HTML 文件中的 PHP 不起作用

您需要确保使用 PHP 指令的文件是.php 文件。否则，您的<?php ?> 标记中的代码（PHP 代码）根本不会被解释。

确保您的主文件是.php 文件。

您调用的文件是否正确？

此外，您需要确保所包含的文件名正确。你的问题中显示的内容是

主文件

<?php include('index.html'); ?>

但您的文件实际上是 index.php 而不是 index.html。

HTML 加上 CSS 更漂亮

如果您想用active 类“突出显示”项目，您将需要 CSS。您可以使用 <style> 标签在文件中快速添加 CSS。请参阅下面的示例。

<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

【讨论】：

好吧，让 php 工作没什么大不了的。但正如我在问题中提到的，如何突出显示某个菜单
我的错，没看到那部分 :) 你可以通过在 active 类上添加 CSS 来实现。您可以在 <style> 标记中快速将 CSS 代码添加到文件中。我将编辑我的答案以涵盖该部分。
我想你误会了。请参阅我有 10 个具有相同菜单的文件。当我在页面 A 中时，我希望菜单中的 A 突出显示。当我在页面 B 中时，我希望 B 被突出显示。我可以通过在每个 html 文件中添加代码来轻松实现这一点。我的问题是如何使用一个外部包含文件来放置我的菜单并实现这一目标
好的，我想我明白了：您希望在所有其他页面中包含“菜单”文件，并且希望该“菜单”文件自动突出显示与当前页面对应的链接。是这样吗？