How to convert HTML template to Django CMS Application.

Published on May 18,2020 by Maulik

What is Django CMS?

Django CMS is an open-source package built on Django Framework. Features of Django CMS:

  1. We can create a dynamic content website with great performance and security.
  2. Django CMS has a flexible and expandable plugin architecture.
  3. Integration of third party Django application is possible.
  4. Django CMS  has multiple language support.
  5. It has easy to use front-end for content editing and managing CMS pages.

What shall we choose WordPress VS Django?

I would suggest choosing Django technology. I read one article on Django VS WordPress, what to choose? , this article talks about Django CMS benefits and how it performs better on GTMetrix and Google Page Speed Insights report and shows popular websites built using Django, It is a must-read article to get a forensic answer on “why to choose Django over WordPress?”

What is an HTML Template?

Ready HTML pages created for solving specific use cases is an HTML template. Bootstrap is one of the best CSS frameworks which plays a role in creating mobile-friendly screens. We are going to convert this HTML template into the Django CMS application. It is free to download.

Steps to convert HTML to Django CMS application.

  1. Create a Django CMS application.
  2. Load all static assets and create a base.html template in the Django CMS application.
  3. Create a plugin for editing the front-end of our HTML template.
  4. Create a Page using Plugins.
  5. Edit Content from the plugin and publish dynamic Django CMS page.

Please check the html to django-cms git repository on github.

Create a Django CMS application.

  1. Create a virtual environment
  2. Activate the environment
  3. Install djangocms dependency
  4. install djangocms-installer
  5. Create djangocms project
    1. djangocms -f <project name>
  6. On successful project creation directory structure should look like this:
    • .
      ├── manage.py 
      ├── media  
      ├── requirements.txt
      └── django_html_cms < Your main app >
          │   ├── __init__.py
          │   ├── static
          │   ├── templates
          │   ├── asgi.py
          │   ├── settings.py
          │   ├── urls.py
          │   ├── wsgi.py

Load all static assets and create a base.html template in the Django CMS application.

  1. Load all your static assets of HTML template in /django_html_cms/static/
  2. update /django_html_cms/template/base.html to load all static files, load menu tags, and CMS tags as follows:
    • {% load cms_tags menu_tags sekizai_tags static %}
      <!doctype html>
      <html>
      
      <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <meta name="description" content="" />
          <meta name="author" content="" />
          <title>HTML to Django CMS</title>
          <script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
          <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
          <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
              type="text/css" />
          <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
      
          {% render_block "css" %}
      </head>
      
      <body id="page-top">
          {% cms_toolbar %}
      
          {% block content %}{% endblock content %}
      
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
          <script src="{% static 'assets/mail/jqBootstrapValidation.js' %}"></script>
          <script src="{% static 'assets/mail/contact_me.js' %}"></script>
          <script src="{% static 'js/scripts.js' %}"></script>
          {% render_block "js" %}
      </body>
      
      </html>

       

  3. update /django_html_cms/template/fullwidth.html to extend from base.html and create content place holder, we will be able to add plugins at the content place holder from the Django CMS admin panel.
    • {% extends "base.html" %}
      {% load cms_tags %}
      
      {% block title %}{% page_attribute "page_title" %}{% endblock title %}
      
      {% block content %}
          {% placeholder "content" %}
      {% endblock content %}

       

  4. Register /django_html_cms/template/fullwidth.html in settings.py file.
    • CMS_TEMPLATES= (
         ('fullwidth.html', 'Fullwidth'),
      )

       

Create a plugin for editing the front-end of our HTML template.

What is the Django CMS plugin?

Our goal is to create the plugin which can be added to the Django CMS page by adding a plugin. In simpler language plugin makes the HTML section dynamic and editable for Django CMS admin.

