Converting any HTML template into a Django template
djangify django template tutorial

March 2, 2020, 12:38 a.m.

Converting any HTML template into a Django template

  533

Djangify

A Python script developed by Ohuru that converts HTML Files / Templates to Django compatible HTML Templates. This post will cover the traditional and djangify ways to use pre-built templates with Django.

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' %}"></code>

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

Share this article:

Comments

  • aPotalen
    June 22, 2021, 4:12 a.m.

    На портале <a href=https://ero-times.ru>https://ero-times.ru</a> представлена коллекция эротических фотографий, которые для большего удобства разделены на категории. Картинки представлены в хорошем качестве, их удобно просматривать с любого устройства - смартфона, компьютера или планшета. Пополнение коллекции осуществляется ежедневно. Фотографии можно скачивать в неограниченном количестве и устанавливать на рабочий стол.Для быстрого поиска можно воспользоваться удобными тегами.

  • hatonwic
    June 22, 2021, 4:22 a.m.

    У всех случается такое, что приходят звонки с неизвестных номеров.Сервис по ссылке <a href=https://zvonili.fun/>https://zvonili.fun/</a> создан для того, чтобы помочь понять, кто же хотел с вами поговорить.Пользователи постоянно загружают на сайт подозрительные номера и пишут, кто за ними скрывается: коллекторы, мошенники и так далее.Самые комментируемые номера расположены на главной страничке в центре.Для комфортного поиска интересующего вас номера вбейте его в поисковую строку.На сайте можно завести личный кабинет для более удобного пользования.

  • kovaGvoiva
    June 22, 2021, 4:37 a.m.

    На сайте <a href=https://xn----8sbf5aiabq1a0c.xn--p1ai/>https://xn----8sbf5aiabq1a0c.xn--p1ai/</a> можно получить полезную информацию на юридическую тематику от специалиста миграционного центра. Здесь вы узнаете нюансы оформления российского гражданства, какие документы нужно подготовить, куда их подавать, как получить вид на жительство, как оформить документы на ребенка и многое другое. На сайте можно задать вопрос сотруднику миграционного центра, заполнив простую заявку. Здесь же размещены контактные данные для записи на консультацию.

  • oroleRuics
    June 22, 2021, 7:49 a.m.

    Люди, решившие утеплить стены квартир и домов, фасады зданий и домов, обращаются на сайт <a href=https://uteplenie.net.ua>https://uteplenie.net.ua</a> / в любое удобное для них время. Наши специалисты хорошо разбираются в специфике наружного утепления, реализуя оперативно даже самые крупные и масштабные проекты. Работы завершаются альпинистами - высотниками всегда ответственно, вне зависимости от высоты и этажности здания. Качество работы сертифицированных сотрудников гарантируется, а деятельность осуществляется по разрешительным документам.

  • kovevwot
    June 22, 2021, 9:18 a.m.

    По ссылке <a href=https://vseprozdorove.ru/>https://vseprozdorove.ru/</a> найдется много полезных советов по лечению и профилактике разных болезней.На основной странице есть длинный список болезней и, выбрав определенную, можно получить информацию, как с ней справиться.Допустим, пользователя волнует бессонница или сильные головные боли — точно найдете, что с этим можно сделать.На сайте размещено напоминание, что самолечением заниматься вредно и, что, даже проводя профилактику, не стоит забывать о походах к врачу и консультациях с ним.

  • schukibaw
    June 22, 2021, 11:18 a.m.

    Перейдя по ссылке <a href=https://gidmp3.ru/>https://gidmp3.ru/</a> вы окунетесь в мир музыки.И прослушивание, и скачивание музыки совершенно бесплатно.Для вашего комфорта, на левой части страницы есть разделение по категориям: русская музыка, музыка в машину, лирические, новогодние, популярные песни, ремиксы, топ 100 песен и так далее.Есть рубрики «Лучшее за месяц» и «Лучшие песни за все время».Справа у вас есть возможность выбрать и прослушать целый альбом.В центре страницы находятся новинки.

  • zarovInjen
    June 22, 2021, 1:46 p.m.

    Если вы пишете музыку и хотите продать свои треки, воспользуйтесь услугами продюсерской компании Ghost. Обращайтесь к нам, если ищете надежного посредника, который поможет с поиском качественных треков. Сотрудничаем анонимно с продюсерами и ди-джеями, предлагаем выгодные условия. На сайте <a href=https://exclusiveghostproduction.com>https://exclusiveghostproduction.com</a> вы найдете большой выбор музыки в различных жанрах. У нас вы можете купить музыкальные композиции в высоком качестве, а также продать свою музыку по хорошей цене.

  • erlanchoth
    June 22, 2021, 1:57 p.m.

    Заходите на ресурс по ссылке <a href=https://oknopnz.ru>https://oknopnz.ru</a> — если вы хотите установить окна из пластика или остеклить балкон.Строительная компания «Окнотэк» предлагает энергосберегающий стеклопакет, отличную звукоизоляцию, высокую теплоизоляцию, немецкую фурнитуру и многие другие достоинства.Гарантия действует 10 лет.Вы можете рассчитать стоимость прямо на сайте, а еще бесплатно вызвать замерщиков.Вместе с окнами вам предоставят и подоконник, и москитную сетку, и оконный отлив.На сайте можно посмотреть портфолио фирмы и оставить заявку на установку.

  • evilarAmure
    June 22, 2021, 5:16 p.m.

    Дети любят слушать сказки, и если некогда читать, можно включить на сайте <a href=https://www.vse-skazki.com/audioskazki>https://www.vse-skazki.com/audioskazki</a> аудиосказку. По ссылке представлен огромный ассортимент сказок от разных авторов: от тех, к которым все привыкли с детства, до тех, которые родители никогда не читали. Можно выбрать из списка конкретного автора и прослушать только его сказки. У каждого писателя своя тематика и свой стиль, поэтому не удивительно, если кому-то больше нравится, например, слушать Пушкина или братьев Гримм.

  • vagadtib
    June 22, 2021, 11:27 p.m.

    Перейдя по ссылке <a href=https://credityt.ru>https://credityt.ru</a> вы можете получить консультацию опытного юриста онлайн и очень быстро – за минуту!Вам нужно всего лишь в специально отведенном месте задать свой вопрос, он будет переадресован юристу из вашего города.Обсуждаются проблемы на любую тему.Все честно и прозрачно – бесплатная консультация только первая, за последующие уже надо будет заплатить.Ответы юриста могут приходить как в чате на сайте, так и звонком на мобильный номер, который вы оставите.

  • selovenemo
    June 22, 2021, 11:30 p.m.

    Интернет-магазин Шуйские.рф предлагает широкий ассортимент матрасов, одеял, подушек, а также ортопедические и электротовары, текстиль. На сайте <a href=https://xn--e1afce8ak8a.xn--p1ai/>https://xn--e1afce8ak8a.xn--p1ai/</a> вы можете выбрать и купить электроматрас, наматрасник, ортопедическую подушку, полотенце, скатерть и многое другое. Магазин часто проводит акции и предлагает скидки на различные позиции. Также ежедневно выбирается товар дня, который продается с хорошей скидкой. Товары доставляем по Москве, а также отправляем в разные регионы страны.

  • shakonok
    June 23, 2021, 12:30 a.m.

    Если вы хотите приобрести сетку или проволоку, то переходите на сайт по ссылке <a href=https://amk-metiz.kz/>https://amk-metiz.kz/</a> — организация предлагает качественную продукцию собственного производства, постоянное наличие на складе самых популярных и ходовых позиций, а также оперативную доставку любого объема в указанный срок.Каталог очень объемный: стальная проволока, 3Д-панели ограждения, коробчатые габионы, проволока колючая, сетка армирующая, с остальным можно ознакомиться на главной страничке.Также предлагаются услуги: сварочные работы стальных конструкций и порошковое полимерное покрытие металлоизделий.

  • lmaksDum
    June 23, 2021, 4:37 a.m.

    Подбор анкоров, привлечение трафика и другие действия на сайте <a href=https://seotop1.ru/>https://seotop1.ru/</a> можно заказать. Работы с социальными сетями и мессенджерами проводятся всегда ответственно, до результата. Размещение ссылок всегда гарантируется по оптимальным тарифам. Чтобы получить ответ на интересующий вопрос, достаточно заполнить онлайн-форму, указав в ней имя, адрес электронной почты и тему. Анкоры для защиты от склеивания, обеспечение трафика до отметки в 6000 посетителей в сутки - это и не только может заказать каждый.

  • vaalestuck
    June 23, 2021, 8:50 a.m.

    Компания Кит-Клининг предоставляет клининговые услуги в городе Владимире. Компания предлагает следующие услуги: уборка квартир, частных домов, коммерческих помещений, вывоз мусора и уборка после ремонта, дезинфекция, чистка бассейна, восстановление напольных покрытий. По ссылке <a href=http://kit-k.ru>http://kit-k.ru</a> можно узнать стоимость услуги, заполнив простую заявку. Здесь же размещаются актуальные акции и бонусные предложения. Клининговые компании Кит-Клининг находятся в Санкт-Петербурге и Владимире.

  • aNigeAxory
    June 23, 2021, 10:26 a.m.

    Вы красавица с подтянутым телом и хотите переехать в Париж?Тогда жмите на ссылку <a href=https://rdv.agency/>https://rdv.agency/</a> и воплощайте свой план в жизнь!Агентство на данном ресурсе уже осуществило мечты многих девушек, дав им возможность работать в удовольствие и за большую оплату.Предлагаются модельные туры в разные страны, а трансфер в Париж вообще осуществляется из любого города России бесплатно, это хорошая возможность попутешествовать без затрат.Агентство помогает создать качественное портфолио.Все личные данные девушек остаются конфиденциальными.

  • aklavrat
    June 23, 2021, 11:52 a.m.

    Сервисный центр Ховер Москва предоставляет комплексное обслуживание автомобилей марки Hover. Сотрудники центра ремонтируют двигатель, климатическую систему, проводят диагностику и ремонт подвески, настраивают электронику, убирают вмятины и другие повреждения с кузова. В случае замены деталей используются оригинальные запчасти. Все работы проводятся при помощи профессионального оборудования и инструментов. На сайте <a href=http://xn--b1agzkv.xn--80adxhks/services/tekhnicheskoe_obsluzhivanie_Haval/>http://xn--b1agzkv.xn--80adxhks/services/tekhnicheskoe_obsluzhivanie_Haval/</a> можно ознакомиться с услугами и записаться на диагностику.

  • anasesow
    June 23, 2021, 1:05 p.m.

    Перейдя по ссылке <a href=https://www.parvenik.ru/>https://www.parvenik.ru/</a> вы увидите огромный выбор веников для бани: дубовых, березовых, эвкалиптовых, хвойных, липовых и других, также банных аксессуаров, таких как матрасы, подушки, рукавицы, травы, эфирные масла, чаи и прочее.Для вашего удобства есть разделение по категориям.Доставка осуществляется по всем районам Москвы и близлежащим областям.Контакты для связи указаны там же.

Leave a comment

Related articles

Flutter signup/login application with Django backend #1

Flutter signup/login application with Django backend #1

Introduction This series of posts intends to develop a flutter signup/login app working with API calls to Django backend. The …

Read Story
Flutter signup/login application with Django backend #2

Flutter signup/login application with Django backend #2

Next steps This post is in continuation of the other post that written on the same topic. If you have …

Read Story
Flutter signup/login application with Django backend #3

Flutter signup/login application with Django backend #3

What this post is about In the previous two posts, we made an API in Django with the help of …

Read Story

Stay right up to date

Get great content to your inbox every week. No spam.
Only great content, we don’t share your email with third parties.