Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 8, 2022 11:01 pm GMT

Layouts in Eleventy

By Mike Neumegen

Brought to you by CloudCannon, the Git-based CMS for Eleventy.

Lets set up our first page on our Eleventy site. Create /index.html with the following content:

    <!doctype html>    <html>    <head>      <meta charset="utf-8">      <title>Home</title>    </head>    <body>      <p>Hello, I'm an Opossum.</p>    </body>    </html>

Pretty simple right? Now we can run Eleventys --serve command to build the site and serve it locally at http://localhost:8080.

    npx @11ty/eleventy --serve

Now open http://localhost:8080 in your web browser and see your masterpiece.

Whats the big deal isnt this just a static website?, I hear you say. Youre 100% right. At the moment this is a purely static website; lets add some Eleventy magic.

One of the main benefits of a static site generator over a purely static website is reducing repetition. One tool Eleventy gives us to reduce repetition is layouts. A layout is typically comprised of all the HTML on a website that remains relatively unchanged between the pages of the site. The head metadata, header, navigation, and footer are often perfect candidates for a layout.

Lets take everything except the content of our /index.html file and put it into a layout so it can be used for other pages.

Your first layout

Create a directory in the root of your site called _includes and inside that, create a file called page.html with the following contents:

    <!doctype html>    <html>    <head>      <meta charset="utf-8">      <title>{{ title }}</title>    </head>    <body>      {{ content }}    </body>    </html>

This is almost identical to our original index file except it has two snippets: {{ title }} and {{ content }} replacing the content we had for this page. These snippets are a templating language called Liquid. If youve used the static site generator Jekyll before, this will all look very familiar.

Now we can reference the new layout in /index.html and change the page to only specify the placeholders for content title and content. Replace the contents of /index.html with the following:

    ---    title: Home    layout: page.html    ---    <p>Hello, I'm an Opossum.</p>

You may have noticed the triple dashes at the top of the file. These dashes indicate metadata for the page, commonly known as front matter. Well dive deeper into front matter later in the series. For now, I want you to see the connection between setting the title in the page front matter and referencing it in the layout file. Were also using front matter here to tell Eleventy which layout to use for this page.

The body content is available using the {{ content }} variable in the layout. Lets make one further iteration here. This content is relatively simple and would be a great fit for Markdown. If we change the extension of our index file to .md and change the body content to Markdown (in this case by simply removing <p> and </p>), we have an even simpler way to maintain our content. The end result looks like this:

    ---    title: Home    layout: page.html    ---    Hello, I'm an Opossum.

Your second page

Lets create a second page on the site to demonstrate how the layout is doing most of the heavy lifting for us.

Create /about.md with the following content:

    ---    title: About    layout: page.html    ---    I'm an Opossum joey building my first Eleventy site.

Navigate directly to the new about page at http://localhost:8080/about/. Wow, so easy!

Adding styles

Were not going to go into any CSS details in this series to keep the focus on learning Eleventy. That doesnt mean were going to avoid the subject completely however, learning how to build Sass files will be extremely valuable throughout your Eleventy journey.

Eleventy doesnt have Sass support built in, however it is easy to add with a plugin. First well install the eleventy-sass plugin to our site:

    npm install --save-dev eleventy-sass

Next well tell Eleventy about this plugin. Create .eleventy.js in the root of your site and add the following:

    const eleventySass = require("eleventy-sass");    module.exports = function(eleventyConfig) {      eleventyConfig.addPlugin(eleventySass);    };

.eleventy.js is where the global configuration for our eleventy site lives. In this case were importing the eleventy-sass plugin and loading it into Eleventy as a plugin. Now any .scss file will automatically be built into a .css file. Lets take advantage of this. Create a new folder in the root named assets and inside that, a file named main.scss with the following contents:

    body {      width: 400px;      margin: 0 auto;      font-family: sans-serif;    }    nav ul {      list-style: none;      padding: 3px 5px;      background: #111;      a {        color: #fff;        text-decoration: none;        &:hover {          text-decoration: underline;        }      }      li {        display: inline;      }    }    footer {      background: #f2f2f2;      padding: 2px 2px;      font-size: .7em;      text-align: center;    }    #map {      height: 300px;    }

Finally we need to reference the CSS in our layout below </title>:

    <link rel="stylesheet" href="/assets/main.css">

Looking at your site in the browser now, youll see some very basic styling.

Whats next?

The only way to get to the about page currently is by navigating directly to it. In the next lesson, well use a partial to add navigation to the page.


Original Link: https://dev.to/cloudcannon/layouts-in-eleventy-5gc8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To