I have a fairly simple setup. I created a flask app and call index.html on route '/'.
index.html contains this:
{% extends "template.html" %}
{% block content %}
<h4 class="centeredText">
HEADER TEXT
</h4>
{% for p in paragraph %}
<p class="centeredText">
{{ p }}
</p>
{% endfor %}
{% endblock %}
My template.html is also very simple:
<html>
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom_navbar.css') }}">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<h1>{% if pageType = 'home' %} HOME {% endif %}</h1>
</head>
<body> <h1>TEMPLATE</h1>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
While testing I get this error:
expected token 'end of statement block', got '='
Edit: I missed including the variable in the header in template.html. Which I now know, to be the source of the error. Is there anyway to pass a variable to template.html, or is that not good practice?
Help!
The pageType variable should appear in your template.html so long as you pass it to the render_template function. In your case, you have a syntax error here:
{% if pageType = 'home' %}
You need to use == instead, so it should look like this:
{% if pageType == 'home' %}
Related
So far I am trying to set a paginator in my blog posts. I followed the documentation and other sites tutorial but any of these solutions did not work out for me. Considering my issue I think I am missing out on a simple step.
The blog folder sitemap.
Blog.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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu|Roboto'>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/blog.css">
<title>Blog</title>
</head>
<body>
{% include nav.html %}
<main>
{{paginator.posts}}
<!-- post list -->
<h1>Blog Post List</h1>
<div class="post-list post-list_grid">
{% for post in site.posts %}
<!-- Post start -->
<div class="post-list__post post">
<figure class="post__preview-img">
<a href="{{post.url}}"><img src="{{ site.baseurl }}/assets/thumbnail/{{ post.titleimage }}" alt="">
</a>
</figure>
<div class="post__header">
<time datetime="2019-11-09" class="post__time">november 09, 2019</time>
<h2>{{ post.title }}</h2>
</div>
</div>
{% endfor %}
<!-- Post end -->
</div><!-- / .post-list -->
<!--scroller-->
<div id="jsScroll" class="scroll" onclick="scrollToTop();">
<i class="fa fa-angle-up"></i>
</div>
</body>
{% include scroll.html %}
{% include toggle.html %}
</script>
</html>
posts/index.html
---
layout: blog
---
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
« Prev
{% else %}
<span>« Prev</span>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<em>{{ page }}</em>
{% elsif page == 1 %}
{{ page }}
{% else %}
{{ page }}
{% endif %}
{% endfor %}
{% if paginator.next_page %}
Next »
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}
blog.md
---
layout: blog
title: Blog
pagination:
enabled: true
---
I even tried with the paginate version 2. But the result was same. It did not show any repsonse.
_config.yaml
email: your-email#example.com
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Build settings
theme: minima
plugins:
- jekyll-feed
- jekyll-paginate
# Pagination Settings
paginate: 2
paginate_path: /posts/page:num/
I started learning django recently and am writing a website for a tutor. I need to add output to topics that are entered into the database through the admin panel. But he doesn't take them out. Although the profile data is displayed perfectly.
views.py
class TopicListView(ListView):
model = Topic
template_name = 'video/video.html'
context_object_name = 'top'
def video(request):
top = Topic.objects.all()
context = {'top': top}
return render(request, 'video/video.html', context)
video.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="../static/images/favicon.jpg" type="image/x-icon">
<link rel="shortcut icon" href="../static/images/favicon.jpg" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Материалы</title>
<link rel="stylesheet" href="{% static 'profiles/css/style.css' %}" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
{% if user.is_authenticated %}
<div class="top">
Главная
<a class="active" href="video">Материалы</a>
Тесты
Выйти
</div>
{% for post in top %}
<div>
<h3>{{ post.name_topic }}</h3>
</div>
{% endfor %}
{% else %}
<p>Ввойдите в профиль, чтобы увидеть эту страницу</p>
<div class="button">
Log in
</div>
{% endif %}
</body>
</html>
urls.py
from django.urls import path
from . import views
from django.conf.urls import url
urlpatterns = [
path('', views.profiles),
url(r'^video/$', views.video, name='topic'),
path('question', views.question),
]
enter image description here
The {% load static %} tag at the top of my html file seems to work
But when I try to link my css file from static folder using this code :
{% load static %}
<link href="{% static 'static/style.css' %}" rel="stylesheet">
vscode tries to create a file called {% static 'static/style.css' %} inside my templates directory, meaning the static keyword isn't being recognized.
Any help in figuring out why would be highly appreciated (screenshot of path at bottom)
Here's my relevant settings.py to link static files
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
'/Google_Solutions/static/',
]
My static and templates are in the main directory
and here's my home.html file head where i'm trying to include files
{% extends 'layout.html' %}
{% load static %}
{% block head %}
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title> Homepage </title>
<!-- Template Main CSS File -->
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
{% endblock %}
here's my layout.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="16x16" href="{% static '/favicon-16x16.png'%}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
So I found out the error , it was only my local vscode
Even if the hover link shows the wrong address, as long as your syntax is correct, your static files will load just fine. Check it by starting your server
In main html document:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}sgbit/style.css" media="screen" >
<title>sgbit</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
in settings.py file:
STATIC_URL = '/static/'
STATIC
os.path.join(BASE_DIR , 'static'),
]
I'm trying basic background color change to confirm css is working on my document, but nothing i try seems to work. I have watched a lot of youtube videos and also read the documents several times. can you please tell me the issues in my code.
Use this:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'sgbit/style.css'%} " media="screen" >
<title>sgbit</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
This is my base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
This is home_page where I am using the {% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container">
<h1>{{ title }}</h1>
<h1>Hello, world!</h1>
<img src="{% static 'img/myImage.jpg' %}" class='img-fluid'>
</div>
{% if premium_content %}
<div class="row">
<div class="col">
<h1>Premium</h1>
{{ premium_content }}
</div>
{% endif %}
</div>
{% endblock content %}
The here is my views.py where I have the home_page and before using the extends tag I could render this page properly
def home_page(request):
context = {
"title":"Hello World We Working"
}
if request.user.is_authenticated:
context["premium_content"] = 'Only premium users see this'
return render(request, 'MainApp/home_page.html', context)
The error message that I am getting is TemplateDoesNotExist at / Which I do not understand I even tried putting the two html files in the same directory but still I get the same error message
You should create templates file in your project or app directory and update TEMPLATES variable in the settings.py like below:
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
And then put your HTML files on the templates directory
I hope this works for you