I'm using twig to render templates in Symfony and nunjucks to render the same templates in JavaScript. Twig has an awesome feature called embed which is kind of a combination between include and extends. Is there a feature in nunjucks that works the same?
I think that you've already found out that this docs page contains all the needed information, which is that these two tags are supported:
include pulls in other templates in place. It's useful when you need to share smaller chunks across several templates that already inherit other templates.
extends is used to specify template inheritance. The specified template is used as a base template.
Just for those, wonering folks...
Related
I am developing a simple static website with just HTML and CSS. On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
I am aware of doing it via PHP on the server side or via JS on the client side. But as it is a simple static website, there is no need to create it over and over again either on the server side or on the client side. I think it would be the best to somehow generate the finished HTML code once and upload it to the webserver. Just like compiling C code and shipping the ready to use executable.
I can also imagine, that such a compiler is able to remove comments from HTML and CSS, optimize (minimize) the code, or realize variables in CSS (e. g. for colors) etc. There are a lot of similar questions, just to name some:
Make header and footer files to be included in multiple html pages
Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
How to include header/footer in a static website?
But they are all about doing the compiling over and over again by PHP, JS or server side includes, which are wasted resources for a static website.
So I am wondering, is there no such thing as "compiling a website"? How is it done nowadays? What am I missing?
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
This use case fits very well with template engines, such as Handlebars, Mustache or Pug, just to mention a few. Template engines simplify your development by letting you re-use components across multiple files.
Besides, template engines are (also) good at being complemented with data feeds. This simplifies the process of creating your HTML files even more. Let's look at an example why:
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
The sample code will render 3 <li> DOM elements from data that can be generated with JavaScript. This allows your website to be dynamic in content. That is exactly the key difference with Static Site Generators.
Static Site Generators (SSGs) can also compile HTML files with reusable components. However, these tools (i.e. Jekyll, Hugo, etc) emphasize more on the "static" compilation of the website, rather than the dynamic data complement. Just to elaborate more on this, Jekyll uses Liquid, which is a template language for HTML. Let's say Jekyll is the engine in charge of the layouts, HTML files, deployment etc. Whereas, Liquid a template language, allows you to do loops similar to Pug (template engine):
{% for post in site.categories.podcasts %}
<li>{{ post.title}}</li>
{% endfor %}
If your website has a lot of static content like blogs with articles, tutorials, images, and even writing documentation or basic text information, SSGs should be your option. For more dynamic content, i.e. fetching from server communication and databases, a template engine is definitely better.
If you want even more robust options, then you have Gatsby which is a framework using React for CMS, and again, a static content generator with more capabilities.
No compiling.
You need a static site generator (SSG). BTW I recommend 11ty, It is the best if you want simplicity & no limitaion on template languages (html, md, nunjucks, liquid, handlebars, etc are supported)
EDIT 1:
If you want to get started quickly then comment below, I have ready to use code to with HTML, CSS, JS minification, concatination
I've been trying to find a way to write HTML partials (header.html, nav.html etc.) and include them inside another HTML page as a part of my build process.
I know about server-side includes in Apache or includes in PHP but I was wondering if there was a way to do it in Node ? I've tried using template engines like Jade or Handlebars but they were not really built for that. Jade was the closest to what I'm trying to achieve but I don't want to use the syntax and there's no good way to use regular HTML. With every other one you have to include a script tag in your HTML, which I would have to strip for production.
I'm just trying to build a static website and would like to keep my build process simple (I'm using NPM scripts). Do you know any other way around copy-pasting the common parts of my website for every page ? How do you manage this in your workflow ?
Here is a recap (a bit overdue) of what seem to be the best solutions for a simple use case: preprocess (has more options, can use custom or environment variables) and ssi (mentioned by #Alex K., it is very simple and sticks to Apache-style server-side includes). I ruled out jade since it added a lot of features I didn't really need.
This actually is really a perfect use case for jade or some other tempting engine.
Layout
The basic approach would be to create a layout.jade file with all the stuff that doesn't change and dictates the general layout of the site.
layout.jade
doctype strict
html(xmlns='http://www.w3.org/1999/xhtml')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title some title
body
| Static content like nav
block pageContent
Content based on the route
Within the layout file you can define a series blocks as place holders for content to be injected from other templates. That template will extend the layout and inject the relevant blocks, something like this:
some-route-template.jade
extends layout
block pageContent
| I am content from the relevant page
Compilation
The only thing left at this point is to compile template that matches the requested route using the jade library
There was a plugin I used with loading contents of a JSON object into HTML. One of them was called jquery.loadJSON(jsondata) written by Jovan Popovic. The last version is 2011.
It has worked well but I've noticed that it does not populate the select drop downs.
If not this plugin can anyone recommend a similar plugin that loads and binds the json to the html objects?
One I studied is called JSON2HTML but this is a dynamic content loader which I do not want.
Another one was called JQuery templating but it looks like the project was abandoned?
thanks,
The most popular solutions for templating are Handlebars.js and Mustache.js (the former being an extension of the latter). Swig is also pretty popular. For a somewhat different templating style, you can go for the ERB-style underscore templates.
Note: as of now, templating libraries rather work with placeholder tags, eg. {{data}}, than by associating content with id, class, name. The templating libraries I mentioned also allow you to put loops and conditionals among others, in your HTML.
For a full list on the better Javascript templating engines, check out JSDB.io.
I want to have a block oh html across all my templates (like a sidebar for basic form submissions), which is easily implemented on the html files by using blocks.
However, my doubt is not about the repetitions across templates, but across views. Since the functionality will be the same across all templates, it would be really boring (and bad programming) to define the request handling (that would come from that side bar's submissions) for every view I have! How should I handle this? Should (and can) I make a view dedicated to handling that "all-around" part of the template?
Any advices are welcome,
Thanks in advance
Daniel is refering to an Inclusion Tag
Basically, a custom template tag is used for scenarios like yours (... code reusability amongs many other advantages)
Also this post might be helpful: Django Custom Inclusion Tags
Another approach could be using template inheritance - create a base template, which defines the layout, and override the blocks of code that would change for specific views.
Here is an example of template inheritance: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance
Use a custom template tag - probably an inclusion tag.
I have several html templates that extend a base template using django. In these templates there are common html/django snippets that I would like to have in one place and then rendered in the various places they appear in the templates.
i have looked at include tags, but I'm not sure this is what I need.
Any suggestions or explanations appreciated
Thanks
Include is the way... you can keep your snippets in a template subdirectory (like templates/includes/....) for example and do {% include "includes/mytemplate.html %}.