CMS template for long pages in documentation site
When you write website about learning contents, each page become longer than general website. Then you have to contrive to make the page useful.
This Content Management System has useful template parts for documentation sites.
There are following websites for which long pages are necessary.
- e-learning sites
- "How to" sites
- SEO friendly answer contents sites.
Writing long page is effective for SEO, that is because the possibility that the page has many information about the demand of search engine users.
Links are useful to show another pages which are demanded contents for readers, but essential information had better be included in a single page.
Then following function are required.
At first, when reader access the site, if following index appears, they can understand the abstract of the page.
When the page is long, readers want to know what is written in this page.
This index has anchors so that reader can go to the section by clicking one of them.
When you write documentation page, you'll write abstract, preconditions, target users, and so on. But some of the readers want to read the solution and conclusion soon.
Then this anchors for page sections is useful.
Including those section in a page is friendly with SEO. That is because these section contains keywords about the questions which the page can answer.
By telling these information, search engines can find suitable keywords for this contents.
The readers who read long content want to do following actions.
- Get back last section and read it again
- Skip next section
- Watch the index again
- Check and recognize where is current section
Then the index navigator on the right side is useful.
This navigation parts stays on the left, and it shows where is the current section by bold font.
By clicking the anchor link on it, the page scrolls into the section.
The default template of this Content Management System has parts of page functions mentioned above.
And default templates has these template parts in them. In this section I'll mention the implementation of them.
In order to Implement those functions, we have to use following 2 components.
- Sticky Navigation
- Anchor Index
The two components incorporates and the functions are realised. If one of the component is not there in a page. The navigation is ignored.
And the side navigation is available on web browser of desktop pc. On smartphone, it is ignored.
Anchor Index is inline module, which is available on the WYSIWYG editor.
When you write the document, you can add the component in the page contents.
By adding this component on the top of page, the index part is automatically generated by parsing the Html you wrote.
In order to add index, you have to set anchor names to the h1 to h4 formatted text on writing contents. If the name is not set, the part is ignored. It generate index of header tag sections with anchor name.
In order to set anchor, select the text on WYSIWYG editor by dragging mouse pointer.
After that, click icon on the top of WYSIWYG editor, then following pane appears under the icon.
The default text was set when it appears, and if it is OK, click the "Submit Query" button. Then the anchor is created.
When the anchor is set on the text, the icon is shown on the text like below.
The Sticky Navigation is a parts which is on the right side. It is in the template part.
In order to check the components. You have to open the Container Template with GUI Editor. Then following pane appears.
On the right column, at the last row Sticky Navi is there. By locating this component on the template, and if there is Anchor Index component in the content, it is enables.
This navigation part appears when reader scrolls down the page, and it go down under the navigation's location.
When the page is scrolled automatically, it is sometimes confusing. Therefore by using smooth crawl, reader can recognize how the page scroll position is moving.
The default template has this code, therefore, if you do not like this, or want to remove it, please edit there.