如何避免在AMP站点上重复代码？

Question

在Google AMP网站上，您如何完成整个网站上的标准代码共享？

资产，例如： 标头 导航 页脚 通用样式定义

根据我到目前为止所读的内容以及我所使用的演示，似乎在AMP页面上有很多代码重复。此重复的代码意味着AMP站点的维护或修改成本可能更高。

其他方法如何利用AMP解决这些挑战？我想念什么？

Answer 1

我假设通过重复代码，您的意思是潜在地维护一个针对移动设备的AMP网站和一个未进行AMP的桌面网站？您不必一定要这样做。您可以将AMP视为一个框架，并在AMP上拥有一个涵盖桌面和移动设备的全面站点。

我工作的公司（https://www.craigattachments.com）的网站是在AMP的基础上使用AMP作为框架构建的。我们利用一些PHP选择性地调用某些需要的东西，例如样式表，以避免达到AMP实现的CSS最大文件大小。

在这里我曾经回答过类似的问题，这可能会提供更多的见解：Does it make sense to AMP enable a desktop site?。

也许这根本不是你的意思，我误解了这个问题……很抱歉。

Answer 2

WordPress的官方AMP plugin具有“本机”模式（不久称为“标准”），它使您可以使用活动主题的模板和样式表来建立AMP优先站点。这样，您就可以将AMP用作网站的框架，而不必维护两个单独的版本。

有关更多信息，请参见Serving Strategies文档。有关使用该网站的一些示例，请参见Showcase。

1.2版计划于2019年6月20日发布。您可以在GitHub上使用1.2-RC1 pre-release。由于许多改进，我建议使用此版本而不是当前的1.1.x版本。

Answer 3

完全同意您不希望在文件之间复制和粘贴HTML，CSS的页眉，页脚，菜单等。强烈建议您对AMP进行处理，就像对其他网页进行处理一样：从局部页面或使用组件来构建HTML页面。然后从较小的文件构建CSS，然后将其包含在每个AMP页面中。

一个示例在这里：https://github.com/ampproject/samples/tree/master/amp-camp

Answer 4

您应该像使用其他任何Web项目一样使用AMP，这包括创建可重用的组件和模板。

特别是对于AMP，如果您试图在不依赖CMS的情况下进行构建，我建议您看一下Jekyll或Hugo之类的静态网站生成器。他们可以帮助您快速构建-只需将AMP boilerplate code放到“默认”布局中，就可以离开。

然后您可以开始为常见的页眉，菜单布局，页脚等内容创建可重用的include（Jekyll）或partials（Hugo）。您还希望将CSS编译为include / partials文件，以便可以按AMP的要求将其直列装入您的头部。