标签: amp-html

如何在移动设备的放大器轮播中显示导航箭头

我想在移动设备的放大器轮播中显示导航箭头,但默认情况下它不显示箭头。我已经尝试过.amp-carousel-button { display:""; },但似乎没有任何效果。

css jquery android amp-html

4
推荐指数
1
解决办法
1482
查看次数

将链接 amphtml 附加到 angular 应用程序的头部

我有一个有效的 angular 通用应用程序,我有一个特定页面的 amp 版本。为了使 amp 页面可访问,我必须添加到页面的<head>this 标签中

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Run Code Online (Sandbox Code Playgroud)

所以我需要类似于MetaService 的东西。

我的问题是如何在 angular 5 应用程序的特定组件中执行此操作?

amp-html angular-universal angular angular5

4
推荐指数
1
解决办法
4164
查看次数

带有 amp-bind 的多个动态类

如何在 amp-bind 中包含多个动态类?

例如:

<div [class]="condition1 ? 'classA' : 'classB'" [class]="condition2 ? 'classA' : 'classD'"></div>
Run Code Online (Sandbox Code Playgroud)

amp-html amp-bind

4
推荐指数
1
解决办法
2086
查看次数

是否可以使用 AMP 侧边栏创建多级导航?

我想为我们的 AMP 网站重新创建我们的移动页面导航。问题是它有多个级别 - 所以列表中有列表。像这样:

<ul>
    <li><a href="<link to a section>">section</a></li>
    <li>
        <a href="<link to another section>">section</a>
        <span>some button that open a sub navigation via javascript</span>
        <ul>
            <li><a href="<link to a subsection>">subsection</a></li>
            ...
        </ul>
    </li>
    ...
</ul> 
Run Code Online (Sandbox Code Playgroud)

然而,即使它在 AMP 中非常简单,这似乎也很棘手。我找不到任何例子。根据https://www.ampproject.org/docs/reference/components/amp-sidebar 在anamp-sidebaramp-sidebar是不可能的,因为amp-sidebar必须是body. 在列表中使用列表不能像在移动页面上那样容易使用,因为: Javascript 切换子导航的魔法受到限制。:hover也无法显示子导航,因为它适用于移动设备。

这个问题是否有有效的解决方案,如果是,它是如何完成的?

navigation sidebar list amp-html

4
推荐指数
2
解决办法
3812
查看次数

如何禁用 amp-img 默认灯箱功能?

我在客户的网站上有很多<amp-img>元素,最近注意到一个功能,您可以单击图像并弹出一个右上角带有 X 的灯箱。我在他们的官方文档中找不到任何关于启用/禁用此功能的提及。我将此元素用于某些背景/风格元素,因此我希望用户无法单击它。任何帮助深表感谢。

这是我正在使用的代码,删除了类和 URL:

<amp-img
    width="2000"
    height="515"
    layout="responsive"
    src="https://image.url">
    <amp-img placeholder
        src="https://placeholder.url"
        layout="fill">
    </amp-img>
</amp-img>
Run Code Online (Sandbox Code Playgroud)

amp-html amp-img

4
推荐指数
1
解决办法
1755
查看次数

是否可以在AMP HTML中生成图像响应,或者我需要在媒体查询中声明每个屏幕分辨率的图像大小?

我网站上的大多数图像都占据了整个屏幕宽度,因此在我当前的网站版本(不是AMP)中,我将CSS中的所有图像设置为通过这样做来填充整个屏幕宽度:

body img { 
  width:100%
}
Run Code Online (Sandbox Code Playgroud)

在AMP有什么相同的东西吗?

amp-html

3
推荐指数
1
解决办法
8047
查看次数

AMP页面添加了Google Anayltics AmpAnalytics错误

我正在按照https://developers.google.com/analytics/devguides/collection/amp-analytics/进行简单指南

尝试添加Pageview GA代码,但在控制台中遇到这两个错误:

amp-analytics-0.1.max.js:243 AmpAnalytics analytics1 Analytics config could not be parsed. Is it in a valid JSON format? SyntaxError: Unexpected token /

AmpAnalytics analytics1 No triggers were found in the config. No analytics data will be sent.
Run Code Online (Sandbox Code Playgroud)

任何人都面临这些错误并知道修复,我按照指示遵循他们的文档,但仍面临两个问题.

google-analytics amp-html

3
推荐指数
1
解决办法
2572
查看次数

AJAX是否可以在AMP中加载嵌入?

快速提问:是否可以动态加载内容等

<amp-twitter
  data-tweetid="611193269532295168"
  layout="responsive">
Run Code Online (Sandbox Code Playgroud)

通过AJAXAMP文章?

embed ajax amp-html

3
推荐指数
1
解决办法
5546
查看次数

外部样式表在AMP页面中无效

我正在将我的HTML页面转换为AMP页面.我见过测试网址https://validator.ampproject.org/#.此页面由AMP验证.

屏幕截图获取帮助: 在此输入图像描述

但是当我使用外部Css时.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
Run Code Online (Sandbox Code Playgroud)

然后它会失败.

屏幕截图寻求帮助. 在此输入图像描述

那我怎么能访问materialize css文件.因为我在我的网站上使用Materialise Ui框架.

但我也读过

 <style amp-custom> </style>
Run Code Online (Sandbox Code Playgroud)

SO AMP验证页面建议包括amp-custom中的内联css.但实现css是如此之久.它会破坏一些移动浏览器.因为https://github.com/ampproject/amphtml/issues/4555

如果有人有一些想法,请分享.

html css amp-html

3
推荐指数
1
解决办法
5915
查看次数

如何在PHP中为amp-form输出正确的标题?

关于放大器形式的CORS标题的文档可能更容易,我仍然有点不知道我是否已经做好了一切.

现在,我的表单似乎可以在我自己的网站以及Google的AMP结果中使用.但是,它不适用于我的开发网站; 我也不确定它是否真的非常安全.这是我目前使用的代码,一个生活在https://podnews.net上的脚本

这是大量试验和错误的结果,我不禁想到文档可以更清楚地解决这个问题.

header('Cache-Control: private, no-cache');
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Credentials: true');
header('access-control-expose-headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://podnews.net');
header('Content-Type: application/json');
Run Code Online (Sandbox Code Playgroud)

特别是:$_SERVER['HTTP_ORIGIN']根据我的理解,可以包括AMP缓存.

这里有什么正确的有效值?如何添加多个值(假设至少有两个AMP缓存)?为什么它不在开发站点上运行,这类似于http://dev.podnews.net(它启动的错误是CORS,而不是关于在HTTP而不是HTTPS).如何编写本文以便所有AMP开发人员都能轻松参考?

cors amp-html

3
推荐指数
1
解决办法
1071
查看次数