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>
Related
I just created a django application, and I have a problem that I cannot resolve. I have 1 css file 'root.css' that I would like to link with my html database but it's like this /static/root.css was completely ignored. I arrive mostly at link /static/home/home.css on my home app.
This is not work (/templates/base.html) :
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" type="text/css" ref="{% static 'root.css' %}"> **// Not work**
{% block css %}
{% endblock %}
<title>Learned</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
This is work (/home/templates.home.html) :
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'home/home.css' %}">
{% endblock %}
In my settings.py :
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
OMG, I just understood the error! I just made a typo, I'm stupid I put "ref" instead of "href" in my first link. It sure works better like this: D
Are you running this with Debug = False (production)? If so you need something else to serve the static files , check https://docs.djangoproject.com/en/3.1/howto/static-files/
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 have connected django to vue using webpack loader
before running the command npm build everythig was fine by running both terminals everything's working fine but just after running that command and connecting the static file and when i tried to check localhost:8000(defaul django server) i dont see anything not even in console no error and there is nothing
here is my
base.html file
<
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Question Time</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
{% block js %}
{% endblock %}
</html>
and here is my index.html
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static 'bundle.css' %}">
{% endblock %}
{% block content %}
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
{% endblock %}
{% block js %}
<link rel="stylesheet" href="{% static 'bundle.js' %}">
{% endblock %}
i have tried removing dist folder from vue
i have tried removing all the static links which casused this issue but its of no use
https://stackoverflow.com/questions/47034452/how-to-run-production-site-after-build-vue-cli tried this solution as well
but still its of no use
You need to add {% load render_bundle from webpack_loader %}
!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html lang="en">
...
I am creating a web app using Django. I have a html template as follows:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I am using this template to create other html files using
{% extends 'document.html' %}
{% block content %} {% endblock %}
for the moment I am referring to all css and js files in the original document.html. how can I refer to different js and css files in the new templates only when necessary?
thanks
Put this in your setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.dirname(BASE_DIR) + '/staticfiles/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
create static folder in created app and put there your css, js and access via this
<link href="{{ static('/app_name/css/reset.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static('/app_name/js/jquery-1.11.3.js') }}"></script>
now it's working. I made just few changes
{% extends 'document.html' %}
{% load staticfiles %}
{% block content %}
now I was able to include the js or css files I need it in the newly created template as follow for example
<script src="{% static 'vendors/js/tableexport.min.js' %}"></script>
I am stuck with this : < a href="{% url 'newapp:home' %}" > revWaves< /a>
Error message is : "NoReverseMatch"
Reverse for 'home()' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: []
I have created namespace for 'newapp' and url path is also correct i.e. /static/newapp/home.html and above < a href="{% url 'newapp:home' %}"> revWaves< /a> goes into header.html
So i am not able to figure out what is the error. Kindly help.
Main Urls.py
from django.conf.urls import url , include
from django.contrib import admin
urlpatterns = [
url(r'^newapp/', include('newapp.urls', namespace='newapp')),
]
newapp urls.py
from django.conf.urls import url , include
from . import views
urlpatterns = [
url(r'^$',views.home) ,
url(r'^about$',views.about) ,
url(r'^services',views.service) ,
url(r'^customers',views.customer),
url(r'^contact',views.contact) ,
]
views.py
from django.shortcuts import render
# Create your views here.
def home(request) :
return render(request, 'newapp/home.html')
def about(request):
return render(request, 'newapp/about.html')
def service(request):
return render(request, 'newapp/services.html')
def customer(request):
return render(request, 'newapp/customers.html')
def contact(request):
return render(request, 'newapp/contact.html')
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ady Rules</title>
<meta charset="utf-8"/>
{% load static %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static "newapp/style.css" %}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.js"></script>
<style>
h1.intro {
color: brown;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- logo --!>
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'newapp:home' %}"> revWaves</a>
<div>
</div>
</head>
<body class="body" style="background-color:#f6f6f6">
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends "newapp/header.html" %}
{% block content %}
<h2>Hey There ! How Ya Doin ? </h2>
<h2> Welcome to the world of Programming !!</h2>
<h1 class = "intro"> New Appppppppp !!!!!!</h1>
{% endblock %}