Facelets 策略来识别当前选定的列表项

Question

我正在寻找一种策略来避免我的网站上出现代码重复。

问题是我有一个无序列表，在我编码的每个页面中都会重复。 原因是我有一个列表项，其中包含一个锚点来标识当前页面。我编码的每个页面都会重复该操作。 原因是我有一个列表项，其中包含一个锚点来标识当前页面。 这允许我用 css 来支持它。

如何以可以在 Facelet 中动态更改的方式定义这样的列表？

<ui:define name="leftBar">
        <ul class="leftNav">
            <li id="home"><a id="**currentPage**" jsfc="h:link" outcome="home">#{global.homeInCaps}</a></li>
            <li id="about"><a jsfc="h:link" outcome="about">#{global.aboutInCaps}</a></li>
            <li id="blog"><a jsfc="h:link" outcome="blog">#{global.blogInCaps}</a></li>
            <li id="tutorials"><a jsfc="h:link" outcome="tutorials">#{global.tutorialsInCaps}</a>
                <ul class="leftSubNav">
                    <li><a jsfc="h:link" outcome="java">#{global.javaNormal}</a>
                        <ul class="leftSubNav">
                            <li><a jsfc="h:link" outcome="setupPath">#{global.path}</a></li>
                        </ul>
                    </li>
                    <li><a jsfc="h:link" outcome="ubuntu">#{global.ubuntuNormal}</a></li>
                    <li><a jsfc="h:link" outcome="virtualbox">#{global.virtualBoxNormal}</a></li>
                </ul>
            </li>
            <li id="contact"><a jsfc="h:link" outcome="contact">#{global.contactInCaps}</a></li>
        </ul>

    </ui:define>

Answer 1

在 JSF 中，您可以通过以下方式获取当前视图 ID：

#{facesContext.viewRoot.viewId}

它将返回视图文件的 webcontent 相对路径，例如 /home.xhtml、/about.xhtml 等。您可以借助 EL 中的条件运算符来设置类名来测试它。

<ui:param name="view" value="#{facesContext.viewRoot.viewId}" />

<li id="home"><a jsfc="h:link" outcome="home" class="#{view == '/home.xhtml' ? 'current' : ''}">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about" class="#{view == '/about.xhtml' ? 'current' : ''}">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog" class="#{view == '/blog.xhtml' ? 'current' : ''}">#{global.blogInCaps}</a></li>
...

然后，您可以使用 CSS 设置表示当前页面的链接

.leftNav .current {
    color: pink;
}

leftNav 不应该是 id 吗？