I had stuck in static files.
When I tried to {% load staticfiles %} in my main template (e.x. {% static "main.js" %}), it works great in main.html template.
But when I tried to extend main.html template by detail.html template, and put there another static file (e.x. {% staticfiles 'fancybox.js' %}), it displays only
<script type="text/javascript" src="static/main.js"></script>
instead
<script type="text/javascript" src="static/main.js"></script>
<script type="text/javascript" src="static/fancybox.js"></script>
in my detail.html.
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
{% load staticfiles %}
<script type="text/javascript" src="{% static 'main.js' %}"></script>
</head>
<body>
{% block content %}
<!-- SOME CONTENT -->
{% endblock %}
</body>
</html>
detail.html:
{% extends 'layout/main.html' %}
{% load staticfiles %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
{% block title %}
<!-- SOME CONTENT -->
{% endblock %}
Can somebody help me with solution?
Thanks mates.
When you extend a template you need to make sure all of the code in the child template is inside a block. So for your main template typically you do something like:
main.html
{% load staticfiles %} <!-- This should go at the top for readability -->
<!-- Load any site wide JS here -->
<script type="text/javascript" src="{% static 'main.js' %}"></script>
{% block js %}<!-- Put JS in here for extended templates -->{% endblock %}
detail.html
{% extends 'layout/main.html' %}
{% load staticfiles %}
{% block js %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
{% endblock %}
{% block title %}
<!-- SOME CONTENT -->
{% endblock %}
{% extends 'layout/main.html' %}
{% block title %}
{% load staticfiles %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
<!-- SOME CONTENT -->
{% endblock %}
use this code in details.html.You have to put {% block body%}
at the top just after the extend or include statement
Related
I'm trying to load block for CSS in Django. However for some reason it doesn't work.
my template :
{% extends 'main/base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'main/style.css' %}">
{% endblock %}
{% block title %}Some Title{% endblock %}
{% block content %}
Some Content
{% endblock %}
And below is the upper part of base.html file
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This line below is the base styling, whereas the css file I'm trying to load is a specific styling for a specific page. -->
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block css %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
I have the right css file at the right directory, but it is not reflected at all.
I don't see what I've done wrong. I would very much appreciate your help. :)
I am using Django, I am trying to display the image but I am getting the error.
Invalid block tag on line 35: 'static', expected 'endblock'. Did you
forget to register or load this tag?
If I added my image directly on index.html page then the image is displaying but when I am using extends and block to display then I am getting the error.
setting.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
index.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
You missed the open { in your home-page
{% extends 'demo1/index.html' %}
{% load static %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
NOTE
Django documentation prefers now {% load static %}.
{% load staticfiles %} works but I think it is deprecated.
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#static
Update:
From the Django docs:
The include tag should be considered as an implementation of "render
this subtemplate and include the HTML", not as "parse this subtemplate
and include its contents as if it were part of the parent". This means
that there is no shared state between included templates -- each
include is a completely independent rendering process.
Therefore please also load the static file in your home-page too
Do just {% load static %} on top of your home.html template.
You are missing a brace in your home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
% endblock %}
should be
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
I am trying to make a base.html template and inserting a css file in the header. in the page it includes all the styling by it does not do any styling when the link the other page is pressed.
I have two files extending base.html one color_choose.html the other statistics.html which have the exact same lines for linking files. color_choose.html works and it is the first page that opens when navigated and the other is statistics.html
here is the base.html:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ColorStore</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% block styles %} {%endblock%}
</head>
<body>
<div id="ColorFavor">
<div style="float: right;">
<h2 id="title" class="page-name">Color Picker</h2>
</div>
</div>
{% block navigation %}
{% endblock %}
{% block display %}
{% endblock %}
{% block modal %}
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>
here is the urls.py in the app file:
from django.urls import path
from . import views
urlpatterns = [
path('', views.ColorPageView.as_view(), name='color'),
path('statistics/',views.StatsPageView.as_view(), name='statistics'),
this is the file css is applied and is also the same text in the other file:
{% extends 'base.html' %}
{% block styles %}
<link rel="stylesheet" href="static/styles/main.css" type="text/css">
{% endblock %}
And this is the part in the settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
If I am missing anything I will edit this post as soon as possible, just leave a comment for it.
You are missing a slash '/' before 'static/...'
<link rel="stylesheet" href="/static/styles/main.css" type="text/css">
Your template should have {% load static %} and you should refer to the stylesheet either as /static/styles/main.css or (preferably) you should use the macro "{% static styles/main.css %}"
See the django doc here.
Probably a super easy thing to tackle but I have a template for a web page and that template has some common CSS that is linked at the surface.
<html>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
....
*navbar code in body
{%block content%}{%endblock%}
</html>
for any extending html pages they will have this layout plus some other personalized css. How can I add more custom CSS from a static folder without overriding the current CSS?
{% extends "template.html" %}
{% load static %}
?Insert custom css for the specific page?
{% block content %}
*CONTENT*
{%blockend%}
Use template blocks (https://docs.djangoproject.com/en/1.7/topics/templates/).
Base template (template.html):
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
{% block extra_css %}{% endblock %}
</head>
...
Child template:
{% extends "template.html" %}
{% load static %}
{% block extra_css %}
<!-- Specific template css here -->
<link rel="stylesheet" type="text/css" href="{% static 'css/another.css' %}">
{% endblock %}
I'm trying to create a custom widget(named Status) with django-dashing.
This custom widget is 99% copy-paste from libs own NumberWidget.
I have js, html and css files in status/widgets/status and initiated in dashing-config.js
in the browser console(Chrome) i get following message: "widget Status does not exist". So i have created my own {templates}dashing/dashing.html and loaded css/js files manually. Now i have placeholder for the widget, no error messages in console and i see successfull ajax requests, but the widget body is empty.
So widgets html file is not loaded, but why?
After reverse engineering of Dashing.utils.js i found out that example dashboard.html from the docs is incomplete and templates block is missing. So full dashboard.html should be like:
{% extends 'dashing/base.html' %}
{% load staticfiles %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'widgets/status/status.css' %}">
{% endblock %}
{% block templates %}
<link rel="resource" type="text/html" href="{% static 'widgets/status/status.html' %}" data-widget="status">
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{% static 'widgets/status/status.js' %}"></script>
{% endblock %}
{% block config_file %}
<script type="text/javascript" src="{% static 'dashing-config.js' %}"></script>
{% endblock %}