如何在 AMP-HTML 网页中加载外部页眉和页脚 HTML

我正在将现有的HTML转换为AMP-HTML。在较旧的 HTML 中，我正在加载footer和header它们位于单独的 HTML 文件中，这些文件使用 jquery 加载，如下面的代码中所述。

$("#divHeader").load('../header.html');
$("#divFooter").load('../footer.html');

这些 HTML 只有静态数据。有没有办法在 AMP 网页中添加这些 HTML？我不能使用 amp-iframe，因为 amp-iframe 不能在视口的前 75% 内，并且必须距离顶部 600 像素，如此链接中所述。

AMP 不能包含任何类型的外部stylesheet或scripts。对于 HTML 文件，您可能已使用 HTML 部分进行加载。但是对于 AMP 网页，您不能包含它，您必须在 AMP 中明确编写页眉和页脚

在此处的官方文档中，在 HTML 标记标题下指定

除非类型为 application/ld+json，否则禁止使用脚本。(可以根据需要添加其他不可执行的值。一个例外情况是用于加载 AMP 运行时的必需脚本代码和用于加载扩展组件的脚本代码

如果您使用的是 PHP，或者能够将页面转换为 PHP，则可以使用 include 或 require 语句。

<?php include_once('path/to/file.php'); ?>
<?php require_once('path/to/file.php'); ?>

包含和要求之间的主要区别是包含将输出错误(如果有错误(并继续呈现页面。"要求"将在出现错误时停止。_once只是确保每次页面加载调用一次。通常不是真的有必要，但我通常这样做只是为了安全。

可以使用amp-iframe或amp-list，但除此之外是不可能的。

制作两个不同的 HTML 文件，其中一个存储页眉，另一个文件存储页脚。尝试使用 amp-iframe 或 amp-list 单独加载它们。我尝试亲自做这些事情，但做不到，但我知道有些人过去做过。

万事如意。

相关内容