How to create Prototype Pages in Hippo CMS

Prototype pages

Webmaster didn’t have access to localhost:8080/cms/console. Therefore he can not add new pages to application. To avoid this Hippo CMS provides Prototype page Functionality to webmaster so he can add a page to our application . The Prototype pages are created by admin/SuperUser for the Webmaster.

Steps to create Container in Hippo CMS.

Step 1: Configure the templates

Go to /hst:hst/hst:configurations/myhippoproject/hst:templates and add a node of type hst:template called landingpage-main.

Add the following property:
hst:renderpath = jsp/myhippoproject/landingpage-main.jsp (path to the webfile)

Add the line inside the landingpage-main.jsp file

<%@ taglib prefix=”hst” uri=”http://www.hippoecm.org/jsp/hst/core” %>

<hst:include ref=”container” />

Step 2: Add Prototype Page

a) Go to the node /hst:hst/hst:configurations/myhippoproject/hst:prototypepages and
add a node of type hst:component called landingpage.

b) Enable the mixin type hst:prototypemeta of that node

add the following properties:
hst:displayname = Landing Page
hst:referencecomponent = hst:abstractpages/base

screenshot-from-2017-11-24-13-47-51

after adding this property you can see following property at right side.

screenshot-from-2017-11-24-14-52-26

c) Add a child node to the landingpage node of type hst:component called main.

Add the following property:
hst:template = landingpage-main

d) Select the main node and add a child node of type hst:containercomponent called
container.

screenshot-from-2017-11-24-15-34-09

Add the following property:

hst:xtype = hst.vbox

screenshot-from-2017-11-24-14-59-15

The structure now should look like this:

screenshot-from-2017-11-24-15-34-52

Step 3:

open htttp://localhost:8080/cms and login with editor Credentials.

a) In the Channel manager, edit the channel. Click the ‘Page’ button.

screenshot-from-2017-11-24-15-29-52

and use the “Create page” option to add a new landing page.

screenshot-from-2017-11-24-15-21-10

 

 

b) Give it your own title and decide what the url for the new page will be. Click “Create” when you’re done.

screenshot-from-2017-11-24-15-30-47

c) Verify that the page shows the entered page title. Add at least one component to the container.

d) Publish your changes and checkout the new landing page in the site.

screenshot-from-2017-11-24-15-22-23

Step 4: Output

screenshot-from-2017-11-24-15-52-06

Leave a Reply