Goals

  • Be able to include resources dynamically
  • Be able to try out and observe infinitive browser caching
  • Be able to switch between two themes

Results

  • Web resources dynamically included from training-theme
  • Visually observe impact of using different themes

Tasks / Procedure

Create 'htmlHeaderArea' Area

  1. Create htmlHeaderArea area.

    1. Add the htmlHeader configuration in the prototype definition by adding this code:

        htmlHeader:
    type: noComponent
    createAreaNode: false
    templateScript: /training-templating-website/templates/pages/areas/htmlHeaderArea.ftl
    2. Save to apply the changes.

  2. Create htmlHeaderArea script.

    1. Create htmlHeaderArea.ftl in the areas folder.

    2. Add the following code at the top:

      [#-- Get the site definition --]
[#assign site = sitefn.site()!]
[#-- Get the theme configuration defined for this site --]
[#assign theme = sitefn.theme(site)!]
Site Definition Name: ${site.name!}</br>
Theme Configuration Name: ${theme.name!}</br>
    3. Save to apply the changes.

  3. Render htmlHeaderArea.

    1. Within the <head> tag just after the page initialization in defaultPageScript, trigger the rendering of htmlHeaderArea.

      <head>
    [@cms.page /]
    [@cms.area name="htmlHeader"/]
    2. Save the file.

  4. Test your work.

    1. Working back in your Author Instance and in preview mode, once again open the page source of training.

    2. You should find the text highlighted in red:

  5. Modify htmlHeaderArea.

    1. Edit htmlHeaderArea.ftl and remove the lines below. Leave the rest as we'll need them.

      Site Definition Name: ${site.name!}</br>
Theme Configuration Name: ${theme.name!}</br>
    2. Continue to the next step.

Use Theme to Dynamically Include CSS Resources

  1. Use theme configuration to dynamically include all CSS files in htmlHeader area.

    1. Add all this code just below the "[#assign theme = sitefn.theme(site)!]".

      <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="${content.description!content.abstract!}">
<meta name="keywords" content="${content.keywords!}">
<meta name="author" content="">

[#-- Access from the page's content: The page's 'title' OR if non-existing, the page's node name. --]
<title>${content.title!content.@name}</title>

[#-- Using a 'theme' for even more dynamic functinality as infinitive cache-able resources. --]
[#list theme.cssFiles as cssFile]
    <link rel="stylesheet" href="${cssFile.link}" media="${cssFile.media}" />
[/#list]

    2. But focus on this one:

      [#list theme.cssFiles as cssFile]
    <link rel="stylesheet" href="${cssFile.link}" media="${cssFile.media}" />
[/#list]

    3. Try to understand how it accesses the media and link value on each cssFile within the loop.

      HINT: We'll use a theme for an even more dynamic functionality such as infinitive cache-able resources.

    4. Save the file.

  2. Un-comment CSS and JS in training-theme.

    1. Work on the training-theme.

      /training-templating-website/themes/training-theme.yaml

    2. Un-comment all of the commented out lines.

      HINT: In Atom it's Edit > Toggle Comments.

      cssFiles:
  bootstrap:
    media: screen
    addFingerPrint: false
    link: /.resources/training-templating-website/webresources/bootstrap.css

jsFiles:
  jquery.min.js:
    addFingerPrint: false
    link: /.resources/training-templating-website/webresources/jquery.min.js
  bootstrap.min.js:
    addFingerPrint: false
    link: /.resources/training-templating-website/webresources/bootstrap.min.js

imaging:
  class: info.magnolia.templating.imaging.VariationAwareImagingSupport
  variations:
    large:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 1600
    medium:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 800
    small:
      class: info.magnolia.templating.imaging.variation.SimpleResizeVariation
      width: 300
    3. Press save.

Infinitive Caching

  1. Try out infinitive browser caching.

    1. Check out the page source of your training page.

    2. Have a look at the rendered link of the Bootstrap CSS:

      <link rel="stylesheet" href="/training-developer-webapp/training/.resources/training-templating-website/webresources/bootstrap.css" media="screen" />

    3. Now edit your training-theme.

    4. Configure Bootstrap CSS to use finger print by setting its boolean value accordingly.

      cssFiles:
  bootstrap:
    media: screen
    addFingerPrint: true
    link: /.resources/training-templating-website/webresources/bootstrap.css
    5. Save the file.

    6. Once again, check the page source of your training page and observe the newly created URL:

      <link rel="stylesheet" href="/training-developer-webapp/training/.resources/training-templating-website/webresources/bootstrap~2017-04-12-09-19-12-000~cache.css" media="screen" />

    7. Realize that the system added a time stamp into the link of the modification date of the file:

      <link rel="stylesheet" href="/training-developer-webapp/training/.resources/training-templating-website/webresources/bootstrap~2017-04-12-09-19-12-000~cache.css" media="screen" />

      If the file changes, the link changes → new cache item → infinitive cache-able.


« Exercise - Create Theme   App Themes »

  • No labels