AMP HTML（加速移动页面HTML）是由Google领导的一个项目，旨在提高移动网络的速度。它是一组HTML标记，JavaScript库和AMP兼容页面的缓存。
</scr...</desc> <question vote="0"> <pre><code><!doctype html> <html ⚡4email data-css-strict> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <style amp4email-boilerplate> body { visibility: hidden } </style> </head> <body> <amp-state id="selectedProduct"> <script type="application/json"> { "src": "imageSrc", "title": "ProductName", "price": "400" } </script> </amp-state> <div class="container"> <amp-list width="500" height="500" layout="responsive" src="https://bounce.mailamp.in/similar-products" items="products"> <template type="amp-mustache"> <div class="product-item" on="tap:AMP.setState({ selectedProduct: { src: {{src}}, title: {{title}}, price: {{price}} } })"> <amp-img class="product-image" width="100" height="100" src="{{src}}" alt="Product Image"></amp-img> <p>{{title}}</p> <p>Price: ₹{{price}}</p> <form method="post" action-xhr="https://bounce.mailamp.in/add-to-cart"> <input type="hidden" name="src" [value]="selectedProduct.src"> <input type="hidden" name="title" [value]="selectedProduct.title"> <input type="hidden" name="price" [value]="selectedProduct.price"> <button type="submit" class="add-to-cart-button">Add to Cart</button> </form> </div> </template> </amp-list> </div> </body> </html> </code></pre> <p>我正在开发一个 AMP for Email 项目，并尝试使用 amp-list 和 amp-state 实现交互式产品列表。但是，我在单击产品时更新状态时遇到问题。下面是我正在使用的代码片段。如果您能提供有关如何正确设置动态用户交互的指导，我将不胜感激。</p> <p>具体来说，我不确定在点击产品时是否正确使用 AMP.setState 来更新 selectedProduct 状态。任何见解或更正将不胜感激！</p> </question> <answer tick="false" vote="0"> <p>您提供的样本存在一些正交问题：</p> <h2>1.您的端点返回的 JSON 中缺少引号。</h2> <p>这是渲染 Mustache 模板后 <pre><code>on</code></pre> 上的 <pre><code><div></code></pre> 属性的样子：</p> <pre><code>tap:AMP.setState({ selectedProduct: { src: https://bummer.in/cdn/shop/files/9000000664.2561_600x.jpg?v=1708346823, title: Trunks - Disco82, price: 599.00 } }) </code></pre> <p>当您单击 div 来触发 AMP 执行 <pre><code>setState</code></pre> 调用时，这会导致错误：</p> <pre><code>Error: Parse error on line 3: ... src: https://bummer.in/cdn/sho -----------------------^ Expecting '-', '+', '*', '/', '%', '&&', '||', '<=', '<', '>=', '>', '!=', '==', '?', '.', ',', '[', '}', got ':' </code></pre> <p>您应该在 JS 控制台中看到这些错误。</p> <p>如果值是字符串文字，则需要用引号引起来 <pre><code>src</code></pre> 和 <pre><code>title</code></pre> 的值。请参阅示例：<a href="https://amp.dev/documentation/components/email/amp-bind#deep-merge-with-amp.setstate()" rel="nofollow noreferrer">https://amp.dev/documentation/components/email/amp-bind#deep-merge-with-amp.setstate()</a>。</p> <h2>2. <pre><code>setState</code></pre>调用和表单提交之间没有顺序依赖性</h2> <p>当您单击“添加到购物车”时，表单提交不会等待在单击外部 <pre><code>amp-bind</code></pre> 时状态更改后执行对隐藏表单输入元素的 <pre><code>div</code></pre> 评估。它们以未定义的顺序并行发生。因此，通常会发生的情况是，您第一次点击“添加到购物车”时，表单会提交，并且输入字段设置为您在表单中设置的 AMP 状态（<pre><code>src: imageSrc</code></pre> 和 <pre><code>price: 400</code></pre>）的默认值。 <pre><code><amp-state></code></pre> 标签，而不是您打算使用 <pre><code>AMP.setState</code></pre> 设置的值。</p> <p>您可以做的是确保仅在发生 <pre><code>setState</code></pre> 后才提交表单。这可以通过</p>来完成 <ol> <li>为您的表单提供 DOM ID </li> <li>将按钮更改为常规按钮而不是 <pre><code>submit</code></pre> 按钮</li> <li>在同一事件上链接多个操作并使用 <pre><code>form.submit</code></pre> 操作来触发表单提交：</li> </ol> <p><a href="https://amp.dev/documentation/guides-and-tutorials/email/learn/amp-actions-and-events#multiple-actions-for-one-event" rel="nofollow noreferrer">https://amp.dev/documentation/guides-and-tutorials/email/learn/amp-actions-and-events#multiple-actions-for-one-event</a></p> <p>如果您为 <pre><code><form></code></pre> 元素指定 DOM ID 为 <pre><code>form</code></pre>，那么您可以执行以下操作：</p> <pre><code><button on="tap:AMP.setState({ selectedProduct: { src: '{{src}}', title: '{{title}}', price: {{price}}, } }), form.submit" type="button" class="add-to-cart-button"> Add to Cart </button> </code></pre> <p>您可以通过在 JS 控制台中、在 AMP 框架的上下文中执行 <pre><code>AMP.printState()</code></pre> 来调试 AMP 状态。</p> <h2>3.您的表单端点存在 CORS 问题</h2> <p>即使解决了上述问题，您的表单提交也不起作用，因为它没有使用正确的 CORS 标头进行响应：</p> <pre><code>Access to fetch at 'https://bounce.mailamp.in/add-to-cart?__amp_source_origin=https%3A%2F%2Fplayground.amp.dev' from origin 'https://playground.amp.dev' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. </code></pre> </answer> </body></html>
我有用纯Javascript编写的小部件。 加载时，它会在页面底部创建一个按钮。 单击该按钮会在 iframe 上创建并在其中加载我的聊天机器人网站。 我有一个小片段，我...
AMP 游乐场有一个漂亮的工具可以查看 Amp 状态。 看看操场上的状态选项卡： https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fcomponents%2Famp-
我使用 amp for wp 和 amp for wp 子域插件。到目前为止一切都很顺利。我的链接通过子域定向到 cdn ampproject。但我想做的是通过...发布我的放大器页面...
根据文档，我需要做的就是用以下内容包装我想通过Javascript“交谈”的块： // 一些基本的 HTML &...
我目前正在使用使用 AMP 制作的网站。我想在此页面上与 MS 清晰度集成，但找不到任何方法。
我已经为我网站的移动用户创建了 AMP 页面。问题是“当我尝试从移动设备访问我的网站时，它显示网页版本”以及“如果我尝试从桌面访问 AMP 页面......
在正常的 Facebook 像素分析中，我们查看内容事件。 有没有办法在 amp.js 中复制此功能？ <
如何使用<amp-list>中的显示更多按钮设置可见元素的限制？
我应该如何使用来解析json文件，但在页面上显示它的元素数量有限，以便我可以设置一个显示更多按钮来加载更多元素？我用它来制作一个带有 ar 的块...
如何在 WordPress 中设置例外，使模板不加载到 AMP 上？
我的网页也使用官方插件在 AMP 上完整。我的内容使用模板，每次有人发帖时都会使用该模板。所有页面都在 AMP 中，但如果我只想要一个
如何在 AMP-HTML 页面上单击 AMP-图像（整页示例）来播放隐藏的 AMP-音频？
如何播放隐藏的音频文件，大概是通过页面元素点击上的 AMP-Audio () 组件，特别是 AMP 图像 () 如何播放隐藏的音频文件（大概是通过页面元素点击上的 AMP-Audio (<amp-audio></amp-audio>) 组件，特别是AMP-HTML 页面上的 AMP 图像 (<amp-img></amp-img>) 点击？ 具体来说，我最终想做的是复制此页面上我的名字旁边的扬声器图像的功能：https://m.jamesandersonjr.com，在此页面上：https://amp.jamesandersonjr .com，但页面必须遵循所有已知的 AMP 规则验证。 请告知这个问题是否重复，但我在 S.O. 上找不到类似的合适解决方案 此外，A.I.搞错了！这是巴德的回应： <!DOCTYPE html> <html amp> <head> <title>How to Play a Hidden Audio File on Click</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>How to Play a Hidden Audio File on Click</h1> <amp-audio id="myaudio" hidden controls> <source src="/media/epic.mp3" type="audio/mpeg"> <source src="/media/epic.wav" type="audio/wav"> </amp-audio> <button onclick="playAudio()">Play Audio</button> <script> function playAudio() { var audio = document.getElementById("myaudio"); audio.play(); } </script> </body> </html> 正如您可能已经注意到的，它甚至不包括， <script async src="https://cdn.ampproject.org/v0.js"></script>, 也不 <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> 这是 Chat GPT 在被问到同样问题时的回应： <!DOCTYPE html> <html amp> <head> <meta charset="utf-8"> <title>Hidden Audio Example</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <style amp-custom> /* Add any custom styles here */ </style> </head> <body> <!-- Add the element that will be clicked to play the audio --> <p on="tap:audioPlayer.toggleVisibility">Click here to play audio</p> <!-- Add the amp-audio component --> <amp-audio id="audioPlayer" layout="nodisplay"> <!-- Replace 'path-to-your-audio-file.mp3' with the actual URL of your audio file --> <source src="path-to-your-audio-file.mp3" type="audio/mpeg"> </amp-audio> </body> </html> 所以，不，A.I.世界统治尚未完全降临到我们身上。 ;-) 无论如何，我期待着熟练且富有创意的人类回应。 我解决了这个问题。这是一个示例解决方案，供有需要的人使用。 <!DOCTYPE html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>AMP Validated Demo: Play Audio File on AMP Image Click</title> <link rel="canonical" href="https://www.example.com"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style amp-boilerplate> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style> </noscript> <style amp-custom> h1{font-family:Arial, Helvetica, sans-serif;color:#006EDB;font-size:188%;font-weight:600;} </style> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> </head> <body> <h1>How to Play a Hidden Audio File on Click</h1> <amp-img width="32" height="32" alt="🔊 Hear Audio Track." title="🔊 Hear Audio Track." role="button" tabindex="1" on="tap:nm_pron.play" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQpUaGlzIFNWRyBpbWFnZSBmaWxlIGlzIHRoZSBzb2xlIHByb3BlcnR5IG9mIEphbWVzIEFuZGVyc29uIEpyLiB8IFdlYjogWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tIF0uIApJZiB5b3UgZmluZCB0aGlzIFNWRyBpbWFnZSBmaWxlIGRpc3BsYXllZCBvbiBhbnkgb3RoZXIgd2Vic2l0ZSBvbiB0aGUgd2ViLCBiZXNpZGVzIHRoZSBvbmVzIGZvdW5kIGluIHRoaXMgCmxpc3QgWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tL3dlYnNpdGVzLnBocCBdLCB0aGVuIGl0IGNvdWxkIGJlIHByZXN1bWVkIHRoYXQgaXQgd2FzIGxpa2VseSBzdG9sZW4uIApQbGVhc2UgcmVwb3J0IGFueSBhbmQgYWxsIGFzc2V0IHRoZWZ0cyB0byBtZSwgaGVyZSBbIGh0dHBzOi8vd3d3LmphbWVzYW5kZXJzb25qci5jb20vY29udGFjdC1qYW1lcy5waHAgXS4KVGhhbmsgeW91IGluIGFkdmFuY2UgZm9yIHlvdXIgaGVscCBpbiBjb21iYXRpbmcgb25saW5lIGNvbnRlbnQgdGhlZnQuIAoKUmVnYXJkcywKSmFtZXMgQW5kZXJzb24gSnIuCi0tPgo8c3ZnIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xNCwzMkg3Yy0xLjEsMC0yLTAuOS0yLTJWMThjMC0xLjEsMC45LTIsMi0yaDdWMzJ6IiBmaWxsPSIjNTQ2RTdBIi8+Cgk8cGF0aCBkPSJtMjYgNDItMTItMTB2LTE2bDEyLTEweiIgZmlsbD0iIzc4OTA5QyIvPgoJPHBhdGggZD0ibTI4IDE3LjN2Mi4xYzEuOCAwLjggMyAyLjUgMyA0LjYgMCAyLTEuMiAzLjgtMyA0LjZ2Mi4xYzIuOS0wLjkgNS0zLjUgNS02LjdzLTIuMS01LjgtNS02Ljd6IiBmaWxsPSIjMDNBOUY0Ii8+Cgk8cGF0aCBkPSJtMjggMTIuMnYyYzQuNiAwLjkgOCA1IDggOS44cy0zLjQgOC45LTggOS44djJjNS43LTEgMTAtNS45IDEwLTExLjhzLTQuMy0xMC45LTEwLTExLjh6IiBmaWxsPSIjNEZDM0Y3Ii8+Cjwvc3ZnPg=="> <amp-audio id="nm_pron" layout="nodisplay" src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"></amp-audio> </amp-img> </body> </html>
这里有针对非放大器网页的说明 https://support.google.com/adsense/answer/7478225?hl=en。 我找不到 amp-auto-ads 的任何内容。 有人有这方面的经验吗
在 AMP-HTML 页面上单击播放隐藏的 AMP-音频（整页示例）？
如何播放隐藏的音频文件，大概是通过页面元素点击上的 AMP-Audio () 组件，特别是 AMP 图像 (&l...
尝试将单个组件转换为 AMP，而不是 Next.js 中页面上的所有组件
我试图在“/”路由上将此页面作为 AMP 运行，但我只想将文章组件作为 AMP 运行。这三个组件根据 viewType 有条件地呈现。 导出常量配置 = { amp:
我正在处理的 AMP 邮件中有以下放大器列表。 我将 amp-list src 设置为一个不存在的端点，以便查看回退。 问题是回退没有被渲染
我在 ghost 上启用了 AMP - Google Accelerated Mobile Pages 的博客。 在页面上：https://preciselab.io/json-merge-patch 我明白了 我有启用 AMP 的 ghost 博客 - Google Accelerated Mobile Pages。 在页面上：https://preciselab.io/json-merge-patch我明白了 <link rel="canonical" href="https://preciselab.io/json-merge-patch/" /> <link rel="amphtml" href="https://preciselab.io/json-merge-patch/amp/" /> 和https://preciselab.io/json-merge-patch/amp有 <link rel="canonical" href="https://preciselab.io/json-merge-patch/" /> 这对我来说似乎是正确的，但在https://search.google.com/search-console我看到问题 包含有效规范页面标签的备用页面
我正在制作一封包含两种形式的动态电子邮件，第一种形式有一个按钮和一个带有预定义值（主干）的隐藏字段，该字段将发布到后端并发送特定的 OTP ...
我可以在电子邮件重新加载时保持用户输入 AMP 表单的状态吗？
假设我在动态 gmail 中嵌入了一个 AMP 表单。有没有办法在不使用 amp-list 组件获取的情况下保持状态并显示用户在重新加载电子邮件时输入的内容...
将 FontAwesome 添加到样式 amp-custom
我正在尝试放置 FontAwesome 的源代码： 在你的部分......
我正在制作一个 AMP 网站并尝试在我的网站中使用自动播放的 Youtube 视频，但除非访问者与视频互动，否则视频将从一开始就静音播放。那么如何让它开始......