I need to make an app where i have the ready made standalone html templates avaialbe in my
app/ready_templates/template1
Now i have made an view where i display the name , thumbnail of that template to show to users
But there is demo link there which i want tthem to see the whole template.
basically if they click on demo then i want to redirect them to
template1/index.html so they can see all the templates images , js etc without linking anything to django views
So your requirement seems pretty straightforward. You can do this using the static files feature in Django. Basically whenever you have a bunch of static content like html, css, js images you put it in a folder in your app called static. For example the admin app that ships with Django has all it's static content in django/contrib/admin/static. Then you could place something simple like the below into your django template to link to the static content. You of course don't have to hard code each name like template1 you could have it dynamically generated in your django template.
{% load static from staticfiles %}
<a href="{% static "template1/index.html" %}" />template1</a>
Related
So I have created a project which has its frontend in angularjs and backend in Django rest framework. now I have created a django login page which should authorize all other angular pages.
so how can we extend the base.html in angularjs pages with static files.
my tree structure is as follows:
project
|
|
application
templates
manage.py
project
|
settings.py
urls.py
public
|
static
html files
Hope to get answer to this.
thanks
I suggest the following.
In you templates folder add a file base.html. In this file import all css and js files. The base.html will have the ng-app, ng-view (or whatever your are using). For example:
<html ng-app="raceApp">
.
.
<div>
<nav-bar></nav-bar>
<section ng-view autoscroll="true">
</section>
</div>
</html>
Then in the static files you could have a folder static/js will all the angular files. Inside this folder (js) you should follow a structure based on the way you are writing angular. For example i am using components (totally recommend) so each folder represents a different component.
/static/js/user-login/
/static/js/user-login/user-login.component.js
/static/js/user-login/user-login.module.js
/static/js/user-login/user-login.services.js
/static/js/user-login/user-login.template.html
I'm just starting out with Flask, and I was wondering what the best method for
dealing with how flask deals with static files when trying to use a premade CSS template.
Basically, I have downloaded a CSS template that I liked off the internet, but when if I simply drag the files into my flask application folder the CSS, JS, and image files do not work since they are not located in the static folder.
But if I move all the static files into the static folder, then I have to go through all the code and change the link urls, which is very time consuming.
The CSS Template I am using has an index.html that uses links like
<link rel = "stylesheet" href = "css/style.css" >
I have set both the static_folder = ""
and the static_url_path = "" in my flask app and I have moved the css, js, and image folders from the downloaded template into the base folder for the application, but the links are still not working.
Is there a better way to deal with using premade CSS templates with flask? Can I override the need to put css and js and image files in the static folder somehow? Thanks for your help!
(Sorry for opening this old post, but I'm on a badge hunt :])
There are several possible solutions, but the one I would recommend is to move the file style.css to folder <server_root>/static/css/.
Then create the flask app like app = Flask(__name__, static_url_path=''), what means that it still serves static files from the static/ folder, but on path / (so <server_root>/static/css/style.css is served on /css/style.css).
With this setup, your links href="/css/style.css" will work.
However, it's strongly recommended to use flask.url_for('endpoint', param='value') instead of /endpoint/url/value both in code and templates (surrounded with {{ ... }}) for all URLs - static files ('static', filename='css/style.css') and your own endpoints. So if your endpoint looks like this,
#app.route('/some/path/<variable>')
def some_endpoint(variable):
# do something and return response...
... you can use url_for('some_endpoint, variable='something') no matter what the actual URL (/some/path/something/ in this case) is. (Tested python 3.6.7; flask 1.0.2)
I could load css file on Django html like this
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/style.css" %}">
I wonder why I can't load css file that is under templates folder.
<link rel="stylesheet" href="css/style.css">
Is there a way to load file that is under templates folder on Django HTML?
Why does Django wants me to put {% static "css/style.css" %} this format on all static files? Is it because much faster to load?
What If I load file that is under templates folder? Is it slow to load?
Templates and static assets are two differents types of assets that need to be managed differently for security purposes.
All js, css and images files need to be provided to clients in order for your website to be working. They are handled from the client side so they need to be available. So static asset folder is made to be available, if you check view source and follow the link of these assets you'll see they can be opened directly in your broswer.
Templates however are used by django itself to generate the output that is set via your views. When a user opens a page, he doesn't access the template itself but the rendering made by django. So the template folder isn't accessible to end user by design, including the files that are in it. So the only things a user can access from a django application are the responses given by the views, that are based on urls patterns and the templates, and assets that are in static folder. So you can't, and shouldn't, link to static assets from anywhere else but your static folder.
As I can see it, you have missed the concept of the templates and the static files in Django.
First of all, there are two independent mechanisms: loading a template file (your future HTML file) and loading your static files (css, js, images).
When loading a template Django uses TEMPLATE_LOADERS (docs), which are basically defined in your settings.py as:
TEMPLATE_LOADERS = (
# Loads templates from DIRS setting:
'django.template.loaders.filesystem.Loader',
# Loads templates from your installed apps:
'django.template.loaders.app_directories.Loader',
)
You can define a location of yout templates by setting DIRS (if you are using Django >= 1.8) or TEMPLATE_DIR (if Django < 1.8). There are several more steps in rendering your template such as: template context processors and so on, but it is all listed in the documentation.
Now about static files.
Static files are served by django.contrib.staticfiles app (docs) when DEBUG = True. In production it is done by Nginx, Apache or other Http-Servers.
When loading a static file Django uses STATICFILES_FINDERS. They are usially defined as:
STATICFILES_FINDERS = (
# Loads static files from STATICFILES_DIRS:
"django.contrib.staticfiles.finders.FileSystemFinder",
# Load static files from installed apps:
"django.contrib.staticfiles.finders.AppDirectoriesFinder"
)
There are two main settings to care about: STATIC_URL and STATICFILES_DIRS.
STATIC_URL is basically just a prefix, which is used to get your static files. It is almost always just '/static/'. And in STATICFILES_DIRS there are paths to your static files folders. It is sometimes extended to include node_modules, bower_components or things like that.
When dealing with static files in templates you need to append your STATIC_URL to your file's URL. The easiest way to do that is {% static %} tag.
A lot of confusion comes with STATIC_ROOT. It is just a path, where all your static files will be collected in production after running collectstatic management command.
I want to allow loading file as from local as from external locations.
# template
{% static url %}
If url is http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js I have in html this:
/static/http%3A//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
but if url is //ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js I have proper link:
//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
Why? How can I avoid /static/http%3A/?
Well you don't want to use the static tag for files hosted outside of your project. Just link that on your template like you would normally with a <script src="... type thing.
Click here for the Django Documentation on this topic
So that would be, in your HTML template, in the tag you could put
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
If what you're saying is you want to be able to change the URL dynamically or through some settings file, then you could do.
<script src="{{ url }}"></script>
I suppose that makes sense doesn't it. You need to urlencode the resources that you are loading. These are resources that you need to serve for your website . For resources outside which you are refering through http are outside your app. Why can't you simply use simple html for that
Overriding admin templates is as easy as creating a folder admin in your templates directory and copying whatever template files you'd like to override into it. I simply want to play with the admin style sheets however, so I made a folder admin in my static files folder and put css/base.css into it. Unlike the templates solution, this doesn't seem to work.
So is there any way to override individual css files for django.contrib.admin in the same way that you can override templates? If nay, what would be the best solution for overriding css files? I'm looking for a solution short of copying all the admin media files into my project and changing admin's static directory
What I'm doing to achieve that is to override base_site.html template like this:
{% block blockbots %}
<link rel="stylesheet" type="text/css" href="/media/css/my_admin.css" />
{{ block.super }}
{% endblock %}
I put the CSS in blockbotsinstead of extrahead to be sure that is loaded at the end, so it will override all others CSS.
I'm looking for a solution short of copying all the admin media files into my project and changing admin's static directory
I don't think there is really an alternative. You copy the media files into a new directory and while you start the server pass the adminmedia command line argument, like
python manage.py runserver --adminmedia=./myadminmedia
In any case, when you run it on production server, the admin media has to be served from a good static serving server, for which, you can point this new path.
Reference from the Docs: https://docs.djangoproject.com/en/1.3/ref/django-admin/#django-admin-option---adminmedia
Probably you can hack your urls.py file and point only a single media URL to be served from a local folder while the others are served from the Django directory(in development mode).