amp-bind-macro

簡介

這個範例示範如何使用 amp-bind-macro 呼叫來清理 URL 的使用者輸入。

設定

匯入 amp-bind 元件以使用 amp-bind-macro。

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

實作

在 amp-bind-macro 中定義的 replaceSpace 表達式會將使用者輸入中的空格替換為 s/ /%20/

並將所有字母設定為小寫，以符合 Google 搜尋的 URL 格式

輸入您想要搜尋的內容，包含空格

您清理後的連結將會顯示在此處。您可以複製並貼到搜尋欄以進行測試。

<amp-bind-macro id="replaceSpace" arguments="str" expression="str.toLowerCase().split(' ').join('%20')">
</amp-bind-macro>

<p>
  Type in something you want to search with spaces
</p>
<input type="text" placeholder="Search Query" on="input-throttled:AMP.setState({ argumentString: event.value })">
  <p [text]="'You have create a sanitized link: https://www.google.com/search?q=' + replaceSpace(argumentString)">
    Your sanitized link will display here. You can copy and paste into search bar to test.
  </p>

需要更多說明嗎？

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

前往 Stack Overflow

未說明的特性？

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

在 GitHub 上編輯範例

由 @elisameyer 撰寫