posted time Created time: 2015-07-04 posted time Last updated time:

Side Navigation Component for CMS Template

The side navigation component is to show the page structure of the main contents.

Usage and Appearance of the Side Navigation Component

The Side Navigation Component is used in following templates.

  • Default Page
  • Top Page
  • Blog Top Page

This component supports tree structured document in the website.

Side Navigation Component

This component shows the parent and ancestors, and sibling page nodes. When the page node is not leaf node, that means the node has children, then it shows the children.

The page node structure is editable on the content editor of the CMS.

Source code of Side Navigation Component

The source code of the Side Navigation parts consist of Html code, Server side program, and Style Sheet.

When you change the design of this component, please customise the Style Sheet,

Html code

The Html code of this component is below.

The "@list" variable is generated in the server side program. This variable has tree structure.

This program expands the variable tree within 3 levels. The root of this tree is second level, therefore the document structure can have 4 tires document hierarchy.

When you make document website friendly with SEO, the hierarchy of the pages must not be too deep. That is because the search engines do not analyse the deep pages.

Therefore 4 tire is enough depth to make SEO friendly site.

Server side program

The server side program of the Side Navigation component is below.

This program's main goal is to make the "@list" variable.

Get content node data from database

At first, get the content node's information from the database. The "cms_page" table has data of the content of the page. And the "tree_model" table has information about the tree structure.

Get the second path

The tree structure of this component starts with the second tier of the tree node. It does not show the root node. Therefore the node path next under the root path is the entry point of the tree structure's hierarchy.

The "getSecondPagePath()" function returns the root node of the navigation's tree.

Get Root node and document information

By using the root of navigation component, get the root object by querying the database.

Get current directory's path

Get directory's path of current page by the "getCurrentDir()" function.

The current directory means the deepest path which shows the children. If the current page node has the children, then the current node is the directory. Otherwise, the page node is leaf, which does not have chidren, then the parent node is the directory.

Get tree structured page list

Create the "@list" variable by "getSecondPage()" function.

This function returns the variable with tree structure. The function calls "getChildNodes()" function recursively.

Style Sheet

The Style Sheet of the Side Navigation component is below.

The design of default template is implemented by style sheet, without images.

Go to Top