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>
Eleventysearches forlayoutfiles within the directory_includes. But you can change this behavior using a.eleventy.jsconfig 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/...