I recently got started with Django, took a few courses on it and got the basic idea in terms of project structure, urls, templates, static files etc. To avoid learning frontend development (and build my app faster), I thought a bootstrap theme would be a good option. I got this https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 which has bootstrap4 in the title, however, it seems that integrating it into the project is not as simple as placing the scss, js and vendor files into my static folder. The 'getting started' resources suggest that it runs on NodeJS, and has a whole backend of its own. I'm not asking for a bespoke full guide on how to do it, but it'd be nice to know if the two things are compatible or I if should move on and try some other frontend solution instead. Cheers!
They are "compatible", but you are probably better off starting with a theme that is just HTML/CSS/JS (not made for Angular, unless you are trying to use Angular with Django). I have actually used this exact theme in a Django project.
To start, just take components from the HTML and put them into Django template files. Generally, I would make a layout page which is something like this:
{% load static %}
<!-- templates/layout.html -->
<!DOCTYPE html>
<html>
<head>
<!-- include styles from metronic here -->
</head>
<body>
{% block body %}
{% endblock %}
</body>
Hope this helps a bit, good luck!
Related
I already searched the forum for this (for example: HTML/CSS: Foundation stylesheet wont link) , but there was no answer which helped for my case.
I downloaded the current version of Foundation here:
https://foundation.zurb.com/sites/download.html/
Then I put it into my project folder and made a link to it inside my index.html. The link looks like this:
<link rel="stylesheet" href="Foundation/css/foundation.css">
Other links to external sources worked.
So I tried out the implementation and copypasted some code from foundations examples, this one:
<div class="card-info info">
<div class="card-info-label">
<div class="card-info-label-text">
FYI
</div>
</div>
<div class="card-info-content">
<h3 class="lead">Chappie</h3>
<p>In the near future, crime is patrolled by a mechanized police
force. When one police droid, Chappie, is stolen and given new
programming, he becomes the first robot with the ability to think
and feel for himself.</p>
</div>
</div>
However, nothing happens. I just get the strings outputted without any styling, so I guess that the link doesnt work.
My site is running on angular, could this pose an issue? And if so, why does the other link work but this one not?
For building blocks to work you have to copy the SCSS / CSS content from the bottom, which you need additionally to the foundation.css file.
I've been stuck for the past few hours trying to figure out why the core Polymer elements are not being displayed properly in a Django application I'm making to act as a personal webpage. The application at the moment just points to an index.html page which, if you follow the tutorial on Polymer, is up to step one.
However, the components are not loading on my page. The static files are all set up correctly, and there's subtle animation from the css files being loaded correctly, but the Roboto font and the core-elements are not being displayed. Running the site as a normal HTML file does everything correctly.
Is there a specific way to user Polymer in a Django template?
Thanks.
See Eric's answer to this on the polymer-dev mailing list: https://groups.google.com/forum/?fromgroups=#!searchin/polymer-dev/django/polymer-dev/N2R8qknalOI/58ZhC1gWFh4J
Relevant excerpt:
Django 1.5 has support for the verbatim tag. You can wrap your inlined element definitions in that:
https://docs.djangoproject.com/en/1.5/ref/templates/builtins/#verbatim
Example code snippet:
{% verbatim %}
<template repeat="{{item as items}}">
<my-element name="{{item.name}}"></my-element>
</template>
{% endverbatim %}
<script>
document.querySelector("template').model = {{items}}; // items here is filled by the server's template.
</script>
I'm pretty sure this has to do with the fact that Django uses the same {{}} in its templates as Polymer.
I'm adding this answer as a compliment to the already accepted answer.
You can force django to require a space for it's template tags. So for any django template tags you have to use {{ variable }} and for polymer you will use {{variable}}.
Here is a very simple module/app I created to "prepare" django for use alongside polymer.
https://github.com/andrewebdev/django-ostinato/blob/2c435dea23319be6e9011e7381afca2b4092b5a2/ostinato/polyprep/init.py
Credit goes to https://github.com/nebrybledu for this suggestion.
I need to grab four html fragments from an external web site and display them within my django site's header and footer. I definitely need to cache these for some period of time.
My initial thought was to use urllib2 to read the http and then write the html to files to my server. Implemented through a Django context processor, the code checks the timestamps of the four files and retrieves updated versions if necessary before reading them into template variables.
I appear to be maxing out Django's template variable size for one of the four files. This forced me to use readlines() and to pass that file into the template as an array.
Is there a more elegant way to retrieve four html fragments from an external site, cache them and pass them to my templates?
Here's what my base.html template looks like now:
{{ integration_prehead|safe }}
<head>
{{integration_head|safe }}
...
</head>
{% for l in integration_topper %}{{ l|safe }}{% endfor %}
{{ block content }}{{ endblock content }}
{{ integration_footer|safe }}
The prehead.html isn't much of anything other than the doctype and opening html tag. The head.html is a bunch of javascript and stylesheets. The topper.html and the footer.html are the biggest pieces and they're the top and bottom of the pages. The topper, in particular, can change every 15 minutes so it's not practical to hard-code it on my templates.
Topper is 39k and too big to read into a single Django template variable, hence the for loop.
If you have any control over the server you're pulling the fragments from, your best bet is to set up dedicated views that return just the fragments and not the entire HTML document.
You can then use Django views to either manually save the fragments to disk or use Django's Cache framework. The cache framework will be much more robust and provide additional means of storage such as via database or memcached, but it's not guaranteed to store the fragment for a defined period of time. For example, memcached will lose everything if the server has to be restarted.
If the source server is not in your control, I'd highly recommend that you run the document through an HTML parser first, and pull out and pass in to your template only the pieces that your need. BeautifulSoup is a nice one for python.
I am using Komodo Edit 5.2 for editing html and Django template files. It always shows a single syntax error inside the first {% block %} area on the first tag of my template.
For example:
{% extends "base.html" %}
{% load i18n %}
{% block title %}Hello{% endblock %}
{% block content %}
<p>Hello</p> <-- Syntax error on this single line
<p>Other lines have no errors</p>
{% endblock %}
{% block footer %}
<p>No errors here</p>
{% endblock %}
The syntax error given is:
Info: <head> previously mentioned
I know for a fact that the error has nothing to do with my <head> tag since it occurs in the base template and in child templates (and the IDE isn't smart enough to process the base templates when in a child, etc.) All of my html tags are closed properly and everything validates for XHTML strict.
This forum post mentions a similar problem but offers no solution (and may be specific to Smarty syntax highlighting).
Any ideas on how to resolve this error (or disable it from being shown)?
Yes, this can be fixed, but it's really rather ugly a method.
I should point out this is a bug that's in the tracker #77251 (edit: this is fixed in Komodo 6.1.0). You could watch that bug to find when it actually gets fixed.
As for stopping the red squiggly lines -- You can do this by editing the python language file for Django template HTML manually. The file you want to edit is koDjango_URL_Language.py, and can be found in ..ActiveState Komodo Edit 5\lib\mozilla\extensions\django_language#ActiveState.com\components.
Add the following override method to class KoDjangoLanguage:
def get_linter(self):
return None
Note that this assumes you are saving your django template files as .django.html (which on a side note if you have not, doing so provides template-tag syntax coloring, which is kinda nice). After editing the file, save, and reload Komodo and the problem should go away.
From what I understand this file needs to be re-edited whenever you upgrade versions of Komodo as well. Hopefully we'll see sooner than later this whole issue get fixed and better all around support for Django in everyone's favorite IDE's.
If you're predominantly working on Django projects, you can change Komodo's default handling of *.html files by editing Preferences > File Associations and changing the association for *.html to "Django" (eg, as it usually is for *.django.html). This will save you having to rename all your template files.
To get rid of the squiggly red line, I use a custom Tidy config file, which can be specified under Preferences > Languages > HTML in the Configuration File chooser. The contents of this file are simply:
show-warnings: n
It's a bit of a hack, since it will be suppressing legitimate HTML warnings too. Until Komodo/Tidy natively supports the Django template tags however, it works for me.
If you're looking for a way of just hiding the squigly lines, rather than fiddling with the HTML Tidy configuration, try the following. In Preferences>Fonts and Colors, select the 'Indicators' tab. In the indicator selector there is an entry named 'Linter error'. Assign the style 'hidden' to it, and the squigly lines will be hidden. The statusline will still display the linter information. This is tested on Komodo Edit 5.2.4 on Linux.
As with renaming your templates files to *.django.html and using generic views you might run into TemplateDoesNotExist exceptions since django only looks for *_list.html and such as far as i'm concerned.
edit: Furthermore when renaming all templates don't forget to rename all
{% extends *.html %} to {% extends *.django.html %} appropriately.
I always disable HTML error checking when editing Django templates, as they're not wholly valid HTML as you may well have realised. I'm not sure if this can be done for Komodo Edit, but I know it can be done for Komodo IDE, so one might assume they're similar in this respect. Anyway, so the solution is a little annoying I'm afraid; you'll need to disable it for each file you edit (I don't know how to do this globally)...
I'm not on my work PC right now, but if memory serves me, there's an icon at the bottom of the window frame which you can right click to edit properties. Buried deep in there there should be an option to disable HTML syntax checking.
If you can't find the option then let me know and I'll try to fill in the gaps.
Lets say we want a library of javascript-based pieces of functionality (I'm thinking jquery):
For example:
an ajax dialog
a date picker
a form validator
a sliding menu bar
an accordian thingy
There are four pieces of code for each: some Python, CSS, JS, & HTML.
What is the best way to arrange all these pieces so that:
each javascript 'module' can be neatly reused by different views
the four bits of code that make up the completed function stay together
the css/js/html parts appear in their correct places in the response
common dependencies between modules are not repeated (eg: a javascript file in common)
x--------------
It would be nice if, or is there some way to ensure that, when called from a templatetag, the templates respected the {% block %} directives. Thus one could create a single template with a block each for CSS, HTML, and JS, in a single file. Invoke that via a templatetag which is called from the template of whichever view wants it. That make any sense. Can that be done some way already? My templatetag templates seem to ignore the {% block %} directives.
x--------------
There's some very relevant gasbagging about putting such media in forms here http://docs.djangoproject.com/en/dev/topics/forms/media/ which probably apply to the form validator and date picker examples.
Been a while since I posted this problem. What I've been doing to solve it is:
write the javascript parts you need as a library which is served statically
call the routines in the static library from the template with your server side values
Restraint is required to write it in such a way that it acts as a client side script only; don't be tempted to try and inject values from the server at the time of serving the js. Ultimately I've found it less confusing to apply server side variables strictly in the html template.
In this way I'm able to:
keep the javascript selectors on html tags inside the same file (ie: the template)
avoid templatetags altogether
re-use each javascript library in different places, and
keep the css/js/html pieces in all the places where they're expected to be found
It's not perfect, but it's getting me by till a neater idea comes along.
For example a js library in "media/js/alertlib.js" might include:
function click_alert(selector, msg){
$(selector).click(function(){ alert(msg) })
}
and the template has:
<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
click_alert('#clickme', {% message %})
</script>
<div id='clickme'>Click Me</div>
If more than one page uses a given JS file you should consider concatenating all of them together and minifying the result. This reduces net connects which will improve overall page load time. Don't forget to bump your expire time out to at least a week or two.
Have a look at Django Sekizai that has been created for just that purpose.
I think you are going to have a hard time keeping all four pieces together and applying them in a fell swoop - simply because some appear in your <head> tags and others in the <body> tags.
What have done is made sure that jQuery is loaded for all pages on my base.html (as well as my base css file) ... then, I have block tags for {% block css %} and {% block js %}. Templates that inherit the base.html file can supply their own javascript and css (and only the stuff that is needed).
I have created some template tags that create ajax functions whose output is based on the object being displayed (for example, including the object_id) -- which cuts down on re-coding.
One thing I haven't tried but am interested in is django-compress.