在所有页面中使用部分 html-body答案

【问题标题】：use part of html-body through all the pages在所有页面中使用部分 html-body
【发布时间】：2013-10-06 17:38:12
【问题描述】：

可能标题不太清楚，因为我不知道如何解释。我正在创建我的 html（一次性工作，所以不使用 java。只是带有 css 的普通 html）。

考虑这个示意图（Pic 1）。左侧面板和页脚几乎在整个网站的所有页面中都是相同的，它包含指向网站其他页面的链接。

|================================|
||-------||------------||------| |
||LEFT   ||CENTER      ||RIGHT | |
||PANEL  ||PANEL       ||PANEL | |
||_______||____________||______| |
||_______________________________|
||  FOOTER                       |
||_______________________________|
|================================|

Pic.1 网页布局

|------------------------|
|                        |
|link to pA              |
|link to pB              |
|                        |
|current link highlited  |
|------------------------|

图2。左面板布局

但以我目前的知识，如果我尝试在左侧面板和页脚中进行任何更改，我必须更改所有页面。是否可以将此左侧面板写入单独的文件中，并将其包含在需要的地方？

另外，可能是一个单独的问题，但已链接，假设将左侧面板写入单独的文件是可能的。是否可以突出显示当前访问的页面链接？（见Pic 2）

【问题讨论】：

标签： html css webpage highlight

【解决方案1】：

EDIT 对不起，我没有引起足够的重视。你没有用PHP？在这种情况下，看看 HTML5 include file

我找不到在主页和包含文件之间共享数据的方法。也许如果可能的话，在您包含的文件中，您可以使用# 标签，例如mypage.html#hello 并用 JavaScript 解析它以找出您正在访问的页面。

您实际上是在回答自己的问题。只需取出 HTML 代码并将其放在单独的文件中，然后将其包含在原来的位置即可。

说你的代码是

<div id="main">
    <div id="left-panel">
        <div id="links etc"></div>
    </div>
    <div id="another"></div>
</div>

您可以将left-panel 部分放入一个单独的文件中，并将其包含在原来的位置。

left-panel.php

<div id="left-panel">
    <div id="links etc"></div>
</div>

原始文件

<div id="main">
    <?php include 'left-panel.php'; ?>
    <div id="another"></div>
</div>

要知道您当前正在访问哪个页面，您可以使用变量。说在您放置<?php $page = 'shop'; ?> 的每个页面中，并在left-panel.php 内部使用if 语句，例如：

<ul>
    <li><a href="page1.php" <?php if($page == 'page1') echo 'class="active"'; ?>>Page1</li>
    <li><a href="page2.php" <?php if($page == 'page2') echo 'class="active"'; ?>>Page2</li>
</ul>

为了避免一堆 if 语句，你可以将你的页面放在一个数组中并循环它们：

<ul>
<?php
$pages = array('page1' => 'Page1', 'page2' => 'Page2', 'page3' => 'Page3');
foreach($pages as $file => $name) {
    echo '<li><a href="'.$file.'" '.($page == $file ? 'class="active"' : '').'>'.$name.'</a></li>';
}
?>

【讨论】：