Skip to content

callToAction

Jump to bottom
Reuben L. Lillie edited this page Jul 22, 2019 · 3 revisions

Summary

Include the callToAction() shortcode to display a call-to-action link in a layout.

By default, this link and it’s text are defined in src/data/site.json. If you want to use a different call to action on a specific page, then you can include it in the front matter or a template/directory data file.

Code resides in shortcodes/call-to-action.js where there is more technical inline documentation.

Use

Call this.callToAction() wherever you can a string.

Make sure to pass the data object as a parameter.

// layout.11ty.js
module.exports = function (data) {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        …
      </head>
      <body>
        ${this.callToAction(data)}
      </body>
  </html>
  `
}

If you want to use a different call to action link or text than those defined in src/data/site.json, then you also need to include a callToAction object in your page front matter or in a template/directory data file.

Front matter example (using YAML syntax)

# index.md
---
callToAction:
  link: /landing-page/
  text: Do something incredibly inviting
---

Directory data file example (using JSON syntax)

{
  "callToAction": {
    "link": "/landing-page/",
    "text": "Do something incredibly inviting"
  }
}

Copyright © 2019 by Pittsburgh District Church of the Nazarene

  1. Welcome
  2. Setup
  3. Coding Standards
    • HTML (in /pghnaz.org/wiki)
    • CSS (in /pghnaz.org/wiki)
    • JavaScript (in /pghnaz.org/wiki)
  4. Color Scheme
  5. Style Guide
  6. Layouts
    • 404.11ty.js
    • base.11ty.js
    • calendar.11ty.js
    • contact.11ty.js
    • content.11ty.js
    • collection.11ty.js
    • eventList.11ty.js
    • map.11ty.js
    • search.11ty.js
  7. Filters
  8. Shortcodes
  9. Client-Side JavaScript
    • search.js
  10. Other static assets
    • Badges
    • Branding
    • Fonts
Clone this wiki locally