Home / Compile Detail Pages

Compile Detail Pages

Detail Page Compilation

The rendering of detail pages is derived from the URL passed to the page. The format of the URL is:

https://.../<detailPage>/<contentSlug>

When the site is run dynamically, the content slug value is used to query the corresponding content item, which is then rendered on the page using the Content Placeholder component. The content layout map uses the category in the content placeholder component and the content type of the returned content item to find the content layout that should be used to render this content item.

For compiled page delivery, a separate static HTML file is created for each detail page URL. During compilation, the content item that would have been queried from the slug is passed to the detail page component compiler identified by the same content layout map category entry. As with any component, if there's no custom compiler for the corresponding content layout on the detail page, then the detail page won't be created for the detail page URL and the page will render dynamically at runtime.

Detail Page Without Content

The detail page itself, without content, is still compiled, even though there's no content item compiled into it. When the compiled detail page is called with a slug that doesn't have a matching static page, it will leverage what's compiled in the detail page and only render the content layout component dynamically.

When the detail page is compiled, you’ll see the following information message telling you that the placeholder will render dynamically, which can be ignored:

Info: no content item specified for placeholder:de0502ec-fbc5-4324-a17d-af723f5e61 component will render at runtime.

Detail Content Layout Compilers for Detail Pages

The compile.mjs file used to compile the detail page depends on the content layout that's used. Each user-defined asset type can create a set of entries on the Content Layout tab within its definition. These entries map a named category to a specific content layout that knows how to render items of that content type. This mapping identifies the content layout that's used when the content item or digital asset is rendered on a detail page dynamically or when it's compiled. If the content layout that's found does not contain a compile.mjs file, then no detail page is created for that content item and the content item will render dynamically at runtime.

Identify Detail Pages

Typically you'll have a list of content items on a page that displays a summary view for each item. Then, to get more details about a content item (for example, display the whole article), you would allow page visitors to click on an item to drill down to a detail page.

A site can also have multiple detail pages that may render the same content item with different category entries to provide different views of the content item. Therefore, registering a detail page to compile includes information about the ID of the detail page to use and the content that will be compiled into the page.

Since the list of content items that have detail pages is dynamic, you can use the out-of-the-box functionality to automatically generate detail pages for all content items that are encountered during compilation or you can specify which detail pages should be created using SCSCompileAPI.

Default Detail Page Compilation

As each page within the site is compiled, when it encounters a content item, it automatically adds that item to the list of detail pages to be created. The detail page to use for the content item is based on the settings within the component where the user has selected the detail page. If no detail page is defined within the settings of the component, then it chooses the ‘default’ detail page.

The ‘Default’ Detail Page

The ‘default’ detail page is used as a fallback when no detail page is defined within the settings of a component. When there’s no page defined, the site structure is simply searched for the first detail page and that one will be designated as the default. This is the same model as when the site is rendered dynamically.

User-Defined Detail Page Compilation

You can also add to the list of detail pages to be compiled by calling the SCSCompileAPI.compileDetailPage(pageId, content) API. If the ‘pageId’ parameter is undefined, then it will use the default detail page. The ‘content’ parameter is the result of querying the content item and will be passed to the detail page compiler.

Manage Detail Page Compilation

You can prevent the compiler from creating any detail page or creating any detail page that uses the ‘default’ detail page mechanism.

Stop All Detail Page Compilation

Stopping all detail page compilation is useful when developing your component, since you can focus only on a specific page during the edit/test/debug cycle without having detail pages interrupting or slowing it down. This also turns off creation of any detail page requested using the SCSCompileAPI.compileDetailPage(pageId, content) API.

To turn off detail page compilation, use the following Content Toolkit command:

cec compile-template SampleTemplate --noDetailPages

To turn it off completely during site compilation executing from the user interface, use compile_config.json against your site with:

{
options: {
   noDetailPages: true
  }
}

Stop Only ‘Default’ Detail Page Compilation

Instead of turning off all detail page compilation, you can turn off only compilation of detail pages where no specific detail page was defined. This provides more control over which detail page is compiled, since you need either specifically select the detail page in the components settings panel. You can still add to the list of detail pages that’s created using the SCSCompileAPI.compileDetailPage(pageId, content) API. To turn off default detail page compilation, you can use the following Content Toolkit command:

cec compile-template SampleTemplate --noDefaultDetailPageLink

To turn it off during site compilation executing from the UI, use compile_config.json against your site with:

{
options: {
    noDefaultDetailPageLink: true
  }
}