使用 p:selectOneMenu 导航

Question

我正在使用单选菜单导航到我网站的不同部分：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

有没有更 SEO 友好的方式来做到这一点？我担心 JavaScript 链接不会被关注。

Answer 1

使用带有<p:column> 的自定义内容，其中带有<h:link>。

豆子：

private List<Page> pages;

@PostConstruct
public void init() {
    pages = new ArrayList<Page>();
    pages.add(new Page("Page 1", "/page1.xhtml"));
    pages.add(new Page("Page 2", "/page2.xhtml"));
    pages.add(new Page("Page 3", "/page3.xhtml"));
}

查看：

<p:selectOneMenu var="page">
    <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.title}" />
    <p:column>
        <h:link value="#{page.title}" outcome="#{page.viewId}" />
    </p:column>
</p:selectOneMenu>

请注意，这不适用于 List<SelectItem> 或单个 <f:selectItem> 条目。您确实需要提供List<Entity>（其中Entity 在上面的示例中为Page）。

这会生成一个<table>，其中包含完全值得且可抓取（且可点击！）<a> 元素。

另见：

• What is the difference between redirect and navigation/forward and when to use what?
• How to navigate in JSF? How to make URL reflect current page (and not previous one)

Answer 2

只需创建函数导航为：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

public void navigate() {
    FacesContext context = FacesContext.getCurrentInstance();
    NavigationHandler navigationHandler = context.getApplication()
            .getNavigationHandler();
    navigationHandler.handleNavigation(context, null, outcome
            + "?faces-redirect=true");
}

Answer 3

有很多方法可以实现您想要的。首先，我将描述您的方法的替代方案，然后将发表一些关于 SEO 的评论。

在更改事件上使用普通表单提交

首先，当用户在更改事件上隐式提交表单时，您可以通过普通表单提交来处理导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter" onchange="submit()">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="submit" action="#{bean.handleNavigation}" style="display:none"/>
</h:form>

与

@FacesConverter("pageConverter")

和托管 bean (@ManagedBean Bean) 与

private List<Page> pages;
private Page selectedPage;

public String handleNavigation(){
    //do some job before navigation
    return (selectedPage == null) ? null : selectedPage.getUrl();
}

和模型类

class Page {
    private String name;//title in links
    private String url;//JSF view-id
}

在有意义的客户端按钮点击上导航

您可以使用您的 Dropbox 来保留用户选择的选择，并有一个按钮来执行导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="Navigate" action="#{bean.performNavigation}"}/>
</h:form>

与上述型号相同。

基于<h:link>s的导航

你用简单的<h:link>s导航工作吗：

<ul>
    <ui:repeat var="page" value="#{bean.pages}>
        <li>
            <h:link value="#{page.name}" outcome="#{page.url}" />
        </li>
    </ui:repeat>
</ul>

并相应地设置此菜单的样式。

搜索引擎优化技术

如今，SEO 越来越重要，因此遵守其规则至关重要。除了使用上述（基本）Page 类命名页面链接之外，使用 url 重写解决方案也很重要，这样用户在浏览器中看到的是 www.site.com/contact-us 而不是 www.site.com/contact.xhtml。

遵循恕我直言的最简单方法是使用Prettyfaces，这是一个很好的解决方案，符合我的口味。它允许您非常轻松地设置重写的 url（并在 JSF 组件中重写所有内部 url）。

要增强您的网站 SEO 组件，您可以在 Page 模型类中引入字段 seoUrl，然后有一个 Prettyfaces 映射将显示 SEO 友好的 url（即 www.site.com/contact-us）而不是 JSF 视图 ID（即www.site.com/contact.xhtml) 在网络浏览器的地址栏中。

编辑 - 关于是否需要重写 URL 的争议

Google 提出的一些 SEO 友好规则的背景，这些规则参考了 URL 结构：

1. 改进 URL 的结构 - 它还可以让搜索引擎更好地抓取您的文档 (Google search engine optimization guide)；
2. 花时间使您的 URL 对用户和搜索引擎都尽可能简单。一些网站管理员尝试通过将动态 URL 重写为 静态的（the same reference，斜体是我的）；
3. 在 URL 中使用单词（所有未来的参考资料也来自 Google 指南）；
4. 创建一个简单的目录结构；
5. 考虑到部分 URL 被删除的可能性。

现在是一些来自 SEO 专家的一般指南：

1. 创建优化的 URL (Understanding SEO Friendly URL Syntax Practices);
2. 静态就是道路与光明 (11 Best Practices for URLs);
3. 尽可能选择描述性 URL (URL Rules to Follow To Create SEO and User Friendly URLs) 等。

我对这个问题的检查：

1. 如果您使用的是静态类型的页面，它的 URL 可能是 www.site.com/contact-us.xhtml，但为什么会有 6 个多余的字符 - www.site.com/contact-us 会更好；
2. 您的 facelet 页面可以位于深度嵌套的内部结构中，例如 /pages/articles/general/how-to-do-jsf.xhtml，但如果需要，最好使用带有路径的 www.site.com/articles/how-to-do-jsf 之类的 URL；
3. 一些开发者倾向于使用 facelets 的短文件名 (jsf-bp.xhtml) 或无意义的文件名 (article23.xhtml)，但最好显示一个 www.site.com/article/jsf-best-practices-for-beginners 的 url；
4. 使用扩展，无论是.xhtml、.jsf 等，都可能导致用户（可能还有搜索引擎）认为内容是动态的（意味着内容是从模板），就像在www.site.com/product.xhtml?id=12345 中一样，但应该首选静态 内容，因为用户（可能还有搜索引擎）会认为这样的URL 描述了一个完全无状态的页面，就像在www.site.com/products/jsf-book-for-advanced-users 中一样。此外，它极大地提高了网站的可用性，这也很重要；
5. 人们倾向于将 ID 用于查询参数 (?id=12345)，将名称用于路径参数 (/jsf-book-for-advanced-users)；
6. URL 重写提供了一种清晰的方式来浏览您的站点。想象一个路径www.site.com/products/jsf-book-for-advanced-users：这种url结构会渲染一个独特的产品页面，去掉/jsf-book-for-advanced-users可能会渲染一个完整的目录。但是，如果您有产品的www.site.com/product.xhtml?name=jsf-book-for-advanced-users 和目录的www.site.com/catalogue.xhtml，会发生什么？用户不清楚逻辑，重写可以结构化您的 URL；
7. 最后，大多数处理 SEO 的网站不使用文件扩展名（并且很少使用查询参数），以及我们所在的网站 stackoverflow.com。

我并不声称我提到的来源是无可争议的，或者非常权威，或者他们的输入需要应用于每个 Web 应用程序等，但我确实相信存在结构良好、用户友好的网站很长一段时间在生产中倾向于遵循这些规则。