資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Google AMP Amp-Accordion 建立隱藏標題？
Google AMP（加速移動頁面）是一個開源框架，旨在建立載入速度快且對移動裝置友好的網頁，而 amp-accordion 是 AMP 庫中的一個元件，允許在網頁上使用可摺疊的內容部分。Google 提供了加速移動頁面 (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://tutorialspoint.tw/index.htm">Go to Tutorialspoint</a>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
我們在上面顯示的 HTML 標記中添加了所需的 AMP 模板程式碼、頁面標題以及一個包含一個部分的 amp-accordion 元件。標題和一個包含隱藏文字的 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 框架提供了許多強大的元素，可以幫助您構建快速、響應迅速且引人入勝的移動網站。
84 次檢視
