XRX/麵包屑導航欄
外觀
< XRX
我們希望為使用者提供一種一致的方式來瀏覽應用程式及其功能。為此,我們提供了一個標準的網站導航麵包屑檢視。
每個網站樣式模組都有一個 breadcrumbs() 函式。此函式檢視網站中應用程式的上下文,並有條件地將網站的每個級別顯示為連結路徑。
為了支援此函式,我們需要建立一個函式來顯示我們在網站中的深度。我們稱之為$style:web-depth-in-site變數。
以下是如何計算它的示例
declare function style:web-depth-in-site() as xs:integer {
(: if the context adds '/exist' then the offset is six levels. If the context is '/' then we only need to subtract 5 :)
let $offset :=
if ($style:web-context)
then 6 else 5
return count(tokenize(request:get-uri(), '/')) - $offset
};
此函式使用 get-uri() 函式計算當前 uri 中出現的“/”字元的數量。然後進行一些偏移計算,以便網站的根節點的計數為 1。
$style:site-home 是網站主頁的路徑,可以在網站的上下文中呈現。例如,您可以將其設定為
let $style:site-home := '/rest/db/org/my-org'
應用程式 ID 和應用程式名稱也應在 $style:app-id $style:app-name 變數中設定。
這可以從 URI 和 app-info.xml 檔案中提取。
declare function style:breadcrumbs() as node() {
<div class="breadcrumbs">
{ (: Check if Site Home should be displayed :)
if ($style:web-depth-in-site gt 1)
then <a href="{$style:site-home}/index.xq">Site Home</a>
else ()
}
{ (: Check if Apps Link should be displayed :)
if ($style:web-depth-in-site gt 2) then
(' > ' , <a href="{$style:site-home}/apps/index.xq">Apps</a>)
else ()
}
{ (: Check if App Name should be displayed :)
if ($style:web-depth-in-site gt 3) then
(' > ' ,
<a href="{$style:site-home}/apps/{$style:app-id}/index.xq">
{$style:app-info/xrx:app-name/text()}
</a>)
else ()
}
</div>
};