我正在尝试创建一个AMP HTML网站(请参阅)
但是我在任何地方都找不到你应该如何创造一个反应灵敏的汉堡包菜单?
Javascript是不允许的,并且没有AMP组件可供使用?如果没有重大的黑客攻击,目前这是不可能的
在FeatureRequestBug中进行后续操作:我使用了一个:target伪类来完成这项工作
HTML
您可以使用:focus伪类来实现这一点。请看一个实例(www.washingtonpost.com也这样做)。或者您可以等待标签上线
代码看起来像
<a id="bur
有没有办法从AMP-HTML站点检索查询字符串值并将其存储在cookie中或在链接中使用
例如:
用户点击广告www.example.com/amp?foo=bar
打开AMP站点
点击一个链接,来到结帐处-非AMPwww.example.com/checkout?foo=bar
您应该能够使用QUERY_PARAM()variable来获取amp像素或amp分析中的变量
在非AMP签出页面上,您可以使用JavaScript读取document.referer并提取传递到AMP登录页面的查询字符
我有一个带有几个单选按钮的放大器窗体。根据选择的单选按钮,我想禁用或启用输入字段。默认情况下,输入字段处于禁用状态
如果输入包含disabled属性,则该字段始终处于禁用状态。我已尝试设置disabled=“disabled”,然后将其更改为disabled=“enabled”,但由于存在disabled属性,该选项不起作用
[disabled]="formFeedBack.hoursEnable" disabled="disabled"
其中,我使用on=“change:Amp.s
我正在使用amp故事网格层,并将模板设置为“填充”。我的背景图像的纵横比为16:9(高1920,宽1080)。当我在amp故事网格层中显示背景时,amp故事的查看布局会切断图像的顶部和底部。(顶部和底部缺少约50像素)AMP故事是否应在16:9中显示?这个故事的宽度似乎比16:9宽 AMP故事以用户浏览器窗口的大小显示。尽管许多手机的比例是16:9(或者说,纵向是9:16),但其中一些空间通常被浏览器工具栏等占据,使得有效可用空间低于9:16。当然,有些手机一开始就不是9:16
在桌面或平板电脑
我正在实现amp故事
案例:我们在Instagram上有很多故事,我们正在将它们迁移到网站上的amp故事
我用的是amp的故事,我有一个问题和amp的img和amp视频响应
我认为“响应”功能运行良好,因为如果我在操场上测试良好。
但当你在手机(chrome浏览器或safari浏览器)上看到图像或视频时,它并不完美。在这两种情况下,地址栏都会将图像的顶部切掉,在safari情况下,地址栏也会将图像的底部切掉。
safari mobile上的40px和chrome mobile上的80px都不算太
我有各种大小的图像(具有不同的宽度/高度比,因为这是用户生成的内容),我尝试将它们显示在一个漂亮的方形瓷砖中,而不拉伸它们
在普通HTML中,我使用divs,图像设置为background image和background size:cover属性
使用amp-img标签是否可以实现这一点?不确定我可以使用哪种布局来实现这一点
谢谢为什么不在AMP中使用相同的基于CSS的方法?CSS背景图像完全受AMP支持 从AMP提供的本机加速/资产选择/渲染优化中获益
我确实发布了一个静态结构AMP页面,但我想用AMP实现“酒店搜索”网页。如何用AMP提供此动态结构?您是否有要移动到AMP的特定页面的示例?
为了实现动态搜索,您可以将与一起使用以使搜索动态化(例如根据以前的输入显示或隐藏表单的某些部分)是否有要移动到AMP的特定页面的示例?
为了实现动态搜索,您可以将与一起使用,以使搜索成为动态的(例如根据以前的输入显示或隐藏表单的某些部分)
在使用带有数据标签的amp ima视频时,是否有可能禁用跟踪和其他与用户相关的操作
我在“同意”属性上使用了已知的数据块,但它似乎忽略了限制。(通过Ghostery插件检查)
有什么想法吗?如果同意书上的数据块不起作用,请提交错误报告。好的,谢谢@sebastiany您可以在这里提交报告:
我们有一个AMP页面,从服务器上获取3个列表,并将其绑定到客户端。是小提琴还是小提琴
但是,由于输出是动态的,并且我们将高度指定为100,在代码中,第二个列表返回空json,因此我们看到了大量不需要的空空间
获取空列表的代码是:
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
我想做一个搜索框,根据输入动态显示选项。为了做到这一点,我提出了以下问题:
这是我的实现
<input id="name-input" placeholder="Search name..." on="input-throttled:AMP.setState({ name: event.value }), suggestions.submit">
<form id="suggestions" method="get" action-xhr="https:
我想在AMP故事页面中添加一个带有计数器的收藏夹按钮,如AMP文档示例
但是,即使JSON信息加载正确,当我单击最喜欢的心脏时
[操作]“FORM.submit”未列入白名单[]
控制台中会提示错误
我确定如果amp hmtl内部有一个标记,那么表单提交不会被列入白名单
我只是将AMP文档网站上的代码粘贴到
标签和或多或少的地方,我可以把形式,白名单上的错误出现
我如何在我们不允许在AMP故事中放置表单的情况下实现最喜欢的计数器按钮
如何在“我们不是”中实现喜欢的计数器按钮
允许在AMP故事中
在我的AMP页面上,我想使用无限滚动显示产品列表
当我在Chrome中查看页面时向下滚动页面(并选择iPhoneX作为视图),它在向下滚动时似乎没有进行任何加载,因为我在滚动时看不到任何加载或暂停
看起来它只是展示了所有的结果。我跟着他们走了,但是那里真的不多
这是我的密码:
<amp-list
load-more="auto"
width="auto"
height="900"
layout="fixe
amp img具有属性:属性。
这是为了什么?在移动设备上没有鼠标悬停。
是否有计划将此注释添加到图片中?
我要求将此字段用于具有共享属性的CC图片。在欧洲(可能在世界各地),它必须贴在靠近图片作者姓名的位置。在amp-html中使用图像时,amp-img包括通过属性表示属性的属性
:此许可证允许其他人分发、混音、调整和构建您的作品,即使是商业性的,只要他们相信您的原创作品。这是提供的许可证中最方便的一种建议最大限度地传播和使用许可材料
attribute=“抄送闪烁放大器提供”是,但在页面上仍
每次我尝试在本地创建(或twitter)时,我在控制台中收到以下错误:
Powered by AMP ⚡ HTML – Version 1467308799816
Uncaught Error: Parent origin mismatch: null, file://
我复制粘贴了在找到的代码,我得到的只是一个空页面的错误
如何修复此问题以加载页面 您是否尝试将HTML文件拖放到浏览器中?我这样做了,并得到了相同的错误,但当我把它放到我的MAMP htdocs文件夹中时,它从localho
我认为amp html可能存在错误。此代码在两个实例上都生成此错误,
Srcset不能同时具有宽度和dpr源
由放大器供电⚡ HTML–版本1480633190770
我发现了这个问题,正如@dvoytenko所说的,这是一个已经通过在srcsetURL中使用逗号修复的错误
您可能还希望签入给定的修复程序并查看完整更改
除此之外,此示例代码还可能有助于:
// Srcset cannot have both width and dpr sources
+ if (hasWidth &a
我需要将下面的javascript代码改编为amp页面
<select id="url">
<option value='home'>home</option>
<option value='contact'>contact</option>
</select>
<input type="button" value='ir' onclick='ir()'>
<script>
关于在amp页面中显示三维模型的问题。
我有一个gltf文件中的多个模型。我可以为我的3d文件中的一个或多个模型在“amp-3d-gltf”组件中隐藏或设置可见性。我想通过按钮隐藏和显示一些模型
在AMP规范中,它指出对于,src属性必须启用HTTPS和CORS
AMP是关于移动内容和移动文章的,所以我不明白为什么主机站点必须启用CORS和HTTPS
是否因为AMP页面将由GOOGLE缓存提供,所以它不会与主机/发布者站点来自同一来源
如果有任何相同的信息,请进行更新。AFAIK,谷歌只缓存图像和HTML。因此,由于谷歌将通过HTTPS为缓存的AMP页面提供服务,所有src属性(除了)都必须通过HTTPS提供,否则您将有混合内容,并且当页面从谷歌缓存加载时,出于安全原因,请求将被阻止
我们开发了一个AMP扩展,如AMP youtube或AMP vimeo,但它是针对我们的特定产品的,我们希望将其添加到AMP CDN,并成为AMP项目的第三方。
我们如何提交我们的代码?访问,您必须按照概述的步骤创建PR
此外,还提供了一个关于如何为AMP做出贡献的简单指南
我知道我可以使用提交成功和提交错误。但我需要更多的选择
例如,如果服务器返回{“result”:“0”},我想在result=0时显示消息,在result=1时显示图像,在result=2时显示另一个表单,等等。您可以使用。其思想是在JSON响应中编码不同的结果类型,例如:
{
"message": {
"text": "Hello World"
}
}
或者对于图像:
{
"image": {
"src": "/my-image.png",
"width"
标签: Amp Html
http2content-delivery-network
默认情况下,GoogleAMP缓存通过HTTP/2提供最大为12MB的文件。尽管AMP不一定要在移动设备上使用,但它们是AMP背后的主要动机
我刚读过。
虽然他们发现对于2MB的小文件,HTTP/2比HTTP/1.1快,但他们也发现8MB或更大的文件的包丢失对HTTP/2的影响比HTTP/1.1大,这导致了更高的页面加载时间,即在这种情况下,HTTP/1.1比HTTP/2快。在他们的研究中,32%的移动连接经历了数据包丢失
因此,我一直想知道HTTP/2是否真的是Google AMP缓存的发展方
有没有办法知道“amp state”何时从“src”中指定的服务器URL接收到响应数据。类似于onLoad回调函数。这样我就可以在使用“amp list”渲染数据之前对其进行处理
您可以通过使用amp list执行处理渲染数据隐式执行此操作:
<amp-state
id="myList"
src="https://company.com/list">
</amp-state>
<amp-bind-macro
id="process"
我最近在测试AMP网页时看到,页面速度工具将AMP脚本标记为=>在已使用时删除未使用的java脚本。而且它严重影响移动速度,请协助
要测试:
我也有同样的问题。在新的PageSpeed评分中,AMP稍微有点问题,但我也有同样的问题。使用新的PageSpeed分数,AMP将受到轻微处罚
Ads无法呈现-发布有效标记的呈现。
测试url:
细节:
欢迎光临。你能更具体地告诉我吗?你想干什么?你已经试过什么了?用简单的问题寻求帮助。
我希望在标记元素的4行之后有3个点,但line clamp属性在AMP页面中不支持。如果您有任何解决方案,请提出建议
有没有办法确保放大器框架根据内部内容调整其高度?此内容是动态的,可以随时更改。
谢谢您可以使用amp iframe调整大小API从嵌入文档中触发amp iframe元素调整大小:
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight
}, '*');
.使用布局响应
当我添加此项时,我从AMP验证器中得到一个错误:
如何在AMP4电子邮件中添加Google字体。AMP for Email当前不支持自定义字体
是此功能请求的跟踪问题。AMP for Email当前不支持自定义字体
是此功能请求的跟踪问题。默认情况下,Google字体包括AMP4MAIL。您只需更改元素中的字体族属性。例如,对于body标签,将Lato更改为Roboto,它可以工作:body{font-family:'Lato',sans-serif;}默认情况下,谷歌字体包含为AMP4MAIL
我目前有一个amp元素,如下所示
<amp-youtube
id="youtubevideo"
data-videoid="xxxxxxxx"
layout="responsive" loop
width="480"
height="270">
</amp-youtube>
有没有办法通过另一个按钮触发这个视频?看起来只有当我用光标点击实际视频时,我才能播放视频
是否可以通过单击单独的按钮来触发播放?使用Yo
使用amp img绑定onclick事件时,我在验证时遇到以下错误
属性“onclick”可能不会出现在标记“amp img”中
代码在浏览器中工作正常,但在验证amp页面时会产生错误。如何修复?onclick是触发自定义javascript的默认html属性,amp中不允许使用该属性
您必须使用amp的绑定语法,它可能如下所示(最后4行):
在自定义元素上使用tap事件时,不要忘记设置tabindex和role属性。否则会出现新的验证错误。onclick是触发自定义javascript的默认
我已成功从amp电子邮件发送包含数据的表单,但存在安全问题。
黑客能否截获用户通过amp电子邮件中的表单发送的数据?如果可以,可能性有多大,做起来有多容易。
黑客可以在ChromeDevTools中查看您从电子邮件到后端API的请求
解释示例:
假设我们的网站有一个页面,显示了一个城市的天气观测历史。此城市的ID通过请求参数中的链接传递:/weather.php?city_ID=,其中ID-是城市的主键。
在PHP脚本中,我们在SQL查询中使用此参数进行替换:
$city_id = $_GET
我们对使用AMP进行加载时间优化很感兴趣,但也有一些担心,即依赖外部CDN和让我们的页面被我们无法控制的组织(即Google)缓存。是否可以使用AMP工具包创建一个利用性能优化的页面,但允许我们保留对CDN和缓存策略的控制
对我们来说,它是否真的验证为AMP并不重要,只要它速度快并且在我们的控制之下
谢谢。这取决于您的要求。有效的AMP页面需要从谷歌服务器提供AMP脚本
从:
AMP HTML文档必须:
(...)
包含标签
作为其标记的第二个子项(包括并加载AMP JS
图书馆)。
就我所见
缓存的AMP页面是否允许资源提示预热到规范站点的导航?使用[link rel=“preload/preconnect/etc.”的示例?
当前,缓存的AMP页不允许使用资源提示。AMP缓存将删除原始文档中的任何资源提示
在Chrome中,作为一个工作环境服务工作者,可以用来实现相同的行为
特定于页面的资产可以通过查询参数传递给“amp install serviceworner”组件的“data iframe src”属性,然后该属性将传递给服务工作者
“amp安装serviceworker”
如何通过按钮或href元素触发或激活amp image lightbox
我想在句末写一段。单击此处链接打开lightbox中的图像据我所知,amp image lightbox的当前行为不允许这样做。用户必须单击图像。然而,我已经基于这个问题提交了两个功能请求。您可以跟踪进度/参与GH的讨论:
您不能使用(href)或按钮,您可以使用amp lightbox并执行一些css
这更像是一个问题(与在Next.js应用程序中使用AMP有关),而不是一个技术问题。我尝试在Next.js spectrum频道上获得答案,但似乎没有人回复
我正在尝试为AMP实现一个混合页面,遇到了以下几件事:
使用useAmp()hook确定是否需要显示AMP版本
将amp=1附加到URL将加载amp版本
这些东西似乎工作得很好,但我想知道谷歌将如何实际服务于我们网页的AMP版本?
它会抓取所有页面(包括AMP页面),然后缓存AMP页面,还是我们需要为此做些额外的事情,还是会发生其他事情
根据amp-video-iframe文档,需要poster属性:
但在官方示例页面中:
谷歌开发者使用了一个占位符。
检查标记验证源代码,似乎两个用例都是有效的:
有人知道占位符用例是允许的还是应该避免的吗?我在文档中找不到其他信息这不是必需的-这是文档中的一个打字错误。是否需要某项内容取决于AMP中该项是否有效。不关心它是否存在,因此它不是必需的
资料来源:在谷歌的AMP上工作如果它有效,那么它就是有效的。上述信息似乎不一致。我想确保在多个站点中使用占位符之前,它不会在将来变得无效。我还为
我试图找到一个解决方案,为我的11ty(Eleventy)网站中的特定页面生成一个AMP版本
以以下内容为例
|
+- /src
|
+- /recipes
|
+- super-stroodle.md
理想情况下,我希望看到生成以下内容
|
+- /_site
|
+- /recipes
|
+- super-stroodle
|
+- index.
我在用放大器。我正在询问用户的手机号码,然后点击api(让我们看X)。如果响应成功,则向用户显示结果,如果响应为错误,则我询问otp。进入otp并单击verify I后,点击api(让我们来看看)。api Y的回应如下
Response code=200
code=1 or 2 or 3
Response code=400
Message:"some error"
在api Y的success响应上,如果code=1,则只有我想点击api X。我不知道怎么做。以下是我所做的
<form
我们可以在https上提供的页面上提供非安全(http)href作为amftml rel链接吗?
例如,一个页面https://example.com/somecategory/somepage标题中是否有
我知道不会有混合内容的问题,因为Amftml rel链接不是由浏览器获取的。但是有没有其他的影响,比如谷歌没有在搜索中显示amp页面等?HTTPS不是amp的要求
例如,Google AMP缓存有一个
然而,HTTPS还有其他优势:如果您的服务器支持HTTP/2,它允许您使用HTTP/2,并
。然而,如何使用时间值还不清楚
我有amp动画,我想在不同的时间触发。在JavaScript中,我会将该时间值传递给事件处理程序,并根据该时间值触发动画
如何在AMP中执行类似操作 假设动画可以表示为:
步骤1
将动画需要触发的时间转换为百分比偏移。例如,如果要以45秒触发动画,且视频长度为1m20秒,则偏移量为45/80=0.5625:
<amp-animation id="myAnimation" ...>
<script type="application/json"
我已在此处设置了一个自定义投标前服务器端点:
现在我需要AMP-AD标签从这个简单的演示页面向它发出请求:
有问题的标签:
<amp-ad
width="300"
height="300"
type="sas"
layout="fixed"
data-customer-name="optimics"
data-ad-host="opt
我们已经在我们的网站上集成了谷歌的加速移动页面。然而,当在iphone5s上查看页面时,滚动条会卡在顶部或底部。这个问题在Safari和Chrome浏览器上都存在。以下是与此问题相关的链接之一:
如果您能帮助解决此问题,我们将不胜感激。可能有几个问题会影响此页面。你可以在这里看到它们:
http://www.tabletwise.com/5-mono-tablet-10mg-biochem-pharma/side-effects/amp#development=1
我不相信谷歌目前承认“”@
我有我的谷歌自定义搜索引擎(GCSE)代码:
(功能(){
变量cx='008589157460623253837:mhsjluzrngo';
var gcse=document.createElement('script');
gcse.type='text/javascript';
gcse.async=true;
gcse.src=https://cse.google.com/cse.js?cx=“+cx;
var s=document.getElementsByTagName('scr
我正在建立一个简单的静态网站,并希望优化图像,最终生成了不同大小的JPG/PNG和WebP的每个图像集。在非AMP世界中,我会使用不同类型的标记和内部标记,但在这里,据我所知,我们只有AMP img。我的代码如下:
<amp-img src="s.webp" srcset="s.webp 100w, m.webp 200w" width="100" height="100">
<amp-img fallback src="s.png" srcset="s.png 100
我已经创建了一个amp胡须模板,如下所示
<template type="amp-mustache" id="amp-template-id">
<div>
<span>{{date}}</span>
<span>{{prev}}</span>
<span>{{open}}</span>
<span>{{low}}&l
在参加了AMP团队昨天的精彩路演之后,我开始放大网页。如果我使用layout=“responsive”,旋转木马将完美工作。但是,如果使用layout=“fixed height”,则不会显示图像,只会显示导航按钮。以下内容来自页面的来源:
<amp-carousel width="450" height="300" layout="fixed-height" type="slides" class="i-amphtml-element i-amphtml-carousel-has-con
我希望直接从JSON访问JSON数据,但我不能,我希望数据没有任何事件
我的放大器状态-
<amp-state id="myState">
<script type="application/json">
{
"foo": "bar"
}
</script>
</amp-state>
{
“foo”:“bar”
}
我的元素-
<p [text]="myState.foo">myState.fo
我必须使用amp格式设置产品筛选。
目标是允许在选择属性时过滤这些产品。
每个属性都显示在侧边栏上。
选中该复选框后,必须仅显示与属性相关的产品
// Display checkboxes
<input
checked
class='filter-input'
style='width: 18%;'
type='checkbox'
role='checkbox'
tabindex='-1'
value="<?php echo
我正在使用amp bind和setState更新不同样本的amp img URL
然而,即使我正在更新特定变量,比如s0,也有其他div正在更新,这不是我的意图
拜访
滚动至标题为“Last Resort男式T恤”的产品(左侧的div)
单击第一个具有白色的样例
样例右侧的产品图像div消失
相邻的div图像不应受到影响
事实证明,setState需要有一个默认值,添加:
<amp-img [src]="s0 || 'my_default_url'"></amp-img>
我有简单的图像显示/隐藏按钮点击。一切正常,但我想在这个开关下面再潜水一次,我想让这个div受到开关div责任的影响(如果你知道我的意思的话)。现在这个部门处于切换状态。这是否可能使相对div低于绝对值,并且在无固定位置的不同分辨率上它们之间具有相同的裕度
或者,也许这是一种转换我的位置的方式,或者其他方式?我试过了,但图像女巫应该消失在下面,我有两个图像
这是我的密码
<style amp-custom>
.above {
position: absolute;
max-
我正在使用amp分析跟踪发送到我自己终点的数据。如何跟踪用户单击的按钮或链接?我尝试为我正在跟踪的元素添加data vars-*属性,但结果表明,只显示了我正确单击的第一个元素
例如,我有多个元素可以执行单击操作,对于任何单击,我都希望触发pageAction事件
html:
<button class="trackedAction" data-vars-event-category="page button" data-vars-event-target="toggle ar
上一页 1 2 3 4 5 6 ...
下一页 最后一页 共 18 页