Building an Eleventy Starter Template: HTML

Building an Eleventy Starter Template: HTML sparkbox.com3 months ago in #Dev Love67

In the final a part of this collection, we arrange our preliminary mission construction and configuration, and we created a minimum HTML format that may be shared between other pages. In this newsletter, we can make that HTML format extra versatile and dynamic, so we will regulate it as wanted on a page-by-page foundation. If you simply wish to see the code (or use the starter template), you’ll be able to to find the repo at You too can see a snapshot of what the codebase looks as if after following the stairs on this article by way of going to the html department. Making Our HTML Layout Dynamic Previously, we created a format.njk report with our HTML construction and an report with entrance topic defining a identify and outline: — identify: Home Page description: This is the house web page. It is not very attention-grabbing at the moment. format: format.njk — However, our format.njk has static values for identify and outline, so those we outlined in gained’t display up in our constructed HTML. Let’s repair that. Nunjucks makes use of curly braces, very similar to Handlebars, Vue, or Angular, to incorporate dynamic content material. If we alter the identify and meta description tags, we’ll be capable of reference the ones entrance topic variables within the format. Here’s our up to date format.njk report: {{ identify }} This is the header. { secure } This is the footer. Now, if we run npm get started and investigate cross-check the output index.html or consult with http://localhost:8080, we will have to see the identify and outline that we set within the entrance topic of We can create any other web page to additional take a look at how dynamic our titles and outlines are. Let’s name it — identify: About description: This is the about web page. You would possibly put biographical data right here if it is for a private website or portfolio. format: format.njk — # About This is the About web page. You would possibly not need or want this, so be happy to delete it if it is not helpful to you! If you consult with localhost:8080/about, you will have to see this new About web page, and you’ll be able to investigate cross-check it to ensure the identify and outline are correct. So a ways, we’ve most effective modified easy textual content. How about extra difficult markup? Using Blocks For one thing just like the header and footer that we wish to be dynamic, we will use Nunjucks blocks to override them on the web page degree. We may even want a block for our primary content material. Let’s outline the blocks in our format partial. {% block header %} This is the header. {% endblock %} {% block content material %} { secure } {% endblock %} {% block footer %} This is the footer. {% endblock %} By wrapping our dynamic blocks this manner, the default markup and content material can be used except we override the blocks from elsewhere. To do this, alternatively, we need to use .njk recordsdata (as an alternative of .md like we’ve been the use of), and we need to lengthen our format as an alternative of specifying it in entrance topic. Let’s trade to about.njk, and let’s upload a touch.njk report for distinction. In the “About” web page, we’ll override the header and footer with page-specific content material. — identify: About description: This is the about web page. You would possibly put biographical data right here if it is for a private website…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply