Pielāgotais elements <devsite-nav-buttons> ļauj pogu grupai atkārtoti ielādēt pašreizējo lapu ar citu vaicājumu virknes parametru.
Demonstrācija
Java sample code
Lietošana
Lai izmantotu, izveidojiet elementu <devsite-nav-buttons> ar name atribūtu un ievietojiet tajā vairākus button elementus ar dažādu value atribūtiem. Katrai pogu grupai atlasiet vienu kā noklusējumu, pievienojot elementam default atribūtu.
<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 ) failā pārliecinieties, vai pielāgotais elements ir ietīts ar standarta HTML elementu, piemēram, section , div vai 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>
Pēc tam varat izmantot dinamiskos tagus , kas pārbauda vaicājuma virknes parametrus, lai noteiktu, kuru saturu rādīt lietotājam.
{% 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 %}Lapas saistīšana ar ID
Parasti elementu <devsite-nav-buttons> vislabāk ir novietot lapas augšdaļā, jo, noklikšķinot uz jebkuras tā pogas, lietotāji tiek novirzīti uz jaunu URL un lapa tiek atkārtoti ielādēta. Ja izmantojat elementu lapas vidū un/vai vēlaties, lai elementa atrašanās vieta lapā būtu grāmatzīme, elementam jānorāda unikāls id , kas URL pievienos nosauktu enkuru un liks lapai ritināt. uz elementa atrašanās vietu, kad lapa tiek ielādēta.
<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>
URL parametru opcijas
Pēc noklusējuma, kad lietotājs noklikšķina uz vienas no pogām, pogas vērtība tiek saglabāta lokālajā krātuvē. Atlasītā vērtība tiek automātiski pievienota adreses joslai kā URL parametrs citās lapās ar elementiem <devsite-nav-buttons> , kas izmanto vienu un to pašu name un value laukus.
Noņemiet noklusējuma pogas URL parametru
Lai ignorētu noklusējuma darbību un noņemtu URL parametru, kad tiek noklikšķināts uz default pogas, pievienojiet elementam 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>
Vienmēr rādīt noklusējuma pogas URL parametru
Kad lietotājs pirmo reizi apmeklē lapu ar <devsite-nav-buttons> elementu, default poga tiek iezīmēta un adreses joslā netiek veiktas nekādas izmaiņas, kamēr netiek noklikšķināts uz pogas.
Lai atjauninātu adreses joslu ar default pogas URL parametru un nodrošinātu, ka lapās ar elementu <devsite-nav-buttons> vienmēr ir URL parametrs, elementam pievienojiet 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>
Pogu stils
Pēc noklusējuma pogām elementā <devsite-nav-buttons> ir "čipu" stils. Lai palielinātu vai samazinātu pogu vizuālo ietekmi, varat pievienot type atribūtu ar vērtību filled vai text , kas veidos katra button elementa stilu.
Pogu stils ar 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>
Pogu stils ar 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>