Question

我有一个AMP页面的模板文件，其中我正在加载几个放大器功能：

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

我想做的只是加载必要的脚本。当我浏览网页时，我发现这是一个请求的功能，但尚未实现：https://github.com/ampproject/amphtml/issues/9712

我的想法是检查文档正文中是否存在某个标记，如果是，则加载脚本。例如：

document.addEventListener("DOMContentLoaded", function(event) {
        var list = document.getElementsByTagName("amp-youtube");
        //if list is not empty, create a script tag having the corresponding 
        //src and append it to the body
    });

但是，这会在正文的末尾添加标记，我不知道这是否正常（我在Web上查看脚本标记加载到标题中的任何地方）。我是AMP页面的初学者，所以我的问题是：这是解决我的问题的好方法，如果没有，我该如何实现所需的功能？

Answer 1

如果我理解你的问题是正确的，你想要的是允许你的页面在不同的路由上加载不同的脚本集。而且你现在没有办法做这个AFAIK。

我是如何使用模板引擎（服务器端的React或我正在使用的哈巴狗）。现在，您可以使用相应的模板系统来获得基于路径的标头。

希望这有帮助！如果这不能回答你的问题，请回复。

Answer 2

到目前为止，我知道，没有实施嵌入式方法来实现您的要求，因此您只能使用模板引擎功能来实现目标。但无论如何，在AMP页面中添加您自己的脚本是一种糟糕的方法，因为它会导致您的页面无效，并且它永远不会被AMP缓存。

Answer 3

您可能正在使用某种SSG（静态网站生成器）框架。像Jekyll，Hugo等。在这种情况下，您掌握的信息是哪些页面需要某些标签，哪些不需要。因此，您可以使用SSG的插值语言来选择包括您实际需要的脚本。

示例：我正在使用Jekyll，并且在我的网站上，只有博客帖子具有“ Disqus评论”部分。关于页面和其他页面没有评论。对于我来说，Disqus注释是唯一需要amp-iframe的功能。我所做的是，在每个论坛帖子降价文件中，我在前端问题中添加了一个额外的comments: true条目：

---
...
comments: true
---

head.html中只有一个_includes，在该文件中，我有这个：

{% if page.comments %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous">
{% endif %}
{% if page.has_carousel %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous">
{% endif %}

...

{% if page.comments %}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous"></script>
{% endif %}
{% if page.has_carousel %}
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous"></script>
{% endif %}

在这里您还可以看到只有某些页面带有轮播。通过这种技术，液体插值在不需要它们时会忽略这些脚本，因此AMP Validator不会抱怨。但是无论如何，这对于提高效率是很有帮助的。

自2019年4月以来，有可能提供一些自定义JavaScript，但是JS具有局限性。正如我提到的IMHO，最好优化您的网站生成。您可能拥有所有可用信息来执行此操作。如果这是一个带有AMP插件的Wordpress网站，那就另当别论了。

AMP仅加载必要的脚本

3 个答案: