I'm using django-pygments and am trying to us it like so (base.html)
<!DOCTYPE html>
{% load pygmentify %}
<head>
<link rel="stylesheet" media="screen" href="{% static 'django_pygments/css/pygments_default.css' %}" type="text/css">
</head>
<div class="row">
<div id="mainbody" class="small-12 large-8 large-offset-2 columns">
<body>
{% pygment %}
{% block content %}
{% endblock %}
{% endpygment %}
</body>
</div>
<div id="sidebar" class="small-12 large-2 columns">
</div>
<div class="small-12 large-8 large-offset-2 columns">
{% block comments %}
{% endblock %}
</div>
<div class="small-12 large-2 columns">
</div>
</div>
Then I'm passing {{ post.content|safe }} into block content. The pigmented code comes out as such:
I've tried changing the <ol> tags in the source code to <ul> but obviously that wasn't the issue. I also turned passed linenos=False and True but that only made it more weird as the line numbers aren't lined put correctly.
Anyone know what I might be doing wrong?
Apparently there was a problem with my css style sheet. I tried changing it and now it looks normal.
Related
I am working through some beginner Django tutorials to build a basic polling website. I have everything working, but I can't get the formatting to display properly on my "results" page for the polls.
How my page looks:
https://i.stack.imgur.com/AuB6q.png
The votes are being displayed, but you can't see them due to the formatting:
https://i.stack.imgur.com/QgMgr.png
How it is supposed to look:
https://i.stack.imgur.com/PmCOb.png
Below is my code on my results.html:
{% extends 'base.html' %}
{% block content %}
<h1 class="mb-5 text-center">{{ question.question_text }}</h1>
<ul class="list-group mb-5">
{% for choice in question.choice_set.all %}
<li class="list-group-item">
{{ choice.choice_text }} <span class="badge badge-success float-right">{{ choice.votes }} vote{{ choice.votes | pluralize }}</span>
</li>
{% endfor %}
</ul>
<a class="btn btn-secondary" href="{% url 'polls:index' %}">Back To Polls</a>
<a class="btn btn-dark" href="{% url 'polls:detail' question.id %}">Vote again?</a>
{% endblock %}
Any ideas on what I have wrong?
The problem is in your CDN. Change this CDN
<link href="cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/…" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
to this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
I get the following error when I try to run my app.
File "/Users/ccc/microblog/app/templates/errors/500.html", line 1, in top-level template code
{% extends "base.html" %}
File "/Users/ccc/microblog/app/templates/base.html", line 48, in top-level template code
{% block scripts %}
File "/Users/ccc/microblog/app/templates/base.html", line 49, in block "scripts"
{{ super() }}
jinja2.exceptions.UndefinedError: there is no parent block called 'scripts'.
I am following Miguel's Flask lessons and it seems like our code is largely similar. Hence I am not too sure this error appears.
This does not happen when I remove {{super()}} from the block script. The code runs smoothly then.
Here is my code for the base.html:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{ url_for('main.index') }}">Microblog</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li><a class="nav-link" href="{{ url_for('main.index') }}">Home</a></li>
<li><a class="nav-link" href="{{ url_for('main.explore') }}">Explore</a></li>
<li><a class="nav-link" href="{{ url_for('main.add_habit') }}">Habits</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_anonymous %}
<li><a class="nav-link" href="{{ url_for('auth.login') }}">Login</a></li>
{% else %}
<li><a class="nav-link" href="{{ url_for('main.user', username=current_user.username) }}">Profile</a></li>
<li><a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a></li>
{% endif %}
</ul>
</div>
</div>
<hr>
</nav>
{% endblock %}
{% block content %}
<div class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-secondary" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{# application content needs to be provided in the app_content block #}
<br>
{% block app_content %}{% endblock %}
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock %}
</body>
The error message said it right: you cannot use super() in your base.html template since it does not have a parent template. super() can be used only in a child template. When you put {{ super() }} into a block in a child template it will include the block's content from the parent template. E.g. if you want to add an additional script in the child.html you can write:
{% extends "base.html" %}
{% block scripts %}
{{ super() }}
<script src="https://cnd.com/path.to.script.js></script>
{% endblock %}
Now it will include all scripts from the parent and this one as well.
I'm using djangoCMS to add CMS functionality in my website templates but the placeholders i have placed on the placed are not showing up, i have defined my CMS_TEMPLATES IN MY settings.py and put the {% load cms_tags sekizai_tags sorl_thumbnail %} on my base.html and also added {% load cms_tags sekizai_tags %} on my other templates that expand the base.html, but when i log into djangoCMS admin and visit my pages i find no placeholders in my structure view. what could be the problem here?
settings.py
CMS_TEMPLATES = [
('index.html','Home'),
('solutions.html','solutions'),
('commercial.html','Commercial Solar Solution'),
('residential.html','Residential Solar Solution'),
('on-grid.html','On grid solutions'),
('off-grid.html','Off Grid solutions'),
('water-heating.html','Solar Water Heating'),
('solar-water-pumping.html','Solar water pumping'),
('hybrid-grid.html','Hybrid Solutions'),
('outdoor-lighting.html','Outdoor Lighting'),
('contacts.html','Contacts'),
('terms-of-use.html','Terms of use'),
]
base.html
<!DOCTYPE html>
{% load static %}
{% load cms_tags menu_tags sekizai_tags %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% render_block "css" %}
</head>
<body>{% cms_toolbar %}
<ul> {% show_menu 0 0 100 100 %} </ul>
<div id="mySidenav" class="sidenav">
<div class="div">
<img src="{% static 'administration/css/images/icons/logo.png' %}" alt="" class="img-responsive">
</div>
<ul class="navlist">
×
<li>Home</li>
<li>About us</li>
<li>Blog</li>
<li>Projects</li>
<li>Downloads</li>
</ul>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="{% static 'administration/css/images/icons/logo.png' %}" alt="" class="img-responsive">
</a>
</div>
</nav>
{% block content %}
{% endblock %}
{% render_block "js" %}
</body>
</html>
solutions.html
{% extends 'base.html' %}
{% block title %} Commercial pv solar heating solutions {%
endblock %}
{% load static %}
{% load cms_tags %}
{% block content %}
<div class="water__heating--section">
<div class="row">
<div class="col-lg-6 solutions__content--image" id="commercial__banner--image">
<h4 class="small__title">support and Evaluation</h4>
<div class="small__content small__content--default">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima soluta nesciunt consequuntur esse consectetur
</div>
</div>
<div class="col-lg-6 solutions__content--box">
<h1 class="heavy__title"> We Can Help your business <span class="emphasis">go solar</span> </h1>
<div class="small__content ribbon__content--default">
{% placeholder "commercial section one" %}
</div>
</div>
</div>
</div>
{% endblock %}
Inside your child template (which extends base template) there is should be something like this:
{% extends "base.html" %}
{% load cms_tags %}
{% block title %}{% page_attribute "page_title" %}{% endblock title %}
{% block content %}
<div>
{% placeholder "feature" %}
</div>
<div>
{% placeholder "content" %}
</div>
<div>
{% placeholder "splashbox" %}
</div>
{% endblock content %}
And base template should looks like this:
{% load cms_tags menu_tags sekizai_tags %}
<!doctype html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
</head>
<body>
{% cms_toolbar %}
<div class="container">
<ul class="nav">
{% show_menu 0 100 100 100 %}
</ul>
{% block content %}{% endblock content %}
</div>
</body>
</html>
When I accessed upload_save method,basic.html was showed.
I wrote(changed into) in view.py like
def upload_save(request):
photo_id = request.POST.get("p_id", "")
if (photo_id):
photo_obj = Post.objects.get(id=photo_id)
else:
photo_obj = Post()
files = request.FILES.getlist("files[]")
photo_obj.image = files[0]
photo_obj.save()
return render(request, "registration/accounts/photo.html")
photos = Post.objects.all()
context = {
'photos': photos,
}
return render(request, 'registration/accounts/photo.html', context)
So,I naturally thought when I accessed upload_save method,photo.html would be showed.
In photo.html,I wrote
{% extends "registration/accounts/base.html" %}
{% block body %}
<div class="container">
{% for photo in photos %}
<h2 class="page-header">{{ photo.title }}</h2>
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="/media/{{ photo.image1 }}">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="/media/{{ photo.image2 }}">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="/media/{{ photo.image3 }}">
</div>
</div>
<a class="btn btn-primary" href="{% url 'accounts:upload' photo.id %}">UPLOAD</a>
{% endfor %}
</div>
{% endblock %}
I wrote
base.html in photo.html ,but I cannot understand why photo.html's content is not show.
By Google Verification,I found only base.html was showed in my page.(So,photo.html could not be read)
How can I fix this?
You did not provide photos to your template. The {% for photo in photos %} is trying to loop over something that has not been provided. You need to add photos to the template context like so:
# ... rest of your view
photos = Post.objects.all()
context = {'photos': photos}
return render(
request, "registration/accounts/photo.html", context=context
)
Reference: render()
I think you did not include block body in base.html. if not included add these lines in base.html where you want to add photo.html content
{% block body %}
{% endblock %}
base.html should be look like this
{% load staticfiles %}
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1>Photo list</h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block body %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
I am trying to learn django and had create a simple website but the problem is when I try to insert bootstrap the layout is display incorrectly and then I found out the problem is with this empty:
<style type="text/css"></style>
which automatic inserted( I had tried to insert empty html and the style is still there) and here is my django template html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% include 'news/includes/header.html' %}
{% block title %}
<title>News</title>
{% endblock %}
</head>
<body>
{% include 'news/includes/nav.html' %}
<div class="row">
<div id="top-ads" class="col-md-12">fsdfsdf</div>
</div>
<div class="row">
<div id="left-ads" class="col-md-2">sdf</div>
<div id="container" class="col-md-8">
{% block container %}
{% if news_list %}
<ul>
{% for new in news_list %}
<li> {{ new.title }}</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
</div>
<div id="right-ads" class="col-md-2">yodsfddf</div>
</div>
<div class="row">
<div id="footer" class="col-md-12">sdfsdfsd</div>
</div>
</body>
</html>
Output:
edit:
OK this is getting weirder and weirder if I try to move the <style> tag even I drop at the same position all the layout work again. I surrender