How to include html file in another to avoid repeating code?

Question

I code with django and when I am working with django template, I do the below to avoid repeating code. Let me illustrate it with an example:

Suppose I have two pages in my website:

1) home 2) about

In django I code as below:

I first build a base.html :

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}home{% endblock title %}</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/my-base-css.css' %}">
        {% block stylesheet %}{% endblock stylesheet %}
    </head>
    <body>
        <h1>this is my site</h1>
        {% block body %}{% endblock body %}
    </body>
</html>

I then build home.html:

{% extends 'base.html' %}

{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/home-page-css.css' %}">
{% endblock stylesheet %}

{% block body %}
    <h2>This is home</h2>
{% endblock body %}

I also build about.html:

{% extends 'base.html' %}

{% block title %}
my-website-about
{% endblock title %}

{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/about-page-css.css' %}">
{% endblock stylesheet %}

{% block body %}
    <h2>This is about</h2>
{% endblock body %}

I now want to do the same without having a backend. I have a static website. How can I do the same without having a backend like django or php, etc.?

There is a similar question in here: Include another HTML file in a HTML file

This can solve my problem. However, it is a little different from what I want. It is loading another html in an html file but I am looking for extending another html; I mean adding to another base.html and having a new html file

Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — Progman, Jun 19 '20 at 11:18
@Progman This answers my question but with I django it is way easier to do what I want. I was looking for a simple way like that of django template. In django it is the other way. What you mentioned in loading another file. I am looking for extending another file that is a bit different — Amin Ba, Jun 19 '20 at 11:22
What do you mean by "extending another file" and how are the answers in that question does not help/work? They load part of a different file inside another HTML file. — Progman, Jun 19 '20 at 12:05
In the django method, you actually load the whole base.html and change different parts in the middle of it. In the solution you kindly commented here, you only can load a file from another file to your current file. — Amin Ba, Jun 19 '20 at 13:33
The answer is the same as it is for dynamic sites: Use a template language. The only difference is that you generate the HTML documents are build time instead of run time. There are plenty of template languages out there, and plenty of [tools geared towards building static sites](https://duckduckgo.com/?q=static+site+builders&t=hk&ia=web). — Quentin, Jun 19 '20 at 13:38
@AminBa Using `load()` or `get()` from jquery works similar, as it loads the content in your document. That is similar to the django templates, which loads the file and replaces the placeholders. See http://embed.plnkr.co/HYnvX0spZeQKwUdR as an example how you can load fragments into your page. You can use it to load headers, menus, footers, banners, etc. — Progman, Jun 19 '20 at 18:07

Pedro Filipe · Answer 1 · 2020-06-19T15:15:51.220

-1

It looks like you're using the Django Templating Language which is similar to Jinja (I've only used this one because I've mostly used Flask but the way it works should be similar). Django uses this language in its template engine and the way it works is by basically taking your HTML file, passing it through a backend (Django), and replacing the variables/logic you have there with actual values. In the end, you'll have a fully built HTML file.

The short answer is no.

From my understanding of template engines, you need to have a backend that can actually work out which values (by replacing this syntax { some_variable }) you should put in the final HTML output.

edited Jun 19 '20 at 15:15

answered Jun 19 '20 at 13:54

Pedro Filipe

619
3
13

Thank you for your response. I am not using jinja. I am only building a static website with only html, css, and js. no other framework or software – Amin Ba Jun 19 '20 at 15:03
1

I see, my bad then. Even if this isn't Jinja (I've only used this engine), you're probably using the Django templating language - https://docs.djangoproject.com/en/3.0/ref/templates/language/ - which should be similar. I'm pretty sure that Django is needed for what you're doing, but if someone more experienced would provide a better answer, it would be better. – Pedro Filipe Jun 19 '20 at 15:12

How to include html file in another to avoid repeating code?

1 Answers1