Skip to content

README.md

Page (v2)

Extensible page component written in HTL.

Features

  • Editable templates
  • SEO meta title, tagging and language definition
  • Page title, subtitle, description and thumbnail
  • Navigation title, or hide from navigation
  • Vanity URL, page alias and redirection
  • On/Off time and launches
  • Blueprints and live copy
  • Closed user groups and permissions
  • Cloud services

Loading of CSS/JS

The page component automatically loads certain client libraries in the head section and at the end of the body section

Client Library Category or Path Condition Type Head or Body
cq.pagetypes.html5page,cq.authoring.page,cq.wcm.foundation-main,cq.shared only for WCMMode!=Disabled JS and CSS Head
libsScript from all referenced cloud service configurations, by default headlibs.jsp only in case there is a lib script found for the referenced cloud service config anything Head
<clientlibsJsHead> being set in component policy only if <clientlibsJsHead> is set JS Head
<clientlibs> being set in component policy only if <clientlibs> is set CSS Head
<designpath>.css only if design is set for current page CSS Head
<clientlibs> being set in component policy only if <clientlibs> is set. Categories duplicated in <clientlibsJsHead> are only loaded in the page head. JS Body

Use Object

The Page component uses the following use objects:

  • com.adobe.cq.wcm.core.components.models.Page
  • com.adobe.cq.wcm.core.components.models.SocialMediaHelper
  • com.day.cq.wcm.foundation.TemplatedContainer

Component Policy Configuration Properties

The following configuration properties are used:

  1. ./clientlibs - allows definition of a list of client libraries to be loaded by the pages associated with this policy configuration
  2. ./clientlibsJsHead - allows definition of client libraries for which JavaScript is specifically intended to be loaded in the document head (JavaScript only) of pages associated with this policy configuration
  3. ./appResourcesClientlib - allows definition of the client library that is used to serve web resources such as favicons

Edit Dialog Properties

The following properties are written to JCR for this Page component and are expected to be available as Resource properties:

  1. ./jcr:title - defines the page title, used for the page SEO meta title and on-page title (unless an overriding ./pageTitle is defined).
  2. pageName - defines the page name.
  3. ./cq:tags - defines the page SEO meta tags.
  4. ./hideInNav - if true, the page will be hidden in a navigation context (breadcrumb, navigation etc.).
  5. ./pageTitle - defines an alternative page title. Used for overriding the ./jcr:title in an on-page context.
  6. ./navTitle - defines the page navigation title. Overrides other page titles, when the page is displayed in a navigation context (breadcrumb, navigation etc.).
  7. ./subtitle - defines the page subtitle.
  8. ./jcr:description - defines the page description.
  9. ./onTime - defines when the page should become available.
  10. ./offTime - defines when the page should no longer be available.
  11. ./sling:vanityPath - defines a vanity URL at which the page could be accessed.
  12. ./sling:redirect - if true, the page will redirect to its defined vanity URL.
  13. ./jcr:language - defines the language set for this page, to help with i18n.
  14. ./cq:designPath - defines where the design for the page is stored.
  15. ./sling:alias - defines a Sling alias for the page, so that it can be accessed at a different resource path.
  16. ./cq:allowedTemplates - defines a template or a list of templates that the page should use.
  17. ./cq:exportTemplate - defines the template used for exporting the page for content synchronisation.
  18. ./socialMedia - defines the enabled social media configurations.
  19. ./variantPath - allows defining the social media variation experience fragment to be used for generating page metadata for social media
  20. ./cq:contextHubPath - defines the Context Path configuration used by this page.
  21. ./cq:contextHubSegmentsPath - defines the Context Path Segments Path.

Web Resources Client Library

A web resources client library can be defined at the template level (see ./appResourcesClientlib component policy configuration). This client library has to provide the following structure:

{
  "<client library folder>": {
    "jcr:primaryType": "cq:ClientLibraryFolder",
    "allowProxy": true,
    "categories": [
      "<category name>"
    ],
    "css.txt": {"jcr:primaryType": "nt:file"},
    "resources": {
      "jcr:primaryType": "nt:folder"
      }
  }
}

The following files are expected in the resources folder, for maximum compatibility:

Filename Browser Size
apple-touch-icon-180x180.png Safari on iPhone 180px x 180px
apple-touch-icon-167x167.png Safari on iPad Pro 167px x 167px
apple-touch-icon-152x152.png Safari on iPad, iPad Mini 152px x 152px
apple-touch-icon-120x120.png Safari on iPhone 120px x 120px
icon-192x192.png Chrome, Opera 192px x 192px
icon-310x310.png Internet Explorer, Edge and Windows Phone 310px x 310px
icon-310x150.png Internet Explorer, Edge and Windows Phone 310px x 150px
icon-150x150.png Internet Explorer, Edge and Windows Phone 150px x 150px
icon-70x70.png Internet Explorer, Edge and Windows Phone 70px x 70px

Client Libraries

The component provides a core.wcm.components.page.v2.sharing client library category that contains the JavaScript required to enable social sharing. It should be added to a relevant site client library using the embed property.

It also provides a core.wcm.components.page.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

Information

You can’t perform that action at this time.