Bread Crumb component for CMS Template
The bread list is one of the most important widget on creating website. It is effective to make effective internal links. In addition to that, by adding structured data into the Html code, we can check if the page is analysed or not.
The Bread List is important component to build internal links to show the page structure in the website.
It is shown on the top of page after the header part.
The default setting do not contains the last title of the page, which is current page. When you customise the design, you can add it.
This Bread List component is for main contents and other pages. Following pages use this bread list component.
- Default Page
- Top Page
- Search Page
- Blog Top Page
- Blog Category Page
The Blog Article page do not use this bread list, because there is another bread list component, which is for Blog Articles.
The Blog Article page's bread list is calculated from the Keyword Tag setting.
The Bread Crumb component consists of Html code, Server side program, and Style Sheet.
The Html code of the Bread Crumb is below.
This Html code is to generate html from the "@list" variable. The variable is generated by the server side program.
This Html code contains structured data, which is the "Breadcrumb". You can confirm the data is detected by the Search Console of the Google.
The program code of the Bread Crumb is below.
This program does following operations.
Get current position from database
At first, query the database table, which is the "tree_model", and get current path of the page.
This operation is to avoid error, and in normal case, error does not exists. If the tree model of current page does not exists, it ends the operation.
Get Bread List variables
The "getBreadList()" function is to create the bread list variable, which is array of pages. This is the main operation of this component.
This function uses the "getPage()" function. It calculates the parent and ancestor pages to make list of these pages, and return it.
After that, the "getBreadList()" function create the "@bread" variable and return it. it is used in the Html generation.
The Style Sheet of the Bread Crumb is below.
The Style Sheet uses icon image. The image resource is below.
This image is included in the default template. When you customize the design of the Bread List, delete these image, and add your favorite image to use in the Style Sheet.