如何使用 Google AMP Amp-Accordion 创建隐藏页眉?

front end technologyhtmlweb development更新于 2024/12/20 14:04:17

Google AMP(Accelerated Mobile Pages，加速移动页面)是一个开源框架，旨在创建快速加载且适合移动设备的网页。amp-accordion 是 AMP 库中的一个组件，允许在网页上创建可折叠的内容部分。Google 提供的 Accelerated Mobile Pages (AMP) 框架允许您创建隐藏内容，并允许用户切换打开和关闭。

算法

使用文件开头的声明声明一个新的 HTML5 文档。
在元素内部，添加 ⚡ 属性以指示这是一个 AMP HTML 文档。
在元素内部，添加 meta 元素，并将 charset 属性设置为"utf-8"。
使用 title 元素设置文档标题。
添加一个 link 元素，并将 rel 属性设置为"canonical"，并将 href 属性设置为文档的规范 URL。
添加一个 meta 元素，并将 name 属性设置为"viewport"，并将 content 属性设置为"width=device-width,minimum-scale=1,initial-scale=1"。这会将视口宽度设置为设备宽度，并将初始比例设置为 1。
添加一个 script 元素，并将 src 属性设置为 "https://cdn.ampproject.org/v0.js" ，以引用 AMP JavaScript 库。使用 async 属性异步加载脚本。
添加一个 style 元素，并使用 amp-custom 属性来定义文档的自定义 CSS 样式。您可以在此处添加任何想要用于 AMP 的自定义样式。
在该元素内，添加文档的可见内容。
使用 <amp-accordian> 元素创建手风琴折叠面板。在 <amp-accordian> 元素内添加一个或多个 <section> 元素。每个 <section>应包含标题 (<h2>) 和内容 (<div>)。
使用 .html 文件扩展名保存文档，并在 Web 浏览器中打开以查看结果。

示例

<!doctype html>
<html amp lang="en">
    <head>
        <meta charset="utf-8">
        <title>AMP accordion</title>
        <link rel="canonical" href="self.html">
        <meta name="viewport" content="width=device-width">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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>
        <style amp-custom>
            /* Custom css */
        </style>
    </head>
    <body>
        <div class="container">
            <amp-accordion class="myaccordion">
                <section expanded>
                    <h3>Header</h3>
                    <div class="content">
                        Welcome to Tutorialspoint.
                    </div>
                </section>
                <section>
                    <h3>Header 2</h3>
                    <div class="content"> 
                       <a href="https://www.cainiaomax.com/index.htm">Go to Tutorialspoint</a>
                    </div>
                </section>
            </amp-accordion>
        </div>
    </body>
</html>

我们已经添加了所需的 AMP 样板代码、页面标题以及一个包含一个部分的 amp-accordion 组件，具体内容如上图所示，并已在 HTML 标记中显示。该部分包含一个标题和一个包含隐藏文本的 div。

CSS 代码

我们可以为该部分内的元素添加一些自定义 CSS 样式，以使隐藏的标题显示得更美观。

示例

body {background: #f2f2f2;font-family: Arial, Helvetica, sans-serif;}
            .container {max-width: 700px; margin: 0 auto;}
            .myaccordion {background: #ffffff;margin: 30px;}
            .myaccordion section h3 {padding: 1rem;background:  #fbfbfb;font-size: .9rem;}
            .myaccordion section .content {padding: 1rem;}

结论

在您的移动网页上，使用 Google AMP amp-accordion 组件是添加隐藏页眉的绝佳方法。您可以按照本文中的说明创建一个功能齐全的隐藏页眉，用户可以切换打开和关闭。通过添加您自己的 CSS 样式，您可以进一步改变隐藏页眉的外观和风格。总而言之，Google AMP 框架提供了各种强大的元素，可以帮助您构建快速、响应迅速且引人入胜的移动网站。