Turning an HTML template into a Django template

djangohtml

When you purchase an HTML template, usually everything is mixed in together… html, css, images and js.

An example template may look like this:

account.html
category.html
contact.html
/fonts
/img
item-detail.html
media.html
register.html
style.css
author.html
category-tile.html
/css
/images
index.html
/js
new.html
shortcodes.html
submit.php

Django has static files and templates in separate folders in most cases. Is there a proper way of going about this?

Best Answer

I would start by moving all the /fonts, /css, and other static files to my static dir.

Then I'd look at the various html files, try to figure out what common elements are shared, and extract those common elements to a base template that can be imported by the various children (this page gives a nice starting point for approaching template style & inheritance). Hopefully by starting with the base template, I could change the paths to static assets in that file alone, and avoid having to change them in each individual child template, but there's always sed, vim macros, or similar tools.

Then I'd go through all the html files and convert each of them to child templates extending the base template. Presumably this would involve some looping between "edit the base" and "edit the children," possibly with some intermediate or unrelated "base" templates if the theme is complicated enough.

Related Solutions

Python – How to develop front end (UI) for the Django website

The Django docs never mentioned that a person who doesn't know what HTML/JS/CSS is about can use it. Separation of concerns is done also in the backend, where the actual action(the views) are separated from the database layer or the URL-routing logic - That allows for loose-coupling. It never means you can write views without ever understanding your models. Similarly(well, not that similarly), you do need to have an understanding of HTML/CSS to get basic web pages up. You may or may not want to learn some JS, but I think with HTML5, it is more or less essential to know some JavaScript.

No sane web-developer is going to advise to to use a WYSIWYG editor like DreamWeaver. Write HTML by hand. You may, however, use things like HTML5 Bolierplate to get your project started fast.

Google AppEngine is a PaaS that you can use to deploy your application. It will provide among other things, the Python runtime, a high-replication datastore etc. - but it will not take care of generating your front-end.

If you're going to hire someone to take care of the front-end, that person would anyway have to know how to use Django tags, as really(if you follow the MVC - or MTV pattern closely), they define the blurred line between "static" and "dynamic" web-pages. Even if you choose to hire a frontend-developer, I suggest you grasp the basics of HTML and CSS(at least so much that you know how it works and how are you going to serve the CSS static files). It will only help you in the long run.

Not all people have good design skills, and design is undoubtedly best left to skilled people, but when it comes to actually serving pages with that design, it is all HTML and CSS. So you may hire a person who doubles up(most do) as a front-end designer and a front-end developer. But I suggest you to not remain completely unaware of front-end technologies.

C# HTML – Merging Dynamically Created Data with an HTML Template

You might consider using XSL for this. Have your program gather data into an XML document and transform it to HTML with XSL. It's a pretty simple structure

<xml>
    <race nbr='1'>
        <racer name='Jon Skeet' horse='Fast Runner' time='1:20'/>
        <racer name='Joe Blogs' horse='Not So Fast' time='1:25'/>
    </race>
    <race nbr='2'>
        <racer name='Jackie Redmond' horse='Ford Prefect' time='1:20'/>
        <racer name='Evanka Osmak' horse='Heart of Gold' time='1:25'/>
    </race>
</xml>

Within your XSL, you'd have a list of variables that include the list of racers, race #, etc.

<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="no" omit-xml-declaration="yes"/>

<xsl:variable name='race' select='/xml/race'/>

<xsl:template match='/'>
    <xsl:for-each select='$race'>
        <h1>Race <xsl:value-of select='@nbr'/></h1>
        <table>
            <tr>
                <th>Name</th>
                <th>Horse</th>
                <th>Time</th>
            </tr>
            <xsl:for-each select='racer'>
            <tr>
                <td><xsl:value-of select='@name'/></td>
                <td><xsl:value-of select='@horse'/></td>
                <td><xsl:value-of select='@time'/></td>
            </tr>
            </xsl:for-each>
        </table>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

Provide 1 or 2 copies of the XSL as samples for various formatting styles, and allow your end users to provide their own XSL transformation.

Best Answer

Related Solutions

Python – How to develop front end (UI) for the Django website

C# HTML – Merging Dynamically Created Data with an HTML Template

Related Topic