amp-dynamic-css-classes

簡介

AMP 的動態 CSS 類別由 amp-dynamic-css-class 提供，可針對少數條件啟用布林邏輯

設定

包含 amp-dynamic-css-classes 擴充組件。

<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>

為了此範例的目的，我們建立了一些輔助 CSS 類別，這些類別使用 amp-dynamic-css-classes 定義的 CSS 規則。這些類別讓我們能夠更簡潔地在下方的程式碼中參照條件。

<style amp-custom>
  :root {
    --space-2: 1rem;   /* 16px */
  }
  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;
  }
  .dynamic-css {
    padding: var(--space-2);
  }
</style>

推薦連結來源

使用這些推薦連結來源類別可讓您有條件地包含元素。您不需要包含對 amp-dynamic-css-classes 組件的呼叫，即可初始化 body 元素上的類別。

您是從 Pinterest 推薦或嵌入這裡的！

您是從 Twitter 推薦或嵌入這裡的！

您是從 Google 推薦或嵌入這裡的！

您直接來到這裡！真棒 :)

<div class="if-pinterest dynamic-css">You were referred here or embedded by Pinterest!</div>
<div class="if-twitter dynamic-css">You were referred here or embedded by Twitter!</div>
<div class="if-google dynamic-css">You were referred here or embedded by Google!</div>
<div class="if-ampbyexample dynamic-css">You came here directly!  Cool :)</div>
<div class="if-localhost dynamic-css">You came here directly!  Cool :)</div>

檢視器

「檢視器」類別可讓您根據頁面是否嵌入在 AMP 檢視器中來設定樣式。在 Google AMP 檢視器上試用看看。請注意，這僅適用於行動裝置或瀏覽器的行動裝置模擬模式。

嗨！您並非在 AMP 檢視器的環境中瀏覽！

您好！由於您來自檢視器。

<div class="if-not-viewer dynamic-css">Hey! You're not visiting within the context of an AMP Viewer!</div>
<div class="if-viewer dynamic-css">Ahoy! Since you're coming from a viewer.</div>

需要更多說明嗎？

如果本頁面的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特性？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

作者： @jmadler