
- Google AMP 教程
- Google AMP - 首页
- Google AMP - 概述
- Google AMP - 简介
- Google AMP - 图片
- Google AMP - 表单
- Google AMP - 内嵌框架 (Iframe)
- Google AMP - 视频
- Google AMP - 按钮
- Google AMP - Timeago (时间显示)
- Google AMP - MathML (数学标记语言)
- Google AMP - 自动调整文本大小 (Fit Text)
- Google AMP - 倒计时
- Google AMP - 日期选择器
- Google AMP - 故事 (Story)
- Google AMP - 选择器
- Google AMP - 链接
- Google AMP - 字体
- Google AMP - 列表
- Google AMP - 用户通知
- Google AMP - 下一页
- Google AMP - 属性
- 样式和自定义 CSS
- Google AMP - 动态 CSS 类
- Google AMP - 动作和事件
- Google AMP - 动画
- Google AMP - 数据绑定
- Google AMP - 布局
- Google AMP - 广告
- Google AMP - 分析
- Google AMP - 社交小部件
- Google AMP - 媒体
- HTML 页面转换为 AMP 页面
- Google AMP - 基本语法
- Google AMP - 验证
- Google AMP - 缓存
- Google AMP - 自定义 JavaScript
- Google AMP - CORS (跨域资源共享)
- Google AMP 有用资源
- Google AMP - 快速指南
- Google AMP - 有用资源
- Google AMP - 讨论
Google AMP - 动态 CSS 类
amp-dynamic-css-classes 会向 body 标签添加动态类。本章我们将学习此标签的详细信息。
要使用 amp-dynamic-css-classes,我们需要添加以下脚本:
<script asynccustom-element="amp-dynamic-css-classes" src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"> </script>
amp-dynamic-css-classes 会处理两个重要的类:
- amp-referrer-*
- amp-viewer
让我们详细讨论每个类。
amp-referrer-*
这些类根据用户的访问来源设置。这意味着如果用户来自 Google,则会设置与 Google 相关的 referrer 类。Twitter 和 Pinterest 也同样适用。
这些类根据引荐来源的类型提供。
例如,如果用户从 Google 搜索引擎点击 AMP 页面,则会添加以下类:
- amp-referrer-www-google-com
- amp-referrer-google-com
- amp-referrer-com
同样,Twitter、Pinterest、LinkedIn 等也有相应的类。
amp-viewer
AMP 查看器基本上会更改 AMP URL 以从 Google 缓存获取详细信息。如果您在 Google 搜索中搜索某些内容,显示的轮播将包含所有 AMP 页面。
单击这些页面后,它们会重定向到以 Google URL 为前缀的 URL。当用户在 AMP 查看器中查看页面并使用动态类时,将设置 amp-viewer 类。

单击 AMP 页面后,您在地址栏中获得的 URL 如下所示:
https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

示例
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Dynamic Css Classes</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <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 custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script> <script async custom-element = "amp-dynamic-css-classes" src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"> </script> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <style amp-custom> body:not(.amp-referrer-pinterest-com) .if-pinterest, body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample, body:not(.amp-referrer-google-com) .if-google, body:not(.amp-referrer-twitter-com) .if-twitter, body:not(.amp-referrer-linkedin-com) .if-linkedin, body:not(.amp-referrer-localhost) .if-localhost { display: none; } body:not(.amp-viewer) .if-viewer, body.amp-viewer .if-not-viewer { display: none; } p { padding: 1rem; font-size:25px; } </style> </head> <body> <h3>Google AMP - Dynamic Css Classes</h3> <div> <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p> <p class = "if-twitter">You were referred here or embedded by Twitter!</p> <p class = "if-google">You were referred here or embedded by Google!</p> <p class = "if-ampbyexample">You came here directly! Cool :)</p> < class = "if-localhost">You came here directly! Cool :)</p> </div> <div> <p class = "if-not-viewer">Hey! You are not coming from amp viewer</p> <p class = "if-viewer">Hey! From amp viewer.</p> <div> </body> </html>
输出

广告