posted time Created time: 2015-05-13 posted time Last updated time:

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.

Documentation site has long pages

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.

Show the summary of the page

At first, when reader access the site, if following index appears, they can understand the abstract of the page.

Index 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.

Jump to any page section from anywhere

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.

Sticky index navigation

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.

Usage of CMS template parts

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.

CMS Template Components to use

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 component

Anchor Index is inline module, which is available on the WYSIWYG editor.

Anchor index in 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.

Dragging text on the header tag

After that, click Anchor icon on the top of WYSIWYG editor, then following pane appears under the icon.

set up anchor's name

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.

Text with anchor

Sticky Anchor Component

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.

Container Template's Editor

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.

Smooth scrolling

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.

In order to do that, add Javascript to make automatic scrolling smooth in the Javascript section of the Top Template.

The default template has this code, therefore, if you do not like this, or want to remove it, please edit there.

Go to Top