Overview

Skill Level: Any

In addition to customizing the sample OSLO pages, you might want to add new pages either at the top level or child pages to existing Oslo pages. You might also want to remove the OSLO pages that you don’t want for your site. The following tutorial shows you how to add new pages with existing page types and layouts, create additional layouts for existing page types how to remove the OSLO sample pages.

Prerequisites

To get started, you need:

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Create new pages and child pages with existing page types and layouts

    Complete the following steps to add a new top-level page.

    1. In the Watson Content Hub UI, go to Websites>Site manager, click New page.
    2. Select a Page type. For example, select the Standard page and click Next. To understand how the page types are built, see Content model -How the sample site is built.
    3. Provide a Page name, a Page title, a Page description and select a layout.
    4. Click Create. A draft page is created and added to the navigation.
    5. To add content to the page, from site manager for the page that you created click the Page actions menu > Edit content.
    6. Click Find to add content that is already available and published in the WCH.

    Note: You can also create and add new content by clicking Compose and by selecting a content type and adding content to the elements in the content type. For the content to render in the preview, the content type must be mapped to a layout. For more information about layout mapping for the content type, see Adding a layout for an existing content type.

    Complete the following steps to add a child page.

    1. For a top-level page where you want to add the child page, open the Actions menu > Create child page.
    2. Select a Page type. For example, the Standard page type and click Next.
    3. Provide a page name, select a layout, and click Create.
    4. A draft child page is created. Add content and publish the page.

    You can control what pages show in the navigation. You can hide pages from the site navigation but can still access the page in the site. For more information, see Website: Make our sample your own.

    Before you publish the page, you can also set up a review for the page and its content.

    Note: If any of the content that you added is in the draft state, you will be prompted to Publish the content along with page.

     

  2. Remove existing Oslo pages

    To remove the samples Oslo pages that you don’t want, from the WCH UI, for the page you want to remove open the Actions menu > Remove page. The page and its child pages are deleted.

    Note: The remove page option from the actions menu does not remove the Design article pages.

    To remove all the Design article pages, complete the following steps.

    1. Open the Primary navigation menu, and go to Content model > Content types > Dynamic list. Edit the settings for the element Content to include. Clear the Element is required field in the Properties tab.
    2. Go to Content model > Content types > List and edit the settings for the element List items. Clear the Element is required field in the Properties tab.
    3. Go to Content > All content and assets > Selected articles and create a draft and remove all references from the list and publish the changed item.
    4. Now you can remove all the pages from the Oslo sample site from the Site composer.
  3. Change the default Home page

    When you access the sample website, the Home page is opened by default. When you customize the sample site and edit the Home page or delete it, you might not want your site to open to that page by default. You can change the default page by completing the following steps:

    1. Go to your local development environment, open the src/app/app.module.ts in a text editor.
    2. Find the pageRoutes constant.

      For example,


      const pageRoutes: Routes = [
      {path: '', redirectTo: '/home', pathMatch: 'full'},
      {path: '**', component: PageComponent}
      ];

    3. Set the redirectTo value to the new page path value.

      For example, replace home with the new page path value in the example code.

      To find the path value of a page, in Watson Content Hub UI open Site Manager > Page actions menu > Edit page settings.

      Note: You must include the “/” in the value.

     

    Next step – Adding layouts for an existing content type

    Parent topic – Customizing the sample site

Expected outcome

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Join The Discussion

Your email address will not be published. Required fields are marked *