Question

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

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

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

这些HTML仅包含静态数据。有什么方法可以在AMP页面中添加这些HTML？我无法使用amp-iframe，因为amp-iframe不能位于视口的前75％之内，并且必须距顶部link所述距离像素为600px。

Answer 1

AMP不能包含任何类型的外部stylesheet或scripts。对于您的HTML文件，您可能已使用HTML部分加载。但是，对于AMP页面，您不能包括在内，而必须在AMP中显式编写页眉和页脚

在官方文档here中，在 HTML标记标题下指定了

除非类型为application / ld + json，否则禁止脚本。（可以根据需要添加其他不可执行的值。）一个例外是用于加载AMP运行时的强制脚本标记和用于加载扩展组件的脚本标记

Answer 2

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

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

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

include和require are之间的主要区别是，如果存在一个，则会输出错误，并继续呈现页面。需求将在错误处停止。 _once仅确保每个页面加载调用一次。通常并不是很必要，但我通常只是为了安全起见。

Answer 3

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

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

祝一切顺利。