Add layouts for new content types
You can create your own page types and content types to create a fully customized website that matches your needs. A page type is a specialized content type. When you create new content types or page types, you must map them to a layout. The following tutorial shows you how to create a content type, map it to a layout, and convert the content type to a page type.
Before you begin
To get started, you need:
- Your Acoustic Content trial or standard edition. Get a free trial version or upgrade to the standard edition from Acoustic Content.
- Install a Node environment with a recent stable version greater than Node >= 8.
- Access to the site application code. To access the code download Acoustic Content Sites single page application. For more information about working with the source files, see wch-site-application/README.md.
- For more information about setting up your development environment, see Setting up your development environment. For more information about developing sites with Content, see Acoustic Content Sites Customization Programming Model.
The layout templates determine how the content is rendered. Content is created from content types, which contain elements such as text, images, files, and video. These elements, reference content that is created and stored in Content. The content types are mapped to layout templates, which reference the elements in the content types by their key. The content is then added to site pages. The layout mapping determines which layouts belong to which content types. It also defines the default layout for the corresponding content type. A content type can be mapped to several layouts.
Website pages in Content are created from page types, which are created and mapped to layout templates similar to the content types. The layout files point to an angular component that determines how the page type renders when added to the site application. A layout can implement a configurable component that can be added to a page just like any content. The elements of the content type are used as the configuration properties. The layout's HTML and JS implement the component functionality.
Create a content type
Create a content type in the Content UI from Developer > Content types. The new content type is automatically saved. For more information about creating content types, see Content types: Define content structure.
Note:
A page type cannot be created from the new content type until it is mapped to a layout.
Create a layout for the new content type
To create a layout and map it to the new content type
- Run the create-layout command from your development environment.
npm run create-layout -- --type <content type name>
Where <content type name>
is the name of the content type that you created in the previous step.
The command pulls all your site content types through wchtools and scans those content types for the name that is specified in the command. If the content type with the specified name is found, the appropriate layout, layout mapping, and angular component files that you can use with the new content type are generated.
2. Modify the files src\app\layouts**
3. Avoid touching the files in src\app\components**
4. Surround the html structure with the ID of the content (for future item highlighting):
<div [id]="renderingContext.id" class="…">…</div>
Where renderingContext
is the object that contains the representation of the content item that is implicitly created by the create-layout command.
5. The result is then passed into a separate generic component, which is listed under the src/app/components/generic directory along with the filters that are specified by the content type.
6. The component in src/app/components/generic iterates through the list of filtered results and displays the content item according to its <wch-contentref>
layout.
Debug the script for errors
When the script finishes, a list of files that were generated along with the path to where they were saved is printed in the console. If you get unexpected results from running the script, add the following extra flag to debug the script: verbose
. Add this flag to enable additional logging information to the console. For example,
npm run create-layout -- --type <content type name> --verbose
Define properties for the layout
The angular component layout files that are generated are saved under src/app/layouts/layout-name. Similarly, the layout file is generated under src/wchLayouts/layouts and the layout mapping file is generated under src/wchLayouts/layout-mappings.
- Data from your content type is accessed through the rendering context.
- Access the elements from the rendering context that are individually bound from the abstract component file in src/app/components/content-type directory. You can define the properties for your layout by referencing these elements.
- If you have a content type with multiple layouts, common variables and functions can be defined in the src/app/components/content-type-name type component file. These properties are inherited by each layout.
- After you define the properties, to use the new layouts and components in your live site:
- Build your project with the
npm run build
command. - Then, deploy the project with the
npm run deploy
command.
- Build your project with the
Note:
You must re-enter your Content password for you to successfully run the commands.
Preview your code changes locally
When you change the SPA code, you can preview the new changes locally before you publish them to your site. After you change your code, run the SPA locally.
- Open src/app/Constants.ts file.
- Add the following lines to the top of the class and provide your domain name and Content ID. You can obtain the domain name and the Content ID from Developer > URL information.
static readonly DOMAIN_NAME = "change.this.to.your.domainname";
static readonly CONTENT_HUB_ID = "change-this-to-the-id-for-tenant-that-you-want-to-test-content-on";
- From your project folder, run:
npm start
. - The site application runs on your localhost at http://localhost:4200/. The changes that you make to the code are automatically updated on the local site.
Publish the code changes to your site
After you verify your changes locally, you must publish these changes to your site.
- Run the following command to build your new site.
npm run build
. - Run the following command to deploy your updated local site to the remote site.
npm run deploy
.
Note:
You must reenter your Content password for you to successfully run the commands.
The new additional layout will now be visible in the Content UI. The content composer can now choose this layout when they create content.
Convert the content type to a page type
A page type is created from a content type. You can create a new page type only from a content type that is mapped to layouts.
Complete the following steps to convert the content type into a page type.
- After the content type is mapped to the layout, from the Content UI, go to Developer > Content types.
- Open the new content type that you created and mapped, from the Details > Advanced tab select the Check this type can be used to create pages field in the content type.
Updating layouts for dynamic list content type
Layouts can be updated and customized for all page types and content types on the website. Updating the layouts for the dynamic lists content types are a little more complex than the average component.
- Like other layout files, the dynamic list layouts extend the src/app/components/type component file. In this file, the queryString for the list is configured with the properties that are specified by the content type.
- In the src/app/layouts/layout-name layout HTML file, the queryString is passed into the query component of the SDK. For example,
wch-contentquery [query]=”queryString” #q
- A list of content items that match the specifications of the queryString is generated.
- The result along with the filters that are specified by the content type is then passed into a separate generic component in the src/app/components/generic directory.
- The component iterates through the filtered results and displays the content item according to its
wch-contentref
layout.
Updated over 1 year ago