如何將自定義 JavaScript 添加到 AMP HTML

Question

我知道如何使用amp-script復制下面的 jQuery 行為；

<script
  async 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
>
</script>
<script>
  $(".menu-toggle").click(function () {
    $('.nav').toggle();
    e.preventDefault(); 
  });
</script>

<div class="menu-toggle"></div>
<ul class="nav">
  <li>ok</li>
  <li>no</li>
</ul>

我怎樣才能做到這一點？

Answer 1

為了在 AMP HTML 中使用您的自定義 JavaScript，請使用<amp-script>組件。

下面是您的 AMP HMTL 代碼；

<amp-script layout="container"
  script="toggle"
  class="amp-my-custom-script-menu">
  <div id="menu-toggle">Click to toggle nav class</div>
  <ul id="nav" class="nav-menu">
    <li>ok</li>
    <li>no</li>
  </ul>
</amp-script>

然后，您的自定義 JavaScript - 在示例中，我們的自定義 JavaScript 用於內聯；

<!-- It is important to note that the value of the type attribute for
your <script> needs to be "text/plain" a target attribute as "amp-script". -->
<script id="toggle"
  type="text/plain"
  target="amp-script">
  const menuToggle = document.getElementById('menu-toggle');
  menuToggle.addEventListener('click', () => {
    var nav = document.getElementById('nav');
    nav.classList.toggle('nav-menu-active');
  });
</script>

請注意，您通過 id (toggle) 引用您的腳本。

請記住在您的 AMP HTML 中包含amp-script組件。

<!-- Important to add "amp-script" custom element reference in your <head> tag -->
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

TL;DR：以下是一個完整的片段，展示了如何實現這一目標；

<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- Important to add "amp-script" custom element reference -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <title>AMP with custom JavaScript for class toggle</title>
  <link rel="canonical" href=".">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- Add your custom CSS here. -->
  <style amp-custom>
    .nav-menu {
      display: none;
    }
    .nav-menu-active {
      display: block;
    }
  </style>
  <!-- The hash of your script should be added here. -->
  <meta
    name="amp-script-src"
    content="sha384-YsM3ypHm0ggSSir6kuKl064hq6E0K_7esi9NeIOxfVqkKLgshY0dYBTdEBvB5UYx"
  >
  <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>
<head>
<body>
  <amp-script layout="container"
    script="toggle"
    class="amp-my-custom-script-menu">
    <div id="menu-toggle">Click to toogle nav class</div>
    <ul id="nav" class="nav-menu">
      <li>ok</li>
      <li>no</li>
    </ul>
  </amp-script>
  <script id="toggle"
    type="text/plain"
    target="amp-script">
    const menuToggle = document.getElementById('menu-toggle');
    menuToggle.addEventListener('click', () => {
      var nav = document.getElementById('nav');
      nav.classList.toggle('nav-menu-active');
    });
  </script>
</body>
</html>

如何將自定義 JavaScript 添加到 AMP HTML

問題描述

1 個解決方案

解決方案1
0 2020-07-09 18:27:19

如何將自定義 JavaScript 添加到 AMP HTML

問題描述

1 個解決方案

解決方案1 0 2020-07-09 18:27:19

解決方案1
0 2020-07-09 18:27:19