DEV Community

Cover image for Eleventy basics you might need for creating a generic design
Josef Biehler
Josef Biehler

Posted on • Edited on

Eleventy basics you might need for creating a generic design

#eleventy #website #portfolio #design

In the last articles I showed you how you can fetch tweets and their images and display them within your eleventy page. Also I modified my build process to upload the files through a HTTP upload endpoint.

In this article I show you how my design might look like and you learn some eleventy basics that we will need in order to create this design.

My design draft

I am a bad designer which means I have problems choosing the right colors to make it look great. But I know how my page should look like. At least I have some sort of idea that I want to try out.

The start screen

It should show a picture of me and some text describing me and the content that can be found at this page. Somehow it should look like this:

startscreen

The overview page

I want to divide the page into three areas:

  • Github projects
  • dev.to blog posts
  • Drawings

I want to make it easy for the viewer to see what every section contains. I utilize three horizontal div container, each containing a picture and some text, for this task.

overview

The sub pages

I want an unique look in all sections. Every section will have some kind of title, description and image.

subpage

Some eleventy basics

With eleventy you can write your content with markdown. This is good if you have articles or something like that. But for a general page structure it is not enough. With markdown you can not place boxes next to each other and so on. So I decided to go with the template engine nunjucks. Eleventy supports it out of the box.

Composing templates

Let's say, you have an base.njk file like this:

<html>
    <body>
        <h1>What a cool site</h1>
        <!-- place content here -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

And you want to have different views that should all be placed into this generic construct. For example this index.njk:

<p>I am a full stack developer</p>
Enter fullscreen mode Exit fullscreen mode

You need two things:

At first you create a file _includes/base.njk and insert the base HTML construct. To place content somewhere in your nunjucks file, you have to use {{ content | safe }}:

<html>
    <body>
        <h1>What a cool site</h1>
        {{ content | safe }}
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The safe filter must be used in order to allow the insertion of HTML.

Then you need to tell the index.njk what template it is based on. This is done by using the frontmatter of that file:

---
layout: index
---
<p>I am a full stack developer</p>
Enter fullscreen mode Exit fullscreen mode

Eleventy searches for layout files within the directory _includes. But you can change this behavior using a .eleventy.js config file.

Check out the example!

Using variables to set page title

Of course you want a unique page title on every page. This can be done using the frontmatter of the pages. First you insert the title tag into the base.njk:

    <head>
        <title>{{ pageTitle }}</title>
    </head>
Enter fullscreen mode Exit fullscreen mode

And in index.njk you can define the variable pageTitle in the frontmatter:

---
layout: base
pageTitle: Index of my cool site
---
<p>I am a full stack developer</p>
Enter fullscreen mode Exit fullscreen mode

Data cascade

You can combine as much includes as you like and define variables in every include. All frontmatter data is merged. If a key appears twice, the first one wins.

Example:
Create a new file cascade.njk with following content:

<!-- project/cascade.njk -->

---
layout: cascade
pageTitle: Index of my cool site
---
<p>I am a full stack developer</p>
Enter fullscreen mode Exit fullscreen mode

And a file _includes/cascade.njk with this content:

<!-- project/_includes/cascade.njk -->

---
layout: base
pageTitle: This title is not used
---
{{ content | safe }}
Enter fullscreen mode Exit fullscreen mode

Even though _includes/cascade.njk defines another title, the result looks like this:

<!-- project/_site/cascade/index.html -->

<html>
    <head>
        <title>Index of my cool site</title>
    </head>
    <body>
        <h1>What a cool site</h1>
        <p>I am a full stack developer</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

So duplicate keys are ignored.

Including templates in nunjuck

Inheritance by using the frontmatter layout property is handled by eleventy. But you are not restricted to this mechanism. You also can include templates within nunjuck files: {% include 'example.njk' %}

Passing data to nunjuck includes

Let's say you have this .eleventy.js file:

module.exports = function(eleventyConfig) {
  eleventyConfig.addCollection("many_data_entries", () => [1,2,3,4,5,6]);
}
Enter fullscreen mode Exit fullscreen mode

And a _include/entries.njk file:

<!-- project/_includes/entries.njk -->


{% for d in entries %}
    <p>{{ d }}</p>
{% endfor %}
Enter fullscreen mode Exit fullscreen mode

And in the root folder a new view, named include.njk:

<!-- project/include.njk -->

---
layout: base
pageTitle: Example of includes
---
{% set entries = collections.many_data_entries %}
{% include '_includes/entries.njk' %}

<p>This shows how you can include files using the nunjuck template engine and pass data to the included file</p>
Enter fullscreen mode Exit fullscreen mode

This view inherits from base.njk and includes another nunjuck template. To enable entries.njk to render the collection's data, you can set a new variable with this line:

{% set entries = collections.many_data_entries %}

Note: Of course you must set it before you include the other template file.

Summary

I showed you how I would design my portfolio page and what eleventy techniques I need to implement it. In the next article I show you how I implemented it. Stay tuned!

Found a typo?

As I am not a native English speaker, it is very likely that you will find an error. In this case, feel free to create a pull request here: https://github.com/gabbersepp/dev.to-posts . Also please open a PR for all other kind of errors.

Do not worry about merge conflicts. I will resolve them on my own.

Top comments (1)

Collapse
 
epsi profile image
E.R. Nurwijayadi •

Very nice.

My early attempt with nunjucks is just a few simple includes.

epsi-rns.gitlab.io/ssg/2020/01/03/...

Simple include(s) with Nunjucks in Eleventy

Read next

your-ehsan profile image

🤯 7 Totally FREE! Mind-Blowing AI Websites You Won’t Believe actually exist

EHSAN. -

gopinav profile image

Getting Started with Mitosis: Creating a Cross-Framework Design System

Vishwas -

ooye_sanket profile image

The Hexagonal Code: How Uber Finds You Fast!

Sanket Kalekar -

harisapnanair profile image

14 Must Know Microservices Design Principles

Hari Sapna Nair -