Skip to content

Latest commit

 

History

History

page

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

_cq_design_dialog

_cq_design_dialog

 
 

_cq_dialog

_cq_dialog

 
 

clientlibs

clientlibs

 
 

.content.xml

.content.xml

 
 

README.md

README.md

 
 

body.html

body.html

 
 

body.skiptomaincontent.html

body.skiptomaincontent.html

 
 

body.socialmedia_begin.html

body.socialmedia_begin.html

 
 

body.socialmedia_end.html

body.socialmedia_end.html

 
 

customfooterlibs.html

customfooterlibs.html

 
 

customheaderlibs.html

customheaderlibs.html

 
 

footer.html

footer.html

 
 

head.html

head.html

 
 

head.links.html

head.links.html

 
 

head.resources.html

head.resources.html

 
 

head.socialmedia.html

head.socialmedia.html

 
 

headlibs.html

headlibs.html

 
 

page.html

page.html

 
 

redirect.html

redirect.html

 
 

README.md

Page (v2)

Extensible page component written in HTL.

Features

  • Editable templates
  • SEO meta title, tagging and language definition
  • Canonical link, alternate language links and robots tags
  • 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
  • PWA support

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

Loading of Context-Aware CSS/JS

The page component also supports loading developer-defined context-aware CSS, Javascript or meta tags. This is done by creating a context-aware resource for com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig with the following structure:

com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
    - prefixPath="/some/path"
    + item01
        - element=["link"|"script"|"meta"]
        - location=["header"|"footer"]
        + attributes
            - attributeName01="attributeValue01"
            - attributeName02="attributeValue02"
            ...
    + item02
        ...
    ...

These items will be loaded in the header or footer of the page, depending on the configured location. The attribute names should match supported HTML attributes for link, script and meta.

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
  4. ./renderAlternateLanguageLinks - toggles on/off the rendering of links to alternate language versions of the page in its head

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.
  22. ./mainContentSelector - defines the ID of the main content element of the page (used by the "skip to main content" accessibility feature).
  23. ./id - defines the component HTML ID attribute.

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