0

我的 AMP 页面有一个模板文件，我在其中加载了几个 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
    });

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

4

3 回答 3

0

如果我正确理解您的问题，您想要的是允许您的页面在不同的路线上加载不同的脚本集。你是对的，目前没有办法做到这一点。

我如何做到这一点是使用模板引擎（服务器端的 React 或我正在使用的哈巴狗）。现在，您可以使用各自的模板系统拥有基于路由的标头。

希望这可以帮助！如果这不能回答您的问题，请返回。

于 2018-04-13T06:56:26.007 回答
0

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

于 2018-04-13T12:28:31.477 回答
0

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

示例：我正在使用 Jekyll，在我的网站上只有博客文章有 Disqus 评论部分。about 和其他页面没有评论。amp-iframe在我的情况下，Disqus 评论是唯一需要的功能。我所做的是在每个论坛帖子的降价文件中，我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 %}

在这里您还可以看到只有某些页面有轮播。使用这种技术，Liquid 插值会在不需要这些脚本时忽略它们，因此 AMP 验证器不会抱怨。但无论如何，它对效率很有好处。

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

于 2020-05-15T06:30:05.723 回答