目录

AMP-specific metadata
- Required <amp-story> attributes
- Recommended <amp-story> attributes
  - poster-landscape-src
  - poster-square-src
Metadata

Make your Web Stories discoverable

Important: this documentation is not applicable to your currently selected format websites!

Ensure your Web Stories are reaching your intended audience by including necessary metadata and markup.

AMP-specific metadata

Web Stories with missing or incorrect AMP-specific metadata may not surface in search engines or third party platforms.

Required <amp-story> attributes

Web Stories must include the following <amp-story> attributes.

<body>
    <amp-story standalone
    title="Web Story Title"
    publisher="Web Story Publisher"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
    ...
    </amp-story-standalone>
</body>

`title`

The title of the Web Story.

`publisher`

The name of the Web Story publisher.

`publisher-logo-src`

A URL to the Web Story publisher's logo image. The logo image should be larger than or equal to 96x96px and maintain a 1:1 aspect ratio. This logo appears in the right corner on the top of the poster image on platforms currently (October 2020) supporting Web Stories.

`poster-portrait-src`

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x853px and maintain a 3:4 aspect ratio.

Recommended <amp-story> attributes

`poster-landscape-src`

A URL to an image used as the Web Story poster in landscape format. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 853x640px and maintain a 4:3 aspect ratio.

`poster-square-src`

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x640px and maintain a 1:1 aspect ratio.

Metadata

Platforms that surface Web Stories rely on metadata to correctly index and display them. Include the following recommended information to give users a delightful Web Story experience.

Include the following recommended HTML markup in your Web Stories for the best user experience.

Canonical link

All Web Stories must include a canonical URL that points to the Web Story itself.

<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">

favicon

Include a favicon to display as the icon in the browser tab.

Document title

