我可以创建一个共享 html 文件来保存我的导航吗？

Question

我有一个包含许多子页面的 HTML 网站，当我想更新导航时，我必须将 <nav> 标签复制并粘贴到不同的文档 50 多次。有没有一种方法可以创建一个 html 文件来保存我的导航，并且每当我更新该文档时，它都会更新我所有页面上的导航？

编辑：

我尝试了一些 PHP 但无法正常工作。怎么了？？

nav.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <?php echo "<img id="logo" src="logo.png" alt="logo" height="100" width="100">
<a href="index.html"><button class="navbutton">Home</button></a>
<a href="about.html"><button class="navbutton">About Me</button></a>
<button onclick="sixthGrade()" class="navbutton">6th Grade</button>
<div class="dropdown">
    <button class="dropbtn">7th Grade</button>
    <div class="dropdown-content">
        <a href="english7.html">ELA</a>
        <a href="geography.html">World Geography</a>
        <a href="science7.html">Science</a>
        <a href="multimedia.html">Multimedia</a>
        <a href="woods.html">Woodshop</a>
        <a href="algebra1.html">Algebra 1</a>
    </div>
</div>
<div class="dropdown">
    <button class="dropbtn">8th Grade</button>
    <div class="dropdown-content">
        <a href="multimedia2.html">Multimedia</a>
        <a href="woods2.html">Woodshop</a>
        <a href="amerhistory.html">American History</a>
        <a href="geometry.html">Geometry</a>
        <a href="english8.html">ELA</a>
        <a href="science8.html">Science</a>
    </div>
</div>
<div class="dropdown">
    <button class="dropbtn">9th Grade</button>
    <div class="dropdown-content">
        <a href="algebra2.html">Honors Algebra 2</a>
        <a href="english9.html">English 9</a>
        <a href="vidprod.html">Video Production</a>
        <a href="webdesign.html">Web Design</a>
        <a href="biology.html">Biology</a>
        <a href="worldhistory.html">World History</a>
        <a href="pltwied.html">PLTW IED</a>
        <a href="photography.html">Photography</a>
        <a href="pe.html">PE</a>
        <a href="hchem.html">Honors Chemistry</a>
        <a href="covid.html">COVID-19 Blog</a>
    </div>
</div>
<div class="dropdown">
    <button class="dropbtn">Social</button>
    <div class="dropdown-content">
        <a onclick="instagram()"><img class="social" src="instagram.png" alt="Instagram logo"></a>
        <a onclick="twitter()"><img class="social" src="twitter.png" alt="Twitter logo"></a>
        <a onclick="youtube()"><img class="social" src="youtube.png" alt="YouTube logo"></a>
        <a onclick="vimeo()"><img class="social" src="vimeo.png" alt="Vimeo logo"></a>
    </div>
  </div>";>
</body>
</html>

index.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="alex.css">
        <title>Alex's Website || Home</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <meta property="og:title" content="Alex's Website" />
        <meta property="og:image" content="splash.jpg" />
        <script>
            if (screen.width <= 800) {
                window.location = "http://m.amgutowski.com";
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <nav>
                    <?php include 'nav.php';?>
                </nav>
                <h2>Welcome To My Website!</h2>
                <br>
                <p>Welcome to my website. This took me about 3 days to create originally, and I'm still adding to it.
                Feel free to look around, and have fun!</p>
                <br>
                <footer>
                    Copyright &copy; 2020 Alex Gutowski <br>
                    <a href="mailto:alexgutowski@gmail.com">alexgutowski@gmail.com</a> <br>
                    All Rights Reserved
                </footer>
            </div>
        </div>
    </body>
</html>

Answer 1

如果您考虑将服务器端脚本添加到您的 HTML，它会变得更容易。

无论您以后如何重命名，Django 和 Flask 都可以动态地 link 网站中的页面。
in PHP 我相信您可以创建一个包含变量映射到您的 link 的包含文件。然后您可以导入这个包含文件，这样您所要做的就是更改包含文件中的 link，您所有的相关页面都会使用更新后的值。

links.php --
<?php 
page1 = "https://link";
page2 = "https://link2";
?> 

anyotherpage --
<?php require 'links.php';
?><!DOCTYPE html>
<html>
<head></head>
<body>
        Click here : <?php echo page1; ?>
</body>
</html>```

Answer 2

欢迎来到社区。展望未来，尝试分享一些代码，以便其他人可以使用它来学习:)。

绝对有可能减少重复问题。简单的语言是 PHP。只需在 PHP 文件中创建标签，然后使用 include 将其显示在需要的地方。这样你就只会更新一个文件。

更多阅读这里W3Schools - PHP includes

希望对您有所帮助！

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

Answer 3

如果您不想使用像 PHP 这样的服务器端解决方案，我认为您可以试试这个： Load HTML File Contents to Div [without the use of iframes]

您可以轻松创建 nav.html 并使用 JavaScript 将其加载到您的页面中。

亲切的问候，乔纳斯

我可以创建一个共享 html 文件来保存我的导航吗？

Can I create a shared html file to hold my navigation?

javascript

html

css

nav

shared