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:
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.
The sub pages
I want an unique look in all sections. Every section will have some kind of title, description and image.
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>
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>
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>
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>
Eleventy
searches forlayout
files within the directory_includes
. But you can change this behavior using a.eleventy.js
config file.
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>
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>
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>
And a file _includes/cascade.njk
with this content:
<!-- project/_includes/cascade.njk -->
---
layout: base
pageTitle: This title is not used
---
{{ content | safe }}
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>
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]);
}
And a _include/entries.njk
file:
<!-- project/_includes/entries.njk -->
{% for d in entries %}
<p>{{ d }}</p>
{% endfor %}
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>
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)
Very nice.
My early attempt with nunjucks is just a few simple includes.
epsi-rns.gitlab.io/ssg/2020/01/03/...