Give your Web Story document a title by including a </a></code> tag.</p> <h2 id="image-alt-text">Image alt-text</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Accessibility_concerns">meaningful alt-text for images</a>.</p> <h2 id="video-subtitles-and-captions">Video subtitles and captions</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">video subtitles and/or captions</a>.</p> <h2 id="page-attachments">Page attachments</h2> <p>Use <a href="https://amp.dev/documentation/components/amp-story-page-attachment/">page attachments</a> to present additional information in “classic article form” alongside your Web Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.</p> <h2 id="schema.org-metadata">Schema.org metadata</h2> <p>Including <a href="https://schema.org/">schema.org</a> structured data vocabulary defines important information about your Web Story that allows third-party platforms, such as search engines, to display and index them.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use></svg> </div> <div class="ap-m-tip-content"> Validate your schema.org data using Google's <a href="https://search.google.com/test/amp">AMP Test</a>. </div> </div></p> <h2 id="ogp-facebook-metadata">OGP Facebook metadata</h2> <p>Including <a href="https://ogp.me/">Open Graph protocol</a> enables Web Stories sharing on Facebook.</p> <h2 id="twitter-card-data">Twitter card data</h2> <p>Including <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter card data</a> allows you to attach photos, videos and media experiences to a Tweet sharing your Web Story.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"></use></svg> </div> <div class="ap-m-tip-content"> Read more about <a href="https://blog.amp.dev/2020/02/12/seo-for-amp-stories/">SEO for Web Stories in the AMP Blog</a>. </div> </div></p> </section> <section class="ap--content"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large" style="max-width: 38px" layout="responsive"> </amp-img> <span> <strong>Written by <a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> </span> </a> </li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar" layout="nodisplay" side="left"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"></use></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=stories"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"></use></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=ads"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"></use></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=email"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"></use></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>开始</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/"> <span>创建您的第一个 AMP</span> <span class="nav-link-lastword">页面<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/"> 制作 AMP HTML 网页 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/include_image/"> 添加图片 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/presentation_layout/"> 修改呈现形式和布局 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/prepare_for_discovery/"> 准备网页以供发现和分发 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/preview_and_validate/"> 预览和验证 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/create/publish/"> 发布之前的最终步骤 </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/"> <span>将 HTML 网页转换成 AMP</span> <span class="nav-link-lastword">网页<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/setting-up/"> 设置 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/building-page/"> 创建一个常规 HTML 网页 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/resolving-errors/"> 解决验证错误 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/discoverable/"> 使您的网页可被轻松发现 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/converting/congratulations/"> 恭喜！ </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/"> <span>添加高级 AMP</span> <span class="nav-link-lastword">功能<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/setting_up/"> 设置 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/review_code/"> 查看入门代码 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/adding_components/"> 添加 AMP 扩展组件 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/adding_carousels/"> 添加轮换展示内容 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/tracking_data/"> 通过分析跟踪互动 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/navigating/"> 为您的网站添加导航元素 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/fonts/"> 添加字体 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/start/add_advanced/congratulations/"> 恭喜！ </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>学习</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/common_attributes/"> 常见属性 </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP HTML 规范</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/spec/amphtml/"> AMP HTML Specification </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/"> AMP 样板代码 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/spec/release-schedule/"> AMP 发布时间表 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/experimental/"> 实验性功能 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-html-layout/"> AMPHTML 布局系统 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>验证工作流</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> 验证 AMP 网页 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/"> AMP 验证错误 </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP 缓存和 CORS</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> AMP与CORS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> 如何缓存 AMP 网页 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-debugging/"> 调试 AMP 缓存问题 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-urls/"> AMP 缓存的网址格式和请求处理 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/learn/combine-amp-pwa/"> 将 AMP 与 PWA 相结合 </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>开发</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/"> <span>样式和布局</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"> 支持的 CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/"> 布局和媒体查询 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/"> 占位符和后备 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/"> 借助 srcset、sizes 和 heights 属性制作自适应图片 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/"> 制作自适应 AMP 网页 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/"> 添加自定义字体 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/media_iframes_3p/"> 添加图片和视频 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/media_iframes_3p/third_party_components/"> 添加第三方内容 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/media_iframes_3p/iframes/"> Include iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>动画和过渡</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/animations/triggering_css_animations/"> 触发 CSS 动画和过渡 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/animations/introduction_to_animations/"> 复杂动画简介 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/monetization/"> <span>在您的 AMP 网页中利用广告获利</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/monetization/"> 在您的 AMP 网页中利用广告获利 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/monetization/ads_vendors/"> 广告供应商 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/monetization/content_encryption/"> 利用客户端加密保护订阅内容 </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/"> <span>创建互动式 AMP</span> <span class="nav-link-lastword">网页<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/prereqs-setup/"> 设置 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/get-familiar/"> 熟悉入门代码 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/advanced-interactivity/"> 提升互动 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/remote-data/"> Working with remote data </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity/wrapping-up/"> Wrapping up </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/login_requiring/login/"> Login </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/login_requiring/add_comment/"> Add a comment </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/login_requiring/logout/"> Logout </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/login_requiring/summary/"> 总结 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/live_blog/"> 制作实时博客 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/develop/seatmap/"> 创建座位图 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>集成</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/amp-in-pwa/"> 将 AMP 用作 PWA 的数据源 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/amp-to-pwa/"> 通过 AMP 网页预加载 PWA </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/integrate-with-apps/"> 将 AMP 与应用集成 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/embed-stories/"> 在网页中嵌入故事 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>优化与衡量</span> </span> <input class="nav-trigger" type="checkbox" checked/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp-managing-user-state/"> Manage non-authenticated user state with AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/publishing_checklist/"> AMP 发布核对清单 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/"> AMP Optimizer 的工作方式 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Node.js AMP Optimizer 指南 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/"> <span>配置分析工具</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/"> 分析工具供应商 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: the basics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/deep_dive_analytics/"> 深入介绍 AMP Analytics（分析） </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/"> 使用情形 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/discovery/"> 使您的页面可被轻松发现 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/engagement/"> 提高用户互动度 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/"> 优化托管的 AMP 网页 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/"> 免受第三方攻击 </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp_to_pwa/"> 将 AMP 网站转换成 PWA <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/amp-as-pwa/"> 为 AMP 网页启用渐进式网页应用功能 </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/optimize-and-measure/tracking-engagement/"> 如何为 AMP 网页配置基本分析 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/"> 如何贡献自己的力量 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/"> 文档类型 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/"> AMP 术语 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/"> 格式指南和教程 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> 将分析工具与 AMP 集成 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/zh_cn/documentation/guides-and-tutorials/contribute/translations/"> Contribute translations </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="ap-o-footer"> <div class="ap-o-footer-line-top"> <div class="ap-o-footer-hint">当然，此网站是使用 AMP 创建的！</div> <div class="ap-o-footer-follow"> <h5 class="ap-o-footer-follow-title">关注我们</h5> <ul class="ap-o-footer-follow-menu"> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use></svg> </a></li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"></use></svg></a> </li> </ul> </div> </div> <div class="ap-o-footer-nav"> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">概览</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/zh_cn/about/websites/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP 框架</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/about/use-cases/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>用例</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/success-stories/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>成功案例</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/about/how-amp-works/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>功能</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">文档</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>使用入门</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>指南和教程</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/components/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>组件</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/examples/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>示例</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/templates/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>设计模板</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/tools/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>工具</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">社区</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/zh_cn/support/faq/platform-and-vendor-partners/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>平台和供应商合作伙伴</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/documentation/guides-and-tutorials/contribute/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>贡献</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/community/roadmap/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>路线图</a></li> </ul> <h5 class="ap-o-footer-nav-title">OpenJS Foundation</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>The OpenJS Foundation</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>OpenJS Foundation Bylaws</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark Policy</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark List</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">活动</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Conf 2020</a></li> <li class="ap-o-footer-nav-item"><a href="/zh_cn/events/amp-cs-2019/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="ap-o-footer-nav-title">AMP 品牌资料</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>样式指南</a></li> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>徽标</a></li> </ul> </div> </div> <div class="ap-o-footer-line-bottom"> <div class="ap-o-footer-openjsf"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive"></amp-img> </div> <ul class="ap-o-footer-legal-nav-menu"> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://privacy-policy.openjsf.org" rel="noopener">隐私权政策</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="ap-o-footer-copyright"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent> <script type="application/json"> {"extraUrlParams": {"cd2": "${ampdocHost}"}, "requests": {"CWV_EVENT": "${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv", "base": "https://google-analytics.com/collect/"}, "triggers": {"banner": {"on": "click", "selector": "#top-banner", "vars": {"event_action": "click", "event_category": "guides-and-tutorials", "event_label": "banner", "event_name": "banner"}}, "breadcrumbLink": {"on": "click", "selector": ".ap-m-breadcrumbs-crumb", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "breadcrumbs", "event_name": "breadcrumbs"}}, "cls": {"extraUrlParams": {"cls": "${cumulativeLayoutShift}"}, "on": "visible", "request": "CWV_EVENT"}, "defaultPageview": {"on": "visible", "request": "pageview", "vars": {"title": "{{title}}"}}, "fid": {"extraUrlParams": {"fid": "${firstInputDelay}"}, "on": "visible", "request": "CWV_EVENT"}, "formatToggle": {"on": "click", "selector": ".ap-m-format-toggle-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "format-toggle", "event_name": "format-toggle"}}, "lcp": {"extraUrlParams": {"lcp": "${largestContentfulPaint}"}, "on": "visible", "request": "CWV_EVENT"}, "navigation": {"on": "click", "selector": ".ap--header a, .ap-o-burger-menu-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "navigation", "event_name": "navigation"}}, "scrolledEnd": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [90]}, "vars": {"event_action": "end", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "scrolledHalf": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [50]}, "vars": {"event_action": "half", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "searchButton": {"on": "click", "selector": "#searchTriggerOpen", "vars": {"event_action": "open", "event_category": "search", "event_label": "search", "event_name": "search"}}, "sidebarLink": {"on": "click", "selector": ".ap-o-sidebar a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "sidebarToggle": {"on": "click", "selector": "label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "tocLink": {"on": "click", "selector": ".ap-o-toc a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}, "tocToggle": {"on": "click", "selector": ".ap-o-toc label", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}}, "vars": {"config": {"G-TYM9BH1XCX": {"groups": "default"}}, "gtag_id": "G-TYM9BH1XCX"}} </script> </amp-analytics><amp-geo layout="nodisplay"> <script type="application/json"> { "ISOCountryGroups": { "eu": ["preset-eea"], "doubleOptIn": ["de", "at", "no", "gr", "lu"] } } </script> </amp-geo> <amp-consent id="consent" class="ap-o-consent" layout="nodisplay"> <script type="application/json"> { "consentInstanceId": "consent", "promptUI": "consent-popup", "consentRequired": false, "geoOverride": { "eu": { "consentRequired": true } } } </script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="ap-o-consent-close" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="关闭"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="接受使用 Cookie">知道了！</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay"></amp-install-serviceworker> </body> </html>