I am trying to render a template inside the base html page. Base html has the header, footer, menu common for the whole site. The middle section of the page has to come from the child page. I think I have everything right, 200 OK, but it is not working, I don't see the content of the child page, form and div. I only see base.html for all requests. What am I missing?
project
|
---templates/base.html
---templates/childpage.html
base.html
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
childpage.html
{% extends "base.html" %}
{% block content %}
<form action="" method="">
</form>
<br><br><br>
<div class="something">
<a>some content</a>
</div>
{% endblock content %}
views
def home(request):
return render(request, 'base.html')
def askforchild(request):
return render(request, 'childpage.html')
urls
urlpatterns = [
url(r'^admin/', admin.site.urls),
url('', views.home, name='Site Home Page'),
url('askforchild', views.askforchild, name='child page'),
]
The url list for home page "" had to move to the bottom of the url list. Regex was catching all requests as home page requests. Catch all, an empty pattern should be at the bottom of the url list.
Related
I'm making my first Django app and I'm trying to set up my signup.html page while extending my base.html. The URL I have configured works, however it only pulls through the base.html template. I've checked the view, url and the signup.html template and I'm not sure what I'm getting wrong.
signup.html:
{% extends './layout/base.html' %}
{% load static %}
{% block content %}
<h1>Signup</h1>
{% endblock content %}
base.html:
<!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">
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&family=Oswald&display=swap" rel="stylesheet">
<link rel="icon" href="{% static 'favicon.ico' %}">
<a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
href="https://icons8.com">Icons8</a>
<title>Your Health Now</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
urls.py:
from django.urls import path
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
from . import views
app_name = 'HealthHub'
urlpatterns = [
path('signup/', views.signup, name='signup'),
path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")))
]
views.py:
from django.shortcuts import render
def signup(request):
return render(request, 'HealthHub/signup.html')
You should also define content block in base.html, so:
base.html:
...
<body>
{% block content %}
<h1> Hello World</h1>
{% endblock content %}
</body>
...
Then try it in signup.html, it will change content block to SignUp in h1 tag.
In base.html you should add an empty block where your other pages' HTML code will appear, it should be like this if you want the content ("Signup" h1) to appear under "Hello, world!":
base.html:
<body>
<h1>Hello, world!</h1>
{% block content %}
{% endblock content %}
</body>
My layout HTML file seems to be picking up the CSS right up until the {% block ... %}. The content in the block downwards doesn't pick up any CSS which means the pages that extend the layout page don't pickup any CSS. They all share the same CSS file.
App structure
run.py
/MyPortfolio
/static
styles.css
/templates
layout.html
index.html
__init.py
views.py
Layout.html
<head>
<link rel="stylesheet" href="{{ url_for('static',filename='styles.css') }}">
</head>
<body>
<!-- picks up CSS-->
<nav>...</nav>
<!-- doesn't pick up CSS downward-->
{% block body %} {% endblock %}
<div class="page-footer">
...
</div>
</body>
I would like to connect my layout.html file with a CSS file so that every other page extending my layout.html has access to this CSS file.
That is the code:
layout.html
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="/aufgabenzettel/static/css/main.css">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
index.html
{% extends "aufgabenzettel/layout.html" %}
{% block body %}
<h1>Meine Aufgaben</h1>
{% endblock %}
main.css
h1 {
color: aqua;
}
The href in layout.html is probably correct bacause I can be redirected to it in VS via ctrl + click. However, the h1 in index.html still appears in black instead of aqua...
What am I doing wrong?
I appreciate every kind of help!
First you have to add {% load static %} at the top of your code where you want to use static function in template and than you have to use static function like this {% static 'your_css_path_inside_static_directory' %} eg.
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="{% static '/aufgabenzettel/static/css/main.css' %}">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
Possibly I'm misunderstanding the inheritance of templates in Django, but why doesn't the below code work? Both child templates are inheriting from the parent template with different block names.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
{% block index %}{% endblock %}
{% block nav %}{% endblock %}
</body>
</html>
index.html
{% extends 'blog/base.html' %}
{% block index %}
<h1>This is the index.html page</h1>
{% endblock %}
nav.html
{% extends 'blog/base.html' %}
{% block nav %}
<h1>This is the nav.html</h1>
{% endblock %}
I am accessing this template by:
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls'))
]
blog/urls.py:
urlpatterns = [
path('', views.home, name='home'),
path('nav/', views.home, name='nav')
]
blog/views.py
def home(request):
return render(request, 'blog/index.html')
Using the URL of:
localhost:8000/blog
HTML Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
<h1>This is the index.html page</h1>
</body>
</html>
I'm trying to grasp the concept of using multiple blocks so that I can place them on the templates that I need.
You can not render two views in one HTTP request. To include content from a different template, simply use include for the nav.html if its is not going to be called independently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
{% include 'nav.html' %}
{% block index %}{% endblock %}
</body>
</html>
I am using django to create a web app. I have run into a problem when trying to use variables from python in html. The variable does not show up. The app has a lot of messy code so I have recreated the problem including only relevant files.
views.py:
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request, 'main/index.html')
def hello(request):
if request.method == 'POST':
fname = request.POST.get('fname', None)
else:
fname = "there"
return render(request, 'main/hello.html')
index.html:
{% extends "base.html" %} {% block content %}
<form action="hello" method="POST">
{% csrf_token %}
<input name="fname" placeholder="First Name">
<input type="submit" value="Submit">
</form>
{% endblock content %}
hello.html
{% extends "base.html" %} {% block content %}
<p>Hello {{fname}}</p>
{% endblock content %}
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="{% static "css/style.css" %}">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
Here is what the "hello" page looks like(only part of the screen):
I want it to be able to output the users input.
You can only reference a variable in a template if you include it in the "context" that is passed to the template. This is a dictionary linking variable names to the Python values they represent. The usual way to pass this to the template is as the third argument of the render method. So in your views.py, you should alter the final line to:
return render(request, 'main/hello.html', {"fname": fname})
In order for fname to show up you'll need to pass that into the render function. You're not doing that in def hello
You need to correctly return the argument into the render function like this:
def hello(request):
...
context = {'fname': fname}
return render(request, 'pops/index.html', context)