javascript - 在 HTML 页面和子页面上不重复代码的*现代方法是什么？

Question

所以我正在制作一个链接到几个子页面的 HTML(5) 页面。

我有一个导航菜单和一个非常精细的 CSS 和 HTML 页脚。为每个子页面复制粘贴此代码是一种选择，但我怀疑有更好的方法。

在过去，它最常使用框架来完成，但现在它们已经过时了。

我在任何地方都没有找到“默认”的首选解决方案......建议是：

使用 Javascript在子页面上记录。编写代码。或使用 PHP 生成网站，以便从单独的文件中包含导航和页脚或使用 Ruby on Rails（必须在一定程度上掌握它......我不确定这是否是那种事情它用于）

最好的方法是什么？对于一个相当简单的网站来说，PHP 不是矫枉过正吗？（是的，它有导航等，但除此之外它很简单）。还有其他建议吗？

score 2 · Accepted Answer

如果您的服务器具有 PhP 功能，这可能是最简单的方法。

<?php
require("header.php");
?>

是将完整的标题部分包含到新页面中所需要做的一切。

我不会得到 javascript 路由，因为您只会在页面开始加载后加载 javascript。这意味着页面开始加载，然后需要从服务器获取附加信息。此外，服务器端更可靠。

score 0 · Accepted Answer

服务器端包含可能是最简单的方法：

<!--#include virtual="header.html" -->

    some html

<!--#include virtual="footer.html" -->

链接：

score -1 · Accepted Answer

我自己的网站正在使用include("XXX.php")或require(xxx.php)包含页眉、页脚和常用代码。我认为实现这样的功能是一种非常容易理解和简单的方法。像这样：

...
///below is header
<?php include("header.php"); ?>
/// header ends
...

您也可以创建此类单独的 html 文件并使用 JS 将它们呈现到您的页面中，这不需要 php 环境。例如：

<div id="header"></div>
<script>
$( "#header" ).load( "commom/header.html" );
</script>

并将您的标头代码保存到“header.html”文件中。

3 回答 3