It's giving me an error: NoReverseMatch at / targeting the base.html file (shown in the pic).But the base.html file looks fine to me.
Base.html
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blog</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Medium Style editor -->
<script src="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One&display=swap" rel="stylesheet">
</head>
<body class="loader">
<!-- Navbar -->
<nav class="navbar custom-navbar techfont navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Blog</a></li>
<li>About</li>
<li>GitHub</li>
<li>LinkedIn</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li> <a href="{% url 'post_new' %}" >New Post</a></li>
<li> <a href="{% url 'post_draft_list' %}" >Drafts</a></li>
<li> <a href="{% url 'logout' %}" >Logout</a></li>
<li> Welcome: {{user.username}} </li>
{% else %}
<li> <span class="glyphicon glyphicon-user"></span> </li>
{% endif %}
</ul>
</div>
</nav>
<!-- COntent Block -->
<div class="content container">
<div class="row">
<div class="col-md-8">
<div class="blog-posts">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</html>
Post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<h1 class="posttitle loader">{{post.title}}</h1>
{% if post.published_date %}
<div class="date postdate">
{{post.published_date}}
</div>
{% else %}
Publish
{% endif %}
<p class="postcontent">{{post.text|safe|linebreaksbr}}</p>
{% if user.is_authenticated %}
<a href="{% url 'post_edit' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{% url 'post_remove' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<hr>
Add Comment
<div class="container">
{% for comment in post.comments.all %}
<br>
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.create_date }}
{% if not comment.approved_comment %}
<a href="{% url 'comment_approve' pk=comment.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-ok"></span>
</a>
<a href="{% url 'comment_remove' pk=comment.pk %}" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<p>{{comment.text|safe|linebreaks}}</p>
<p>Posted by: {{comment.author}}</p>
{% endif %}
{% empty %}
<p>No comments!</p>
{% endfor %}
</div>
{% endblock %}
Post_list.html (The very first page that's supposed to be open on running the server)
{% extends 'blog/base.html' %}
{% block content %}
<div class="centerstage">
{% for post in post_list %}
<div class="post">
<h1>{{post.title}}</h1>
<div class="date">
<p>Published on: {{post.published_date|date:'D M Y'}}</p>
</div>
Comments: {{ post.approve_comments.count }}
</div>
{% endfor %}
</div>
{% endblock %}
urls.py
Blog.urls
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$',views.PostListView.as_view(),name='post_list'),
url(r'^about/$',views.AboutView.as_view(),name='about'),
url(r'^post/(?P<pk>\d+)/$',views.PostDetailView.as_view(),name='post_detail'),
url(r'^post/new/$',views.CreatePostView.as_view(),name='post_new'),
url(r'^post/(?P<pk>\d+)/edit/$',views.PostUpdateView.as_view(),name='post_edit'),
url(r'^post/(?P<pk>\d+)/remove/$',views.PostDeleteView.as_view(),name='post_remove'),
url(r'^drafts/$',views.DraftListView.as_view(),name='post_draft_list'),
url(r'^post/(?P<pk>\d+)/comment/$',views.add_comment_to_post,name='add_comment_to_post'),
url(r'^comment/(?P<pk>\d+)/approve/$',views.comment_approve,name='comment_approve'),
url(r'^comment/(?P<pk>\d+)/remove/$',views.comment_remove,name='comment_remove'),
url(r'^post/(?P<pk>\d+)/publish/$',views.post_publish,name='post_publish'),
]
Didn't receive this error before. Came all of a sudden. Clueless as to what went wrong. How to tackle this?
the problem is in post_list.html or post_detail.html .
basically you are having the url that is not matches with any urls in urls.py
ie({% url 'post_detail' pk=post.pk %})
so check your post_list.html and post_detail.html your base.html is well and good
The same error i was facing i looked to my firstly rendered page and the extra url was there.
As it says in the error message, the blog url with arguments {'pk: ''} is not found. This basically means that on the page where you're doing "{% url 'post_detail' pk=post.pk %}", post is probably None or not an object you're expecting. You need to check that your {% for post in post_list %} actually returns posts.
Related
Iam New To Django : i Made a Simple Website Following Python Crash Course Book , iam getting this Error and i can't find The Problem ,
Here is the error:
Here is the login.html :
{% extends "learning_logs/base.html" %} {% load bootstrap4 %} {% block
page_header %}
<h2>Log in to your account</h2>
{% endblock page_header %} {% block content %}
<form method="post" action="{% url 'users:login' %}" class="form">
{% csrf_token %} {% bootstrap_form form %} {% buttons %}
<button name="submit" class="btn btn-primary">Log in</button>
{% endbuttons %}
<button name="submit">Log in</button>
<input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}
And here is base.html that login extends:
{% load bootstrap4 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning Log</title>
{% bootstrap_css %} {% bootstrap_javascript jquery='full' %}
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" tag="a" href="{% url 'learning_logs:index' %}">
Learning Log</a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'learning_logs:topics' %}"
>Topics</a
>
</li>
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-texxt">Hello,{{user.username}}</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:register'%}">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login'%}">Log in</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %} {% endblock page_header %}
</div>
<div>{% block content %} {% endblock content %}</div>
</main>
</body>
</html>
i tried looking for any syntax writing like answered questions here did like leaving epty space between { and % but i couldn't find anything helpful ,
Try to remove the line break in the end of line 1.
I mean, you should replace
{% extends "learning_logs/base.html "%} {% load bootstrap4 %} {% block
page_header %}
with
{% extends "learning_logs/base.html "%} {% load bootstrap4 %} {% block page_header %}
Replace
{% endblock page_header %}
To
{% endblock %}
And apply this to your other end blocks
it was a Problem with Preetier Code Formatter Every time i save the could would Go wrong , So i Changed To Default Html Formatter, Hope this helps Someone in the Future as it's quite hidden
It was working before I deleted and recreated my database, I have no idea why it's no longer working, I've ensured that show in menus is checked under the promote panel.
base.html
{% load static wagtailuserbar %}
{% load wagtailcore_tags %}
{% load menu_tags %}
<!DOCTYPE html>
<html class="no-js" lang="en" content="text/html">
<head>
<meta charset="utf-8" />
<title>
{% block title %}
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% with self.get_site.site_name as site_name %}
{% if site_name %}- {{ site_name }}{% endif %}
{% endwith %}
{% endblock %}
</title>
<meta name="description" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% load static wagtailsettings_tags %}
{% get_settings %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% main_menu max_levels=2 add_sub_menus_inline=True %}
</body>
</html>
templates/menus/main/menu.html
{% load menu_tags %}
<nav class="navbar fixed-top navbar-dark navbar-expand-lg navbar-lg"
role="navigation">
<div class="container">
<a class="navbar-brand" href="/">Title</a>
<button type="button" class="navbar-toggler text-white" data-toggle="collapse" data-target="#navbar-collapse-01">
<i class="fas fa-bars fa-1x"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav ml-auto text-white">
{% for item in menu_items %}
{% if item.sub_menu %}
<li class="nav-item dropdown {{item.active_class}}"><a class="nav-link dropdown-toggle" href="{{ item.href }}" data-toggle="dropdown">{{ item.text }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ item.href }}"><b>{{ item.text }}</b></a>
{% for sub_item in item.sub_menu.items %}
<a class="dropdown-item" href="{{ sub_item.href }}">{{ sub_item.text }}</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item {{item.active_class}}"><a class="nav-link" href="{{ item.href }}">{{ item.text }}</a>
{% endif %}
{% endfor %}
<li class="nav-link"><i class="fas fa-search" title="Search"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
No errors in the console, nothing. Again, I've triple-checked to ensure my pages are checked with "show in menus". Where else can I look? I know for sure the menu itself is loading in because the search icon shows up.
I'm running Django=3.1.2, Wagtail=2.11.3, and WagtailMenus=3.0.2
I do not see the closing tags, </head>, </body> in your base.html. Have you added them?
Because you said you have recreated the database, have you add the pages to Wagtail menu? Wagtail admin > Settings > Main menu?
Try editing the pages in question and checking whether the “Show in menus” checkbox is checked (found under the “Promote” tab by default).1
When I attempt to log in to my django website, I always get a 403 Forbidden CSRF cookie not set error. When viewed via developer tools, the CSRF token was in the form response, but there were no cookies. I have django.middleware.csrf.CsrfViewMiddleware in my middleware, and I am using the standard django.contrib.auth.views.LoginView.
Here is my template:
{% extends 'base/formbase.html' %}
{% block title %}Login{% endblock title %}
{% block menuid %}menu-login{% endblock menuid %}
{% block submitname %}Login{% endblock submitname %}
{% block extra %}
<div class="alert alert-danger">
Forgot Your Password?
</div>
<div class="alert alert-secondary">
Don't have an account? Sign Up!
</div>
{% endblock extra %}
base/formbase.html:
{% extends 'base/base.html' %}
{% load crispy_forms_tags %}
{% block body %}
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
<div class="card-body">
{% block form %}
<h2>{% block title %}{% endblock title %}</h2>
<form method="post" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary">{% block submitname %}{% endblock submitname %}
</button>
</form>
{% endblock form %}
</div>
{% block extra %}{% endblock extra %}
</div>
</div>
</div>
{% endblock body %}
base/base.html:
<!DOCTYPE html>
{% load base_extra %}
<html lang="en">
<head>
{% settings gamename "GAME_NAME" %}
<meta charset="UTF-8">
<title>{{ gamename }} - {% block title %}{% endblock title %}</title>
{% block head %}{% endblock head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% settings debug "DEBUG" %}
{% if debug %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
{% else %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
{% endif %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="{% url 'index' %}">{{ gamename }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="menu-home">
<a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="menu-gamelist">
<a class="nav-link" href="{% url 'game:game_list' %}">Game List</a>
</li>
<li class="nav-item" id="menu-leaderboard">
<a class="nav-link" href="{% url 'user_list' %}">Leaderboard</a>
</li>
{% if request.user.is_staff %}
<li class="nav-item" id="menu-admin">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
{% endif %}
</ul>
<!--
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
-->
<ul class="navbar-nav ml-auto">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ request.user }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'user' user.pk %}">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
</div>
</li>
<li class="nav-item">
<div class="nav-link">${{ request.user.gameinfo.money }}</div>
</li>
{% else %}
<li class="nav-item" id="menu-signup">
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
<li class="nav-item" id="menu-login">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="mx-3 mt-2">
<script>
try {
document.getElementById("{% block menuid %} {% endblock menuid %}").classList.add("active");
}
catch {}
</script>
{% block body %}
{% endblock body %}
</div>
</body>
</html>
Adding the #csrf_protect decorator does not solve the problem.
This may occur if you have CSRF_COOKIE_SECURE = True explanation in the docs Or if you have CSRF_COOKIE_HTTPONLY = True explanation or if you wish to just disable the csrf token you can add the #csrf_exempt decorator to the view
I am extending a template , and the two divs before the content block of container doesn't show in any of the ways, the only solution i found is to put this 2 divs in the child , but of course it will lose the sense using extend then.
Someone can tell me what I am missing?
Thanks in advance.
I have the following base template :
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- THIS 2 HERE DOESN'T APPEAR -->
<div class="page-header header-filter" style="background-image: url({% static "material/img/pic.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
The template that extends is the following :
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
Your block tags are nested, so when you override body in child you lose all the code inside body from base template, including that two divs. Override only content block in your child and place other code in block extra_body. If you need that code before content, add another block inside body in base template named like before_content and override it in child to place that load into it.
P. S. You have also lost your if messages code after overriding body in child template.
I leave here the code in case someone wants to see the solution with code in front of its eyes
Following approach of Alexandr
Solution 1 :
base.html
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content%}
{% endblock %}
</div>
</div>
{% block extra_body %}
{% endblock %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
Solution 2 :
Base.html
Taking into account the comment of #DisneylandSC , I try this and even though is kind of strange way to solve it , it does the job.
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content_top %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% endblock %}
{% block content_botton %}
</div>
</div>
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content_top %}
{{ block.super }}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block content_botton %}
{{ block.super }}
{% endblock %}
{% endblock %}
I'm quite new to Django and I have a problem that I cannot solve for a long time already. Would appreciate any hint!
The question is why does it find static files for base.html and cannot find it for login.html(they are even in the same directory)? Everything works fine, django manages to find template "index.html", which extends "base.html" and shows it with a nice bootstrap example. However, when I click login, and go to accounts/login (I use django-allauth), I get the error:
"GET /accounts/login/static/twitter_bootstrap/dist/css/bootstrap.css HTTP/1.1" 404 7044
"GET /accounts/login/static/twitter_bootstrap/dist/js/bootstrap.js HTTP/1.1" 404 7038
Thus, it doesn't load bootstrap and js.. I tried so many workarounds, debug shows that it points to correct path.. The processes of login/logout/etc. work fine.
What I want to do is to define in base.html that I want to use bootstrap files, and then simply extend this behavior to other templates as well. Can someone help, please?
My static files live in the project folder under static name.
-Project Dir
-static
-static
-twitter_bootstrap
-static-only
-media
-templates
-account
-base.html
-login.html
-signups(app name)
-index.html
settings.py
BASE_DIR = os.path.dirname(__file__)
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "static-only")
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "media")
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "static"),
)
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "templates"),
)
Base.html:
{% load url from future %}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
{% block headbootstrap %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Basic css -->
<link href="static/twitter_bootstrap/dist/css/bootstrap.css" rel="stylesheet">
{% endblock %}
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block header %}
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- Mobile Nav Button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- END Mobile Nav Button -->
<a class="navbar-brand" href="#">HumanPulse</a>
</div>
<!-- Navigation Links -->
<div class="collapse navbar-collapse">
{% if request.user.is_authenticated %}
<!—Show Home and News -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>News</li>
</ul>
{%else%}
<!—Show Dashboard and Data -->
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Data</li>
</ul>
{% endif %}
<!-- END Navigation Links -->
<form class="navbar-form navbar-right" role="form" method="post" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
{% if request.user.is_authenticated %}
<a class="btn btn-success" type="submit" href="/accounts/logout/" >Logout</a>
{% if request.user.first_name or request.user.last_name %}
{{ request.user.first_name }} {{ request.user.last_name }}
{% else %}
{{ request.user.username }}
{% endif %}
{% if request.user.profile.account_verified %} (verified) {% else %} (unverified) {% endif %}
{% else %}
<a class="btn btn-success" type="submit" href="/accounts/login/" >Login</a>
{% endif %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endblock %}
{% block body %}
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<div class="container">
{% block content %}
{% endblock %}
</div> <!-- /container -->
{% endblock %}
{% block extra_body %}
{% endblock %}
{% block footer %}
<footer>
<p>© Blog 2013</p>
</footer>
{% endblock %}
<script src="static/twitter_bootstrap/dist/js/bootstrap.js"></script>
index.html
{% extends 'account/base.html' %}
{% block head_title %}ProjectName{% endblock %}
{% block content %}
<p>Voila!</p>
{% endblock %}
login.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<div class="fb"></div>
{% include "socialaccount/snippets/login_extra.html" %}
<div class="inset">
<div class="header">Or sign in directly</div>
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
<input id="id_login" class="login-input" maxlength="30" name="login" placeholder="Username" type="text" />{{ form.login.errors }}<br>
<input id="id_password" class="login-input" name="password" placeholder="Password" type="password" />{{ form.password.errors }}<br>
<div class="remember-forgot-section">
<input id="id_remember" name="remember" type="checkbox" />
<label for="id_remember">Remember Me</label>
<a class="forgot" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button class="btn" type="submit">{% trans "Sign In" %}</button>
</form>
<div class="footnote">
Don't have an account? Login with Facebook above or Sign Up
</div>
</div>
{% endblock %}