如何在 AMP 页面中添加自定义 CSS 和脚本 [英] How to Add Custom CSS and Script in AMP Pages
问题描述
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="AMPstyle.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
@import "css/style1.css";
{% include "css/style2.css" %}
</style>
<script type="application/ld+json" src="../Scripts/appjs/StaticCampaigns.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<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>
<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>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/initcarousel.css" /> -->
</head>
<body>
<h>AMP Pages Example.</h>
</body>
</html>
我在添加 CSS 和脚本时收到无效的 AMP 页面.我无法添加样式表和 CSS 不起作用.自定义 CSS 和脚本不起作用.请建议我如何在 AMP 页面中添加自定义 CSS (@import "css/style1.css";) 和 Script(src="../Scripts/appjs/StaticCampaigns.js").
I am getting invalid AMP Page when added CSS and script. i am not able to add stylesheet and CSS not working. Custom CSS and Script is not working. please suggest how can i add custom CSS (@import "css/style1.css";) and Script(src="../Scripts/appjs/StaticCampaigns.js") in AMP pages.
推荐答案
AMP 文档要求所有 CSS 都内联在页眉中，并要求您在样式标记上使用 amp-custom 属性.看起来您正在尝试在页面标题中添加一个 @import 语句，即使这不是 AMP，该语句也无效.我建议先编译它，然后将内容复制到样式标签中.请记住，还有 50,000 字节 大小限制.
AMP documents require all CSS to be inline in the page head and require you to use the amp-custom property on the style tag. It looks like you're attempting to add an @import statement in the page head which wouldn't be valid even if this wasn't AMP. I'd suggest compiling it first and then copying the contents into the style tags. Keep in mind there's 50,000 byte size limit too.
例如:
<style amp-custom>
h1 {
color: red
}
</style>
至于脚本，您无法在 AMP 文档中包含编写的 JavaScript.您需要寻找等效的 AMP 组件.
As for the script, you're not able to include authored JavaScript in AMP documents. You'll need to look for an equivalent AMP component.
这篇关于如何在 AMP 页面中添加自定义 CSS 和脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
