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.
The Anchor Component is used in each article contents. You can add it with WYSIWYG editor to edit the contents.
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.
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.
The component is converted into the Html Code after published the page, like following picture.
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.
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.
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.
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.
When you customise the Anchor Component, you have to know the source code. Following codes are available from the Template Component Editor.
The Html code is below.
The Html code is very simple. The code of index list is generated by the server side program.
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.
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.