View Exmaple Website and CMS demo
After installed CMS, let's explorer the demo website which is initially installed. You can understand what this CMS can do by viewing them.
- Default Web page
- Administration Console
- Content Management
- Keyword Tags
- Template Management
After installed Content Management System, default demo website is in the database. You can explorer the web by accessing following url.
- http://[your domain]/
This demo site is created with responsive web design. Therefore by narrowing the web browser's width, you can watch the view of smartphone and mobile.
By accessing following url, login form of the administration console appears.
- http://[your domain]/admin/
Then in put "admin" into both id and password, then the top page of administration console appears.
From this top page of the administration console, you can access various function to manage CMS.
In order to manage contents on the website, click "Articles and Pages" button on the administration top page.
Then following page appears.
By using this page, you can manage and write page contents.
In order to edit the article, you have to select article to edit, and open it with WYSIWYG editor. The left page is structured document tree. Then select any page to edit by double click.
Then following WYSIWYG editor is shown on the right pane.
By using this editor, you can edit the contents of the page.
Embedded parts on WYSIWYG editor
On the editor, embedded part is available. Following part is an example of embedded part for anchor index.
This parts is to generate index of the page's header automatically. After publishing this page into html, and view it on the browser, following html part appears.
For more example, partial sitemap is very useful embedded component on WYSIWYG editor.
It shows list of specified url's page hierarchy.
By setting root url for the list, and depth of the children, it generates url list automatically.
The WYSIWYG editor has Source Code mode. By clicking icon on the menu of the editor, following view appears.
On this editor, by clicking "Format Html" button, the editor automatically format html code. And after edit it, click the "Apply to Editor" button. Then the edited code is applied to the design.
This function is used when you add structured data and scheme into the html code.
The page editor has section to set the detail attribute about the page. By pushing the Detail button, the pane is shown above the WYSIWYG editor.
On this page you can do following operations.
- Set title, subtitle, short title, and description
- Select template for this page
- If necessary, set smartphone page's setting and template
- Set created, updated time
- Set page type
About more detail, please take a look at Write Page Contents on CMS.
By clicking the "Additional Code" tab on the WYSIWYG editor, following pane appears.
On this pane's input, you can write meta tags which are located in the header section of the generated Html.
This function is used for following aim.
- Set canonical attribute to this page
- Set robot metatag to this page
- Overwrite SNS meta tag like twitter card and open graphic
If there is meta tag with same name in the page template, the template engine automatically detect that, and replace it into this setting.
Click the "Tags" tab on the editor, following pane appears.
On this pane, you can edit the keyword group tags managed in tag section.
A page has multiple keyword tags and the weight. These tags are used on generating recommend links. By using them, you can generate effective internal links automatically.
The keyword tag groups are managed as a tree of tags.
By using this tags, we can arrange articles on the website efficiently, and build effective internal links naturally.
The recommended links are generated by Keyword Tags Group function.
This links are point to the header section which has anchor name. Therefore you can set internal links suitable for the topics of the page.
The bread list is effective web parts to show the page hierarchy of the website.
The bread list of the blog articles are calculated from the Keyword Tag Group.
This CMS has Component based template engine. You can create a Html5 based component, and arrange them on the GUI editor.
The Content Management System's template engine has GUI editor. You can edit the layout of the template with it.
There are two types of template editors which are graphically manipulate the template layout.
The Top Templates are top level layer of the template. The content page can specify them as the template of the page.
In order to actually view the editor page, click the "Top Templates" on the top of administration console.
About more detail, please take a look at Edit Layout of the Template.
The container template is used to implement 2 column layout. By adding Style Sheet section for mobile device, you can make web templates for responsive web design.
The default templates are adopted the responsive web design. Therefore by learning the default setting as example, you can freely create templates with responsive web design.
In order to actually view the editor page of it, click the "Container Templates" on the top of administration console.
About more detail, please take a look at Container Template's Design.
By using this editor, you can customize and create template components.
If you want to customize the design, edit Html and Style Sheet. And want to customize the program, edit the program and debug it by the web based debugger.
This Content Management System has enough functions to customize the design and server program on the web browser.
More about it, please take a look at Customize Html5 Components.