我已经阅读了https://github.com/ampproject/amphtml/blob/master/docs/create_page.md关于CSS的用法,但我不确定格式允许的CSS选择器.选择器/属性是否有任何限制?
样式声明可以放在任何地方<html>或仅放在<head>?
是否可以包含任何外部样式表?
我只是想尝试创建一个AMP HTML网站.但是,我不能错过的是我们的搜索功能.
据我所知,到目前为止,使用AMP HTML无法进行搜索(输入字段,JavaScript处理程序).
有没有办法在AMP HTML中提供整洁的搜索功能?也许使用amp-list组件?
在尝试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) 我正在尝试遵循 Google ( ampproject.org )建议的 AMP 指南,但是一旦我添加了他们的 js 脚本,jQuery 滚动就会停止工作
有谁知道为什么以及如何解决它?
我试图复制这个例子没有成功.我想使用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的头部.
我试图改变amp-accordion中标题的背景颜色.我能够做到这一点的唯一方法是应用.-amp-accordion-header无效的样式.
我使用的是放大器清单,我想根据得到的结果得出一个动态的高度。有办法吗?我做不到。
<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-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) 有没有办法使用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) amp-html ×10
css ×2
html ×2
amp-img ×1
amp-mustache ×1
google-amp ×1
html5 ×1
javascript ×1
jekyll ×1
json ×1
microdata ×1
mustache ×1
schema.org ×1
search ×1
svg ×1