Navigation

imperia allows simple navigation, but also Site Maps or Breadcrumbs.

The generation of the navigation in imperia is based on a live system with “virtual includes” in the web server; thereby, the navigation is shifted in its own configuration files. By means of template like possibilities, the navigation can be used for different requirements.

---

Configuration

The navigation is controlled by a configuration file. The example config/navigation_generator.conf.sample can be used as a basis. This file should be renamed then(e.g. config/navigation_generator.conf).

Under the main node <root>, the general configuration item <common> must be available in the configuration. After this point, you can set the controls on how files are called and how they are transferred to a live system.

The name of the generated files is controlled by the following:

filename = "/ssi/nav/intra/<!--nav_element-->/<!--node_id-->/<!--lingua-->.ssi"

The available values are:

• <!--directory-->,
• <!--node_id-->,
• <!--cat_id-->,
• <!--lingua-->
• and <!--nav_element-->.

In addition to creating the navigation elements, an XML file for the importer is written in which all newly created files are listed in the form of IBlocks.

A NodeID is given to a category, through transfer_cat_id, which lies on a non-interactive workflow. The category's template consists of one entry.

<!--IMPERIABLOCK-->
<!--
<IMG SRC="<!--XX-IBLOCK-file-->" />
-->
<!--/IMPERIABLOCK-->

It is important to note that the commented-out section ensures that files specified in IBlock are not displayed, but are transferred.

In addition to the general block (common) any number of navigation elements can be produced. Typically, a horizontal navigation (here, h_nav), a vertical navigation (here, v_nav) and a site map (here, sitemap). The names of navigation elements are freely chosen as long as they do not violate the XML naming convention.

An example for a horizontal navigation:

        (Code wrapped for display purposes!)

<h_nav>
 file_startlevel = "0"
 file_maxlevel = "5"
 content_startlevel = "0"
 content_maxlevel = "7"

 li_snippet <<EOF
    #IF ("<!--XX-current-->")
        <strong><!--XX-name--></strong>
    #ELSIF ("<!--XX-active-->")
        <a href="<!--XX-link-->" title="<!--XX-description-->">
                 <!--XX-name--></a> - <!--XX-ul_content-->
    #ENDIF
EOF

 ul_snippet <<EOF
  <!--XX-li_content-->
EOF

</h_nav>

• file_startlevel and file_maxlevel control on which levels files will be generated. In the example above files can be generated only to level 5.

• The variables content_startlevel and content_maxlevel control which levels of a category tree should be displayed within files.

• The ul_snippet and li_snippet variables control how each entry in the category will be structured. This means that for a tree display, these variables are created for each element and are locked within each other via the <!--XX-li_content--> and <!--XX-ul_content--> variables.
  The following variables are available:

  Variable	Description
  <!--XX-name-->	Category's name (language dependent)
  <!--XX-description-->	Category's description (language dependent)
  <!--XX-directory-->	Directory
  <!--XX-filename-->	File name
  <!--XX-link-->	A special link (__ip_link)
  <!--XX-linktarget-->	Link target
  <!--XX-level-->	Level
  <!--XX-levelindex-->	Level index
  <!--XX-current-->	Current menu item (Bool)
  <!--XX-active-->	Active menu item (Bool)
  <!--catid-->	Category ID
  <!--nodeid-->	the nodeid
  <!--has_children-->	true if there are subentries

For more information on this topic, see also next section.

__

Creating Navigation Files

The navigation generation is initiated via a menu item in the administrative menu. All navigation elements can be produced with this menu item.

This menu item is entered in the menu configuration by a “Link”, e.g.:

NEWWIN:/cgi-bin/site_navgen.pl?
    conf=/config/navigation_generator.conf&
    rootNodeId=/13

• This script generates code snippets that are included in the HTML pages. For each level of navigation, a code snippet is generated. The names of the created SSI files are defined in the configuration file.

• conf=/config/navigation_generator.conf describes the file that will be used to create the navigation.

• rootNodeId=/13 describes the NodeID at which to start the navigation generation, see also section Configuration.

When creating multilingual navigation, the metavariables need to be set in the categories' properties.
For each language a SSI is generated, which then has to be set in the template accordingly (via lingua).

Process description

