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

Anchor Index Component for the CMS Templates

The Anchor index is common component which is used in each article edited with WYSIWYG editor. This component shows index of the headers in the articles.

Appearance of Anchor Component

The Anchor Component is used in each article contents. You can add it with WYSIWYG editor to edit the contents.

On the WYSIWYG Editor

The Anchor Component can be set on the WYSIWYG editor. By adding it with the inner module function of the editor.

Added component is shown like picture below.

Anchor index component on WYSIWYG editor

The component has no attributes for setting. It automatically detects header tags, which are h1, h2, h3, h4 and so on, and create Html code of the index with anchor links.

The component load these header tags with anchor name, the headers without it are not shown on the generated code.

On the web browser

The component is converted into the Html Code after published the page, like following picture.

appearance of the index compponent

By clicking the link of the index, the page scrolls down into the position. This anchor links are effective to SEO. When search engine users query with keywords including the words which are in the index, the result is shown like below on Google.

Link in the search result

The link shown in the search result is useful to the user, because what the user want to know is directly linked. And the description is changed into the text next to the header.

This appearance can make the click through rate on the search result page increases.

Other Components co-working with Anchor Index Component

The Anchor Component works with the Sticky Navigation Component, which shows the index on the side parts when you add the component to the same template.

Stickey navigation

The the Sticky Navigation Component load the inner Html code of the Anchor Index component automatically, and show it on the float div layer on the browser.

Source code of Anchor Component

When you customise the Anchor Component, you have to know the source code. Following codes are available from the Template Component Editor.

Html code

The Html code is below.

The Html code is very simple. The code of index list is generated by the server side program.

Style Sheet

The style sheet of the Anchor Component is below.

The style sheet defines design for generated Html code by the server side program. By changing this code, you can customize the design of index part.

Server Code

The server code to generate index links for named anchor is below.

This source code does following operation.

Get current content from database

Getting the record of current content from the database. The record contains released contents and draft one. And this code is executed on preview and publish.

The "cms_page" is the table name, which stores the content of the page.

Get Anchored header

By inputting Html code edited with WYSIWYG editor into the "HtmlFtech.getAnchors()" function, the program get the list  text marked by header tags and anchor name.

Generate Html code of index

Analysing the list of anchors and generate Html code of the list index. The index uses ol and li tags.

This code generates nested list tags. And the variable, which is "$list", is embedded in the Html code of this template.


Go to Top