小工具：導覽按鈕

<devsite-nav-buttons> 自訂元素允許一組按鈕重新載入 但帶有不同查詢字串參數的搜尋查詢。

示範

Java sample code

用量

如要使用，請建立含有 name 屬性的 <devsite-nav-buttons> 元素，並 加入多個含有不同 value 屬性的 button 元素。 為每個按鈕群組加入 default，以選取預設按鈕 屬性加入該元素。

<devsite-nav-buttons name="language">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

在 Markdown (.md) 檔案中，確認自訂元素是以 標準 HTML 元素，例如 section、div 或 p：

<div>
  <devsite-nav-buttons name="language">
    <button value="java" default>Java example</button>
    <button value="python">Python example</button>
    <button value="go">Go example</button>
  </devsite-nav-buttons>
</div>

接著您就能 動態代碼 ，用於檢查查詢字串參數來決定要顯示哪些內容 以便傳達給使用者

{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}

使用 ID 進行網頁內連結

一般來說，最好將 <devsite-nav-buttons> 元素放在附近 網頁頂端，因為使用者點選任何按鈕後都會前往新網址。 然後重新載入網頁。如果在網頁中間使用元素 和/或想將元素在頁面中的位置加入書籤，則您應 為元素指定專屬的 id，這會在元素上附加已命名的錨點 網址，然後讓頁面在載入網頁時捲動至元素的位置。

<devsite-nav-buttons name="language" id="code-examples">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

網址參數選項

根據預設，系統會在使用者點選按鈕後儲存按鈕的值 移至 localStorage。系統會將選取的值自動新增至網址列，如 其他包含 <devsite-nav-buttons> 元素的網頁網址參數 相同的 name 和 value 欄位。

移除預設按鈕的網址參數

如要覆寫預設行為，並在 使用者點選了 default 按鈕，將 param="reset" 加入元素：

<devsite-nav-buttons name="language" param="reset">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

一律為預設按鈕顯示網址參數

使用者造訪含有第一個 <devsite-nav-buttons> 元素的網頁時 此時，default 按鈕會醒目顯示，且地址沒有變動 直到按下按鈕為止。

如要透過 default 按鈕的網址參數更新網址列，請執行以下操作： 使用 <devsite-nav-buttons> 元素，將 param="always" 加入元素：

<devsite-nav-buttons name="language" param="always">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

按鈕樣式

根據預設，<devsite-nav-buttons> 元素中的按鈕有「方塊」 樣式。若要增加或減少按鈕的視覺效果，您可以加入 具有 filled 或 text 值的 type 屬性，就能為每個屬性設定樣式 button 元素。

type="filled" 的按鈕樣式：

<devsite-nav-buttons name="language" type="filled">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

type="text" 的按鈕樣式：

<devsite-nav-buttons name="language" type="text">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>