Configuring your new Eleventy site

Eleventy provides you with simple but efficient configuration options.

Data everywhere

Eleventy provides a wide range of settings for data used in building stage or inside content: global data as well as template and directory data.

11tyTips uses only global data contained in JavaScript files located inside the data directory.

11tyTips/source/matter/assets/scripts/js/lib/U_o.js
Prism

const A_o = require( './A_o.js' )

const U_o =
{
  dev_b: true,     //: development/production switch
  //dev_b: false,
  url_s: null,

  DEV_s: A_o.LOCAL_s,
  PRO_s: A_o.URL_s,

  GIT_s: `https://github.com/${A_o.AUTHOR_s}/${A_o.ID_s}/`,
  TWI_s: `https://twitter.com/${A_o.ID_s}/`,
  RSS_s: `${A_o.URL_s}feed.xml`,
  SERVICE_PATH_s: 'assets/scripts/js/service_worker.min.js',

  HOME_s:    `[Home page]: ${A_o.URL_s}`,
  NODE_s :   `[Node.js]: https://nodejs.org`,
  COMMENT_s: `[utteranc.es]: https://github.com/utterance/utterances`,

  FRAME_s:     '11ty Frame',
  FRAME_URL_s: `https://11tyframe.netlify.com/`,

  ELEVENTY_s:     `[Eleventy]: https://11ty.io`,
  ELEVENTY_JFM_s: `/docs/data-frontmatter/#javascript-front-matter`,
  ELEVENTY_UDF_s: `/docs/data-frontmatter/#user-defined-front-matter-customizations`,

  OUTLINK_s: '{target="_blank" rel="noreferrer noopener"}',

}
void function () { U_o.url_s = U_o[U_o.dev_b === true ? 'DEV_s' : 'PRO_s'] } ()
console.log( `Site URL: ${U_o.url_s}` )

module.exports = U_o

The gobal data files can contain not only constants as in the preceding listing of the U_o.js file but also functions as in the following D_o.js file which means that all the power of Node.js is at hand.

11tyTips/source/make/lib/data.js
Prism

const EXPORT_a =    // default exported data
[
  'date',
  'layout',
  'permalink',
  'tags',
  'rank_n',
  'title_s',
  'subtitle_s',
  'abstract_s',
  'author_s',
  'A_o',
]

module.exports =
{
  data__o: ( permalink_s, collection_a ) =>
  {
    //> console.log( permalink_s )
    let export_o = {}
    collection_a.forEach( collection_o =>
      {
        const data_o = collection_o.data
        if ( data_o.permalink === permalink_s )
        {
          if ( data_o.export_a === null ) export_o = data_o    //: get all data!
          else
          {
            const export_a = data_o.export_a || EXPORT_a    //: get declared or default data only
            export_a.forEach( prop_s => export_o[prop_s] = data_o[prop_s] )
          }
        }
      } )    
    return export_o
  },
}

Comments

Home

Github

Twitter

RSS

All tips

  1. ...1 Site structure Site structure and directories
  2. ...2 Cloning 11tyTips site Start bloging with a clean site structure
  3. ...3 Source tree A bird's-eye view of the site
  4. ...4 Eleventy settings The main components of an Eleventy site build
  5. ...5 Global settings Global data for frequent use
  6. ...6 Styles guide Styles listing
  7. ...7 Names guide How variable identifiers are forged
  8. ...8 Front matter Accessing front matter data in Markdown and templates
  9. ...9 Shortcodes Processing Markdown content with shortcodes
  10. ..10 Minifying styles and script Generate minified CSS and JavaScript as inline blocks or files
  11. ..11 Using shorthands Use shorthand notation to simplify and clean your markdown
  12. ..12 Front matter post processing function A front matter function can be invoqued to modify the global or partial output of the template engine
  13. ..13 Processing before and after the template engine Add any kind of processing before and after your templating engine has done its work
  14. ..14 Variables scope and templates inheritance Take care of scope rules when using template inheritance
  15. ..15 Creating a menu A smart menu of posts is hard to create
  16. ..16 CSS mixins Filters ala SASS
  17. ..17 Light(ning) images How to slim overweight images