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>
};