当前位置：文江博客话题详情

我们怎样才能避免页眉和页脚代码在每个 html 页面中重复

发布于 2024-09-24 20:34:27 字数 80 浏览 4 评论 0原文

我有大约十个 html 页面，每个页面也有相同的页眉和页脚标记，我可以有一个包含完整页眉和页脚的页面吗？我将从其他 html 页面引用该特定页面。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜访吸血鬼 2024-10-01 20:34:27

如果您不关心禁用了 JavaScript 的用户，或者正在使用某些移动平台，则可以使用 JavaScript 来完成此操作。

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

page.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

但不要这样做，它对用户不友好，而且不专业。只需坚持使用 php，或构建一个稍后不需要编辑的可靠模板即可。

If you don't care about users who have JavaScript disabled, or are using some mobile platforms, you can use JavaScript to do it.

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

page.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

But don't do this, it's user unfriendly, and unprofessional. Just stick with either using php, or building a solid template which doesn't need to be edited much later.

回复收藏 0 原文

南城追梦 2024-10-01 20:34:27

您可以通过使用服务器端语言（例如 PHP 或其他无数不同语言中的一种）来完成此操作，这些语言会进行预处理页面。沿着这些思路：

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>

You do this by using a server side language like PHP or another one of the myriad different languages out there, which pre-processes the page. Something along these lines:

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>

回复收藏 0 原文

遇见了你 2024-10-01 20:34:27

您的服务器端脚本语言是什么？您可以执行所谓的“包含”。

确切的语法取决于您的 Web 服务器支持的语言。

回复收藏 0 原文

酒解孤独 2024-10-01 20:34:27

假设问题上的“master-pages”标签指的是 ASP.NET，这里有一个超级链接。
诗。您也应该尝试 Ruby on Rails :)

回复收藏 0 原文

烂柯人 2024-10-01 20:34:27

使用 Django。当你掌握窍门时，这是最好的事情:)

回复收藏 0 原文

哑 2024-10-01 20:34:27

绝对我们可以通过只定义一个页眉和页脚内容来避免在多个页面上编写相同的代码，例如页眉和页脚，并在所有页面上使用它页。

假设您的index.html 中有页眉和页脚元素，如下所示：

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

使用JavaScript 将页眉和页脚内容存储在变量中

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

在您想要添加页眉和页脚的页面上使用此脚本并享受JavaScript 的强大功能。

随着代码重复的增加，我们的文档中的代码重复必须最少
冗余（实际不需要的额外内容）/文档大小+其
一遍又一遍地重复相同的代码真的很不专业。

我们可以更深入地讨论代码重复这个主题，其中有很多缺点（缺点）和较少的优点（优点）。

JavaScript 是最好的解决方案，因为不需要服务器端脚本，只需要客户端脚本，是的，要实现此功能，您的客户端浏览器必须启用 JavaScript< /strong> 这是当今主流浏览器的默认设置。

Absolutely we can Avoid Writing same code like header and footer on multiple pages by having just a single header and footer content defined and use it on all pages.

Lets assume you have header and footer elements in your index.html for example as shown below:

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

Use JavaScript to store header and footer contents in a variable

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

Use this script on pages you would like to add header and footer and enjoy the power of JavaScript.

Code Duplication must be minimum in our document as it increases
redundancy(Extra content not actually needed)/size of document + its
really unprofessional to have same code repeated over and over again.

We can discuss this topic of Code Duplication in much greater depth with lots of cons(Disadvantages) and Less pros(Advantages).

JavaScript is the best solution because no server-side scripting needed, only Client side scripting and yeah for this to work, your client side browsers must have JavaScript Enabled that's default for major browsers nowadays.

回复收藏 0 原文

~没有更多了~