跳轉至內容

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
             (' &gt; ' , <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
             (' &gt; ' , 
             <a href="{$style:site-home}/apps/{$style:app-id}/index.xq">
             {$style:app-info/xrx:app-name/text()}
             </a>)
        else ()
      }
   </div>
};
華夏公益教科書