标签: amp-html

AMP HTML支持什么CSS规则?

我已经阅读了https://github.com/ampproject/amphtml/blob/master/docs/create_page.md关于CSS的用法,但我不确定格式允许的CSS选择器.选择器/属性是否有任何限制?

样式声明可以放在任何地方<html>或仅放在<head>

是否可以包含任何外部样式表?

css amp-html

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

使用AMP HTML搜索可能吗?

我只是想尝试创建一个AMP HTML网站.但是,我不能错过的是我们的搜索功能.

据我所知,到目前为止,使用AMP HTML无法进行搜索(输入字段,JavaScript处理程序).

有没有办法在AMP HTML中提供整洁的搜索功能?也许使用amp-list组件?

search amp-html

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

AMP文章Microdata中的SVG图像?

在尝试schema.org/Article针对Google的结构化数据测试工具验证时,我注意到如果您指定SVG图像,则会出错:

徽标提供的值必须是有效的URL.

要求:

AMP文章(这是什么?)

当URL被改变为具有一个.png(或.jpg,.bmp,.webp等)延伸,而不是.svg,它通过验证.

这是我正在使用的示例:

<div itemscope itemtype="http://schema.org/Article">
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="Example" />
        <meta itemprop="url" content="http://example.com" />
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <meta itemprop="url" content="http://example.com/logo.svg" />
            <meta itemprop="width" content="600" />
            <meta itemprop="height" content="60" />
        </div>
    </div>
    <meta itemprop="dateModified" content="2016-01-05T12:43" />
    <meta itemprop="datePublished" content="2016-01-05T12:43" />
    <meta itemprop="headline" content="Example" />
    <meta itemprop="name" content="Example" />
    <meta itemprop="author" content="Example" />
    <link itemprop="mainEntityOfPage" href="http://example.com/article" …
Run Code Online (Sandbox Code Playgroud)

svg microdata schema.org google-rich-snippets amp-html

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

Google AMP 脚本与 jquery window.scroll 冲突

我正在尝试遵循 Google ( ampproject.org )建议的 AMP 指南,但是一旦我添加了他们的 js 脚本,jQuery 滚动就会停止工作

有谁知道为什么以及如何解决它?

javascript amp-html

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

尝试实现amp-mustache时出错

我试图复制这个例子没有成功.我想使用mustache模板添加列表,如下所示:

<ul>
    <amp-list width=auto
              height=100
              layout=fixed-height
              src="/assets/popular.json">
          <template type="amp-mustache"
                    id="amp-template-id">
              <li>
                  <a href={{url}}>{{title}}</a>
              </li>
          </template>
    </amp-list>
</ul>
Run Code Online (Sandbox Code Playgroud)

我的/assets/popular.json档案是:

{
 "items": [
   {
     "title": "amp-carousel",
     "url": "https://ampbyexample.com/components/amp-carousel"
   },
   {
     "title": "amp-img",
     "url": "https://ampbyexample.com/components/amp-img"
   },
   {
     "title": "amp-ad",
     "url": "https://ampbyexample.com/components/amp-ad"
   },
   {
     "title": "amp-accordion",
     "url": "https://ampbyexample.com/components/amp-accordion"
   }
 ]
}
Run Code Online (Sandbox Code Playgroud)

但我不能让它工作,json模板中的值没有被替换,我得到这个错误:

Missing URL for attribute 'href' in tag 'a'
Run Code Online (Sandbox Code Playgroud)

我不知道为什么价值{{url}}没有被正确地替换为内容json.

我已经添加了必要scripts的头部.

json jekyll mustache amp-html amp-mustache

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

AMP:如何更改amp-accordion标题的背景颜色?

我试图改变amp-accordion中标题的背景颜色.我能够做到这一点的唯一方法是应用.-amp-accordion-header无效的样式.

background-color amp-html

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

动态高度的放大器清单

我使用的是放大器清单,我想根据得到的结果得出一个动态的高度。有办法吗?我做不到。

<amp-list src="request-url">
    <template type="amp-mustache" id="amp-template-id">
    ...
    </template>
</amp-list>
Run Code Online (Sandbox Code Playgroud)

所有可用的布局都需要在放大器清单级别或父级别的尺寸。但是我不想指定高度。我的结果可以包含1或12个项目。

amp-html

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

AMP图像未出现

我无法amp-img显示这个。它用作图像,当我单击src-link时,它会正确加载到单独的页面上。将其更改为amp-img使其消失。我background-color: red在上设置amp-img,该框正确显示,但是它是一个空的红色框。

HTML:

<li>
    <a href="/">
    <amp-img src="https://d12v9rtnomnebu.cloudfront.net/oursite/logo_white.png" alt="site logo" width="264" height="96"/>
    </a>
</li>
Run Code Online (Sandbox Code Playgroud)

CSS(可能有很多多余的东西需要修剪,但在工作之前不知道什么是重要的):

.amp .site-menu li {
    height: 32px;
    line-height: 32px;
}

.amp .site-menu li:first-child {
    float: left;
    min-width: 50px;
    max-width: 180px;
    width: 100%;
    display: block;
}

.amp .site-menu a {
    min-width: 50px;
    max-width: 200px;
    width: 100%;
    display: block;
}

.amp .site-menu amp-img {
    height: 32px;
    min-width: 50px;
    max-width: 200px;
    width: 100%;
    float: left;
    display: block;
    background-color: red;
}
Run Code Online (Sandbox Code Playgroud)

html css amp-html

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

如何将Facebook的像素添加到Google的AMP中?

目前看来,Facebook和Google都没有人将Facebook跟踪像素添加到放大器分析中.

这里有人知道怎么做吗?示例代码或github是首选.

非常感谢你

html5 google-analytics amp-html facebook-pixel google-amp

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

有没有办法在<amp-img>中使用onerror()属性

有没有办法使用onerror属性<amp-img>

它在html中工作得很好.

<img src="../images/some-logo1.jpg" onerror="this.src='../images/no-img.jpg';" class="posting-logo-img">
Run Code Online (Sandbox Code Playgroud)

但是amp html会在amp-img中创建img标签

<amp-img src="/img/amp.jpg" alt="AMP" class="posting-logo-img" onerror="this.src='../images/no-img.jpg';" >
  <noscript>
    <img src="/img/amp.jpg" alt="AMP"> 
  </noscript>
</amp-img>
Run Code Online (Sandbox Code Playgroud)

html amp-html amp-img

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