It comprises of the following component:

  1. Plugin Model – contains all fields that need to be dynamic on the HTML screen.
  2. Plugin Template – HTML section that loads along with the plugin.
  3. Plugin Class – defines the HTML rendering and binds data with HTML.

 

  1. Go to your project root directory and run the following command :python manage.py startapp <plugin name> 
  2. The plugin is nothing but a Django application inside the Django project.
  3. Register plugin in settings.py
    • INSTALLED_APPS = [
          ... other registered apps
          'header_plugin'
      ]

       

  4. Now we need to create a model class and add all required plugin fields in the model. 
    • from django.db import models
      from cms.models import CMSPlugin
       
      # Create your models here.
      class Header(CMSPlugin):
         heading_text = models.CharField(max_length=100, help_text="Page Name or Title of Page", blank=True)

       

  5. Create the Plugin HTML file which will be rendered at time of load the plugin. header_plugin/templates/header_plugin.html 
    • {% load cms_tags menu_tags sekizai_tags static %}
      <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
         <div class="container">
             <a class="navbar-brand js-scroll-trigger" href="#page-top">{{instance.heading_text}}</a><button
                 class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
                 type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
                 aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fas fa-bars"></i></button>
             <div class="collapse navbar-collapse" id="navbarResponsive">
                 <ul class="navbar-nav ml-auto">
                     {% show_menu 0 10 10 10 "menu.html" %}
                 </ul>
             </div>
         </div>
      </nav>

       

  6. Create a plugin base class to render the HTML, header_plugin/templates/header_plugin.html 
    • from cms.plugin_base import CMSPluginBase
      from cms.plugin_pool import plugin_pool
      from cms.models.pluginmodel import CMSPlugin
      from django.utils.translation import ugettext_lazy as _
      from .models import Header
       
       
      @plugin_pool.register_plugin
      class HeaderPlugin(CMSPluginBase):
         model = Header
         module = _("Header Plugin")
         # name of the plugin in the interface
         name = _("Header")
         render_template = "header_plugin.html"
         cache = False
       
         def render(self, context, instance, placeholder):
             context = super(HeaderPlugin, self).render(
                 context, instance, placeholder)
             return context

       

  7. Now need to create and run migrations with the database.
    • python manage.py makemigrations <plugin name>
    • python manage.py migrate <plugin name>
  8. We are good to start the server and test the custom plugin.

Create a Page using a custom Django CMS Plugin.

  1. Login as Django CMS admin:django cms admin login
  2. Create Page:django-cms-create-page
  3. Now you need to add your page title and click on create button:django-cms-add-plugin
  4. Add a custom plugin on the page which you have created. Go to the browser and click on menu icon on top of the right side and click on plush icon And you can see this model for select your plugin:  
  5.  We created Header Plugin, so we select it.django-cms-select-plugin
  6. We need to Enter the Heading text, it is the model field of the plugin.django-cms-plugin-drawer
  7. It will appear on the top left of the screen after you publish the changes on the page:django-cms-header-plugin-output

 

Please check the html to django-cms git repository on Github. You will find “header_plugin” and “page_main_banner” plugin in the repository. It will be helpful.

Summary:

So it is quite easy to convert HTML TEMPLATE TO DJANGO CMS, I hope you liked this article. I will post more on the SEO plugin for Django CMS. Django CMS is used by Nat Geo, Loreal, Nasa, etc. For sure it is better technology than WordPress.

0 Comments

Related Articles

How to setup Django, Gunicorn, Nginx and PostgreSQL service using docker compose?

Published on October 09,2020 by Maulik

How to setup Django, Gunicorn, Nginx and PostgreSQL service using docker compose?

Docker helps to simplify and set up a uniform platform for development, staging, and production environments. DevOps efforts are reduced by using docker technology. This …

Read full article

How to create a common response format for 200, 400, 500 responses by creating custom exception handler in Django Rest Framework?

Published on May 28,2020 by Maulik

How to create a common response format for 200, 400, 500 responses by creating custom exception handler in Django Rest Framework?

In micro-services architecture, multiple client applications are consuming the backend API. The backend server does the core business logic and all heavy lifting. The client …

Read full article

copied to clipboard

Sign up for our newsletter

Please join our news letter which we share every month, you would love interesting python and django news letters.

We understand no one like spamming, your emails are safe with us.

Copyright © Django Circle All Rights Reserved.