Navigation options for static pages | HCL Digital Experience
You can provide navigation for your static pages by using either the portal theme or by making use of the navigation microformat.
Portal theme to provide navigation
To provide navigation for static pages by using the portal theme, remove the <html>
and <head>
tags from
your static page content. If you do that, the portal renders the content as navigation.
Navigation microformat to provide navigation
<html>
tags in your portal, you might want to include links to other pages in
the portal. In this case you write your HTML code so that it includes a navigation portlet
in the page and makes use of the navigation microformat. Refer to the following list of
class attributes and the example of the microformat navigation option. - This attribute denotes the first child in a list. This is required for CSS styling.
- This attribute denotes the last child in a list. This is required for CSS styling.
- This attribute denotes an expanded node. A node can only be expanded if it has children and its navigational state is set to expanded.
- This attribute denotes a collapsed node. A node can only be collapsed if it has children and its navigational state is set to collapsed.
- This attribute lists the actions that are available on the page. Typically, this list contains the actions used to expand or collapse the navigation nodes. For a page that is currently selected in the navigation, this list also contains the actions that are available for that page.
- This attribute denotes the page that is currently selected in the navigation.
- This attribute expands a collapsed node.
- This attribute collapses an expanded node.
Example of the microformat navigation option
<div class="xoxo portal-navigation">
<ul>
<li class="first expanded">
<a href='/wps/myportal/!ut/p/c5/ . . . . . '>Home</a>
<ul>
<li class="first">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Web 2.0 Introduction</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/e/'>Web 2.0 Portlets</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/e/'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Static Page Aggregation</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Navigation Page</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Nav1</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>IBM</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>dnd</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>derivable</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>deriv1</a>
</li>
<li class="selected last">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Container Test</a>
</li>
</ul>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Administration</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor CA</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Domino Integration</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Templates</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Site
Map</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>About</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Login</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Edit My Profile</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Customizer</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Properties</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template Parameters</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Properties</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Layout</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Roles</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Membership</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Policy Status</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Organize Favorites</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Search Seedlist</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>People Palette</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Content Palette</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Quick Links</a>
</li>
<li class="collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Theme
Links</a>
</li>
<li>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Open Tasks</a>
</li>
<li class="last collapsed">
<ul class="xoxo page-actions">
<li class="pageoperation-expand">
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
</li>
</ul>
<a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Root</a>
</li>
</ul>
</div>
Inline navigation
The inline navigation feature can be enabled by setting the page metadata spa.ex.anchor.enabled totrue
. The default is false
. With
this feature, the markup of the static page can contain <a>
links that point to different portal pages that use relative URLs. The href attribute is rewritten at rendering time and replaced by the
portal URL that points to this page. The relative URLs in the source markup use the friendly
path of the current page as the base URL. The relative reference is applied to this base URL
and the resulting friendly path is used to address the target page. This feature works only if
both the current page and the targeted page have a friendly path. For example, if the
current page has the friendly path /home/mypage and contains the
following markup; <a href="child">child_page</a>
, then
this markup is rewritten to a portal URL that points to the page with the friendly name
/home/mypage/child.
- If the href attribute of an anchor link contains an absolute URL, no rewriting occurs and the link continues to point to the absolute URL.
- If the href attribute of an anchor link contains a URL that starts with /, then the rewriting logic resolves the URL as a friendly path. If no page for this path exists, the system assumes a link to another application on the same server and leaves the value of the href attribute untouched.
- If the href attribute of an anchor link starts with ?, then the remainder is considered query parameters and no rewriting occurs.