DEV Community

Amartya Gaur
Amartya Gaur

Posted on • Updated on

Converting any HTML template into a Django template

The normal way

Any HTML, CSS, JS or BootStrap template can be converted into a Django compatible template. The trick usually is to add {% static %} tags for the js, css and image files that we want to include in the html files. That can become a very lengthy task to do for a complete page.

Let us say that we download a template :

Downloading Template

Template: Appco

Let us create a new django project and try to load the template into it, following are the steps that we would need to take:

Step 1

Create a new django project by:
django-admin startproject MyProject

Step 2

cd into the project cd MyProject/ and start an app main:
python manage.py startapp main

Step 3

Create a new folder called template inside the MyProject and a new folder main inside this templates folder. Now we need to create a folder static/ inside the MyProject/main folder and copy all the static files associated with the project there which in this case reside under the assets folder. So let us directly move the assets folder to the MyProject/main/static/ directory.
The file structure will now look something like this:
File Structure

Step 4

Now for the most tiresome step we need to change every link to the css / js files in the html pages we need to render in the views.
Example:
<"link rel="stylesheet" href="assets/css/bootstrap.min.css">
needs to be changed to
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">

Step 5

We need to include the line {% load static %} at the top of the html page in order to be able to use the static tag.

We need to include the app in the settings.py file by adding 'main.apps.MainConfig' in the INSTALLED_APPS list and add a view for creating rendering the index page so modify the MyProject/main/views.py file and add the following:

from django.shortcuts import render

def index (request): 
    return render(request, 'main/index.html')

and also add a url route for the same, create a file urls.py in MyProject/main/ and add the following code :

from . import views
from django.urls import path

app_name = 'main'

urlpatterns = [
    path('', views.index, name='index'),
]

now finally we need to add the following in the MyProject/MyProject/urls.py :

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls', namespace='main')),
]

Step 6

Migrating the changes and running server :

 
python manage.py migrate
python manage.py runserver

We can see that the page loads perfectly:

Index Page

The djangify way

To ease up the above process, there exists a python package djangify which can be installed by:
pip install djangify

The 1-3 and 5-6 steps remain the same but the package automatically does the step 4 for you, after installing the package just run the following command from your shell inside the MyProject directory:

 
djangify -d main/templates/main

and the tool will create a folder "Modified_files" in which there will be HTML with every CSS, JS reference converted to the django compatible reference, replacing the index.html in the main/templates/main/ with the same named file in main/templates/main/Modified_files/ we can easily see the same output as above.

The Modified_files will also contain the other html files converted into the desired format and thus can be directly used with views.py

Please feel free to drop a message at Ohuru in order to avail various development services offered by us.

GitHub logo L4TTiCe / djangify

A Python script that converts HTML Files / Templates to Django compatible HTML Templates.

Djangify

djangify

A Python script that converts HTML Files / Templates to Django compatible HTML Templates Brought to you by : Ohuru

Installation

pip install djangify

Usage Info

username@hostname $ djangify -h
usage: djangify [-h] [-d [BASE_DIRECTORY]] [-a [APP_NAME]] [f [f ...]]

Converts specified html files or all html files to django format within a
specified directory.

positional arguments:
  f                    provide file names to convert

optional arguments:
  -h, --help           show this help message and exit
  -a [APP_NAME]        provide django app name
  -d [BASE_DIRECTORY]  provide base directory
  -e [ENCODING]        provide encoding

Description

Converts all the HTML files specified in the files (' f ') argument into Django templates, replacing the contents of 'src', 'href' and 'url' tags with their Django compatible static conterparts with their Django App name prefixed.

For Example:

To process a set of HTML files, copy the djangify.py script to the directory containing these HTML files, and run the…

Top comments (6)

Collapse
 
ds22l profile image
Info Comment hidden by post author - thread only accessible via permalink
ds22L

In step 3 is it a typo where you say to create a static and templates folder in MyProject instead of main?

I assumed you were creating an app for isolation's sake. Then simply including it in MyProject/MyProject urls.py.

Collapse
 
amartyadev profile image
Amartya Gaur

That is a typo indeed.

Collapse
 
audreyfeldroy profile image
Audrey Roy Greenfeld

This is a great writeup. Thanks for sharing about Djangify. I'm excited to try it out πŸ˜€

Collapse
 
amartyadev profile image
Amartya Gaur

Sure

Thank you

Collapse
 
mezbauddin profile image
MEZBA UDDIN

Gear tutorial I'll utilise this to create mezbauddin.com

Collapse
 
zhuwaki profile image
Nigel Zhuwaki

Nice write up. Key takeaway here is djangify. Thank you

Some comments have been hidden by the post's author - find out more