1. The navigation generation is performed by authorized imperia users. The entire navigation is first created on the development system.
2. After a navigation is generated, the include files only exist on the develop system.
3. To transfer them to the live server an imperia document is imported. The necessary data is created by the script and written in the form of an XML file in the import directory (/site/import).
4. The XML document is imported in imperia as a new document in a category provided for this purpose. Whether the navigation files are unlocked directly on a live server (auto publish) or are unlocked only after an approval step (approval), can be controlled via the category's workflow.

---

In the following we show you some exmaple codes for generating different kinds of navigation:

Note

In the loop, for e.g. li (e.g. "li_snippet <<EOF") or ul, you can also refere to page variablkes - as in a template too - e.g. <!--XX-PAGEVARIABEL-->.

Generating simple navigation

Vertical

A simple, vertical (⬇) navigation can be generated using following code (from navigation_generator.conf.sample):

<vnav>
    file_startlevel = "0"
    file_maxlevel = "10"

    content_maxlevel = "10"

    li_snippet <<EOF
        <li class="vnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="vnav">
           <!--XX-li_content-->
        </ul>
    EOF

    </vnav>

Horizontal A simple, horizontal (⬇) navigation can be generated using following code (from navigation_generator.conf.sample):

<hnav>
    file_startlevel = "0"
    file_maxlevel = "0"
    content_maxlevel = "1"

    li_snippet <<EOF
        <li class="hnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="hnav">
           <!--XX-li_content-->
        </ul>
    EOF

    </hnav>

Horizontal with Drop-Down

<navigationmenu>
    file_startlevel = "0"
    file_maxlevel = "3"
    content_startlevel ="1"
    content_maxlevel = "2"
        fulltree = "1"

    ul_snippet <<EOF
    #IF ("<!--XX-level-->" EQ "0")
            <ul class="nav navbar-nav uppercase topnavigation">
            <!--XX-li_content-->
        </ul>
    #ELSIF ("<!--XX-level-->" EQ "1")
    <a href="#" class="dropdown-toggle customCollapseCaret" data-toggle="dropdown" role="button" >
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
        <!--XX-li_content-->
    </ul>
    #ELSIF ("<!--XX-level-->" EQ "2")
    <ul class="dropdown-menu" role="menu">
        <!--XX-li_content-->
    </ul>
    #ENDIF
    EOF


    li_snippet <<EOF
    #IF ("<!--XX-level-->" EQ "1")
    <li class="dropdown"> 
        <a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
<!--XX-ul_content-->
    </li>
    #ELSIF ("<!--XX-level-->" EQ "2")
        <li class="dropdown"> 
        <a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
        </li>
    #ENDIF
    EOF



    </navigationmenu>

Generating Bread crumbs

A bread crumb navigation cann be generated using following code:

<breadcrumb>
    file_startlevel = "0"
    file_maxlevel = "10"
    content_startlevel = "0"
    content_maxlevel = "10"
    fulltree = "1"

    li_snippet <<EOF

    #IF ("<!--XX-current-->")
        #IF ("<!--XX-level-->" EQ "4")
            #ELSE
                    <li><a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->" class="active"><!--XX-name--></a></li>
        #ENDIF
    #ELSIF ("<!--XX-current_nodeid-->" REQ "<!--XX-nodeid-->")
            <li><a href="/<!--XX-project_lang--><!--XX-directory-->" title="<!--XX-description-->"><!--XX-name--></a></li>
        #IF ("<!--XX-has_children-->")
            <span class="hasChildren">/</span>
        #ENDIF
    #ENDIF

    <!--XX-ul_content-->

       EOF

       ul_snippet <<EOF
        <!--XX-li_content-->
       EOF
</breadcrumb>

Generating Site Map

A Site Menu navigation can be generated using following code (from navigation_generator.conf.sample):

<sitemap>
    file_startlevel = "0"
    file_maxlevel = "0"

    content_maxlevel = "1"

    # include all category entries
    fulltree = 1

    li_snippet <<EOF
        <li class="hnav">
            <a href="<!--XX-link-->" title="<!--XX-description-->" target="<!--XX-linktarget-->"><!--XX-name--></a>
            <!--XX-ul_content-->
        </li>
    EOF

    ul_snippet <<EOF
        <ul class="hnav">
           <!--XX-li_content-->
        </ul>
    EOF

    </sitemap>