In my models.py file I have defined StandardPage class to which I want to add transenter code herelations.In this class I have defined these:
class StandardPage(TranslatablePage,Page):
introduction = models.TextField(
help_text='Text to describe the page',
blank=True)
image = models.ForeignKey(
'wagtailimages.Image',
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name='+',
help_text='Landscape mode only; horizontal width between 1000px and 3000px.'
)
video_url = models.URLField(null=True,blank=True)
body = StreamField([
( 'main_content',blocks.ListBlock(BaseStreamBlock() ,label = 'content') )]
, blank=True,
null=True,
verbose_name="Page body" )
content_panels = Page.content_panels + [
FieldPanel('introduction', classname="full"),
StreamFieldPanel('body'),
ImageChooserPanel('image'),
FieldPanel('video_url'), ]
#property
def standard_page(self):
return self.get_parent().specific
def get_context(self, request):
language = request.LANGUAGE_CODE
standard_page = request.site.standard_page
pages = TranslatablePage.objects.live().filter(language__code=language).specific().child_of(standard_page)
context['pages'] = self.standard_page
return context
While template base.html contains:
{% load i18n %}
{% load wagtailtrans_tags wagtailcore_tags wagtailuserbar %}
{% load static %}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>
{% block title_suffix %}
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">
<link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}" type="text/css" rel="stylesheet" />
<link href="{% static 'css/streamfields.css' %}" type="text/css" rel="stylesheet" />
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %}
{% get_translations page homepage_fallback=False include_self=False as translations %}
{% for language, page in translations.items %}
<link rel="alternate" href="{{ page.full_url }}" hreflang="{{ language.code }}">
{% endfor %}
{% block content %}
{% endblock %}
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery-2.2.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
</body>
</html>
and my template 'standard_page.html' contains:
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content%}
{% include "base/include/header.html" %}
<div class="container">
<div class="row">
<div class="col-md-7">
{{ page.body }}
</div>
</div>
</div>
{% endblock %}
Not rendering content on the page.It's showing Welcome to your new Wagtail site! even though I published all the languages of a particular page.But the title of the page is displaying in different languages mentioned
I am new to django & wagtail. How to rectify this, not getting.
Any help?
Related
My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.
table_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}
menu_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded.
How do I include only a specific block from specific template?
Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.
For example with this base:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>
And this child:
{% extends "base.html" %}
The result will be:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>
With this child template:
{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}
The result is:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>
Now specific to your problem:
if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
if each sidebar is different for each page, don't bother with include and just override the slot
Following is my homepage.html is home app
{% extends "base.html" %}
{% load static %}
<link rel = "stylesheet" href = "{% static 'css/home.css' %}" > #reference to stylesheet in the home app static directory
{% block body %}
<h1>I am homepage</h1>
{% endblock %}
My base.html in the project root folder is the following
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{% static 'base.css' %}" > #stylesheet in root folder
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
But here, the home.css in the homepage.html is not functional as the base.html on extend closes the head before the home.css can come in the head section.
Is there any way I can add the CSS into the header
Thanks
You just need another block.
In base.html:
<head>
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block extrahead %}{% endblock %}
</head>
...
and in homepage.html:
{% extends "base.html" %}
{% load static %}
{% block extrahead %}<link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}
...
I put a file named password_reset_confirm.html in my Django project's templates/registration/ directory. But if I change the extends tag it won't load anything else. This template loads when a user clicks a password reset link from their email inbox.
Here's what my password_reset_confirm.html looks like:
{% extends "admin/base_site.html" %}
{% load i18n %}
{% block breadcrumbs %}
<div class="breadcrumbs">
{% trans 'Home' %}
› {% trans 'Password reset confirmation' %}
</div>
{% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}
{% block content %}
THIS IS A CUSTOM FILE; I ONLY ADDED THIS SENTENCE.
{% if validlink %}
<p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>
<form method="post">{% csrf_token %}
{{ form.new_password1.errors }}
<p class="aligned wide"><label for="id_new_password1">{% trans 'New password:' %}</label>{{ form.new_password1 }}</p>
{{ form.new_password2.errors }}
<p class="aligned wide"><label for="id_new_password2">{% trans 'Confirm password:' %}</label>{{ form.new_password2 }}</p>
<p><input type="submit" value="{% trans 'Change my password' %}" /></p>
</form>
{% else %}
<p>{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</p>
{% endif %}
{% endblock %}
I want to change the first two lines to this:
{% extends "base.html" %}
{% load i18n mezzanine_tags staticfiles %}
But when I do that, nothing below those lines loads. What do I need to change so that the template loads my base.html as well as the password reset form?
EDIT: By request, here is my base.html:
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
{% load pages_tags mezzanine_tags i18n staticfiles %}
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{% block meta_keywords %}{% endblock %}">
<meta name="description" content="{% block meta_description %}{% endblock %}">
<title>{% block meta_title %}{% endblock %}{% if settings.SITE_TITLE %} | {{ settings.SITE_TITLE }}{% endif %}</title>
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
{% ifinstalled mezzanine.blog %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{% url "blog_post_feed" "rss" %}">
<link rel="alternate" type="application/atom+xml" title="Atom" href="{% url "blog_post_feed" "atom" %}">
{% endifinstalled %}
{% compress css %}
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
{% ifinstalled cartridge.shop %}
<link rel="stylesheet" href="{% static "css/cartridge.css" %}">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{% static "css/cartridge.rtl.css" %}">
{% endif %}
{% endifinstalled %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{% static "css/custom.css" %}">
{% block extra_css %}{% endblock %}
{% endcompress %}
{% compress js %}
<script src="https://js.stripe.com/v3/"></script>
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
{% block extra_js %}{% endblock %}
{% endcompress %}
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}"></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
{% block extra_head %}{% endblock %}
</head>
<body id="{% block body_id %}body{% endblock %}">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">{{ settings.SITE_TITLE }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
{% page_menu "menus/dropdown.html" %}
</div>
</div>
</nav>
<!-- Page Content -->
{% block main %}
{% endblock %}
<!-- /.container -->
{% block footer_js %}
{% include "includes/footer_scripts.html" %}
{% endblock %}
</body>
</html>
I've 2 templates. Here is the listing:
1)base.html
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id=header> some info </div>
{% block content %}{% endblock %}
</body>
</html>
2)person.html
{% extends "base.html" %}
{% block title %}Personal info{% endblock %}
{% block content %}
<div>{{person.first_name}}</div>
{% endblock %}
I use template "person.html" in my view
def person_view(request):
person = get_object_or_404(Person, pk=1)
return render(request, "resume/person.html", {'person': person})
urls.py:
url(r'^$', views.person_view, name='person'),
The problem is, when I run the server, and trying to open page with this url, there is only text and information from "person.html" template(meaning of "person.first_name"). Information from "base.html" and css styles don't used.
You forgot double quotes:
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
should be:
<link type="text/css" rel="stylesheet" href="{% static 'resume/stylesheet.css'%}"/>
Edit
here as well:
<div id=header>
should be:
<div id="header">
Edit: Please do not be mislead by this question, It was my fault that my changes where not working out. I happen to have to projects that are named the same(not a smart idea) this confused everything, i was making changes in a different project from that i was working in. Sorry to the good stackoverflow folks that i mislead.
I have a base template public_base.html
<!doctype html>
<!-- [if IE ]> <html class="no-js"> <![endif] -->
<head>
<!-- favicon for web browser and smartphones -->
<link rel="icon" href="{{ STATIC_URL }}images/img.png" type="image/x-png">
<link rel="apple-touch-icon" href="{{ STATIC_URL }}img/apple-touch-icon.png">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Homenaje|Molengo' rel='stylesheet' type='text/css'>
<!-- CSS Section -->
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/impress.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/style.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/impression.css">
<title>{% block title %}F4L | Have it easy{% endblock %}</title>
</head>
<body lang="en">
<div id="container">
{% load smartmin %}
<div id="header"> <!-- Header -->
<div id="logo">
<a href="{% url homepage %}">
<img src="{{ STATIC_URL }}img/logo.jpg" class="" alt="" />
</a>
</div>
<div id="menu">
<ul>
{% if perms.restaurant_detail.restaurant_detail.create %}
<li>Join F4L</li>
{% endif %}
<li>FAQ</li>
<li>contact</li>
<li>about us</li>
{% if request.user.is_authenticated %}
<li>logout</li>
{% else %}
<li>login</li>
{% endif %}
</ul>
</div>
</div> <!-- End Header -->
<div style="clear: both;"></div>
<div id="main"> <!-- Main -->
{% block main-contents %}
<p>jrneflkwnel</p>
{% endblock %}
</div>
</div>
that i inherit here, home.html
{% extends "public_base.html" %}
{% block main-contents %}
<p>This is not Working.</p>
{% endblock main-contents %}
but this is not working at all,basically the content in home.html is not loading. what could be causing this?
You need to inherit the block in your home.html:
{% extends "public_base.html" %}
{% block main-contents %}
<p>This is not Working.</p>
{% endblock %}
Have a read through the docs on template inheritence, specifically:
[when you inherit from a parent template] the template engine will notice the three block tags in base.html and replace those blocks with the contents of the child template.
So when you inherit from the parent template, you need to include a block in your child template that overrides a block in the parent template, in this case the main-contents block.
You have to define a empty block content in your public_base.html. Add the following code in your public_base.html.
{% block content %}
{% endblock %}
Or else you have to inherit {% block main-contents %} from public_base.html.