Configure the About Page

Previous Step

Configure the News Detail Page

After updating the templates for the out-of-the-box news feature, you will now create an "About" text document, add a new page to your website, and configure it to display the text document.

Review the Web Design

Open the web design in your browser and navigate to the "About" page. The main content area uses a two-column layout:

• Left column: text content
• Right column: secondary navigation menu

For this step, focus only on the text content in the left column. The right column and its navigation menu are out of scope for now.

Create the Content

The "Simple Content" feature, which you added during project setup, provides a "content document" type. This document type includes fields for title, introduction, content, and publication date. Use this document type to create the content for the About page.

1. Open Bloomreach Content at http://localhost:8080/cms/. Log in with username admin and password admin.
2. On the dashboard, click To the content to open the Content application.
3. Navigate to the "GoGreen" folder.
4. Create a new folder named "About" inside the "GoGreen" folder.
5. Add a new Simple Document in the "About" folder and name it "About". The editor will open the new document.
6. In the Title field, enter "About GoGreen".
7. Enter text in the Introduction and Content fields.

8. Close the document and publish your changes.

Create the Page

Configure a page to render the About document's content.

1. In Bloomreach Content, switch to the Experience manager application.
2. Select the GoGreen channel if it is not already open in preview.
3. Open the Page menu and click New.

4. In the New page dialog, set the Page title to "About". The URL will be generated automatically.
5. Ensure Simple Content Page is selected in the Page template field.

6. Click Create to create the new page.
7. If page components are not visible, click the Show components icon in the top right corner.
8. Click the icon in the top left corner to open the sidebar, then select Components.
9. Select the Simple Content component and click inside the Content Page Main rectangle in the main content area to add the component.

10. In the configuration sidebar on the right, click the looking glass icon in the Document field, browse to the "About" document, and select it.

11. Click Save, then close the configuration dialog.
12. The page now displays the content of the "About" document. The layout does not yet match the web design.
13. Open the Page menu and select Properties.

14. In the Properties of 'about' dialog, select the "About" document in the Primary Document dropdown.

Setting the Primary Document links the page to the document, enabling the delivery tier to resolve internal links to the document.

15. Click Save.
16. Click Channel, then Publish.
17. View the About page by entering its URL in your browser: http://localhost:8080/site/about.

Apply the Web Design to the Simple Content Template

1. Open the about.html file from the web design. This file contains the HTML markup for the About page.
2. Locate the <div class="body-wrapper"> element. This section contains the markup for the text content.
3. Open repository-data/webfiles/src/main/resources/site/freemarker/hstdefault/contentpage-main.ftl in your project. This Freemarker template renders the text content.
4. Apply the HTML markup from about.html to the Freemarker code in contentpage-main.ftl. The resulting template should look similar to the following:

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9 has-edit-button">
          <@hst.manageContent hippobean=document />
          <h2>${document.title?html}</h2>
          <p>${document.introduction?html}</p>
          <@hst.html hippohtml=document.content/>
        </div>
      <#elseif editMode>
        <div class="has-edit-button">
          <img src="<@hst.link path="/images/essentials/catalog-component-icons/simple-content.png" />"> Click to edit Simple Content
          <@hst.manageContent templateQuery="new-content-document" rootPath="content"/>
        </div>
      </#if>
    </div>
  </div>
</div>
copy

5. Reload http://localhost:8080/site/about in your browser. The About page now matches the web design and displays the content from the "About" document.

Next Step

Configure the Navigation Menu

Full Source Code

contentpage-main.ftl

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9 has-edit-button">
          <@hst.manageContent hippobean=document />
          <h2>${document.title?html}</h2>
          <p>${document.introduction?html}</p>
          <@hst.html hippohtml=document.content/>
        </div>
      <#elseif editMode>
        <div class="has-edit-button">
          <img src="<@hst.link path="/images/essentials/catalog-component-icons/simple-content.png" />"> Click to edit Simple Content
          <@hst.manageContent templateQuery="new-content-document" rootPath="content"/>
        </div>
      </#if>
    </div>
  </div>
</div>
copy