I have the following code in an html page and am trying to use jinja logic to embed html somewhere specific (in the blog/about me section of the html)
Code that doesn't work (see specifics below)
<!-- About Section (Blog)-->
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">Blog</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ml-auto">
<p class="lead">This is the blog section</p>
{%block content%}
{%endblock %}
</div>
<div class="col-lg-4 mr-auto">
<p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
</div>
It's these two lines that ordinarily produce an htmlsnippet output:
{%block content%}
{%endblock %}
In another place on the site (right at the bottom) I've used the same logic, and the snippet output has displayed fine.
Code that works fine
<!-- Custom scripts for this template -->
<script src="/static/js/freelancer.min.js"></script>
<div>
{%block content%}
{%endblock %}
</div>
</body>
</html>
The error I get is:
'block' tag with name 'content' appears more than once
141 <div class="col-lg-4 ml-auto">
142 <p class="lead">This is the blog section</p>
143 {%block content%}
144 {%endblock %}
145 </div>
146 <div class="col-lg-4 mr-auto">
147 <p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
148
149 </div>
150 <div>
151 {%block content%}
152 {%endblock %}
153 </div>
Of course, I note the error that says: 'block' tag with name 'content' appears more than once ...but my question is
Noting that I know how to fix the error (use the content just once), What is then the best way to include an html snippet, and more importantly, an html snippet that say, has posts, which are generated from the database? Is Jinja logic as shown below using block contents the only way, or is there a better way?
For instance, I have other html snippets in other apps in the same django project (e.g. in blog/templates/blog/post.html) ...this also extends the home page, but how do I include this in the home page? I don't quite understand the structure and how to reference things from different directories. Even if they have to be in the same directory, if you can only include one html snippet, how is it checking the folder it's referenced from?
Structure:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates
This is where the header.html and home.html live (header is where the main bootstrap index page has been put for now)
there is another folder here called 'includes' which has all the html snippets such as 'mysnippet.html'.
Important: ** it is THIS 'aboutme.html' that is being referenced in the jinja logic above.**
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\includes\mysnippet.html
Other apps such as blog:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\blog\templates\blog
is where I have
blog.html and post.html
How would I include the content of post.html or blog.html in the above shown snippet (main homepage)
Final note:
The home.html page includes this code, which I note points to the inclusion of the aboutme code snippet. But still the question remains, how do I include other snippets, and what is the best way to understand this structure and how things fit together. Tutorials or link references also welcome.
home.html (in: C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\home.html)
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website: </p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
I think any guidance on the optimal and simplest set up will be invaluable for SO Django beginners. Are there flow or diagrams that show clearly how things ought to be arranged from an html and display point of view?
UPDATE:
Based on the answer below, I changed the 'content' name to something else, and it does indeed allow other snippets to be included. Thank you!
I still don't know a) the best way to organise html pages and to include snippets and also how to include a page that is drawing from a database: e.g. posts:
I tried this - that seeks to include post.html but it doesn't work - it instead just messes up the formatting and repeats the blog section elsewhere on the bootstrap page.
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:</p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block moose%}
<p>This is test text that says moose</p>
{%include "blog/post.html"%}
{% endblock %}
The 'moose' text does show up, but not the blogs/posts.
post.html (in the blog app) is:
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
Related
I have a div container in my HTML which displays a list of 10 parsed headlines from The Toronto Star. I want to be able to display them in a repeating grid that looks like this:
Here's the django template that I have :
<div id="container">
<div class="containers">
{% for n, i in toronto %}
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
{% endfor %}
</div>
To clarify, I am asking for someone who is experienced with CSS Grids and django to help me with the appropiate css code similar to the picture i referenced above. The css grid needs to be repeating as well as the django template contains 10 indexes in its list
Try
<div id="container">
{% for n, i in toronto %}
<div class="containers">
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
</div>
{% endfor %}
</div>
The class has to be parsed too
I am developing a web app and I'm using a navbar.html as layout in each page of my webapp with this code :
eachpage.html :
{% extends 'navbar.html' %}
{% block body %}
<div class="container">
<div class="titre_pages">
<h2>PAGE TITLE </h2>
</div>
</div>
Everything works fine and my pages seems responsive bu when I reduce the size of my browser my navbar and my titles are overlaping. Should I add something between my navbar/layout and my html code to avoid this ?
Here is my page with a normal browser size :
Here is my page when I reduce the size of my browser :
The answer to your problem is to use media queries to serve different css/design for different viewport sizes. If you use bootstrap or something and bootstrap grid often you can have responsiveness handled for you. Also see below for standard practice instead of extending a nav bar we would create a base.html that would contain the entire layout including navbar. With this method of assigning blocks and including files you can over you can then extend from base.html and only over ride the body block or sidebar block as necessary.
<!-- base.html -->
<!html>
<head>
</head>
<header>
{% block header %}
{% include 'navbar.html' %}
{% endblock %}
</header>
<body>
{% block body %}
{% include 'index.html' %}
{% endblock %}
</body>
</html>
Is it possible to create folders within the _includes folder of a Jekyll project to separate multiple email campaigns for one single company? Everything needs to be more organized, each company having their own separate folder inside _includes and not having to create one Jekyll project for each campaign. Having them all inside one big Jekyll project is what I'm looking for.
New to Jekyll. noob question. Sorry.
I am running multi niche blog in Jekyll, and here what I have done in my website.
I have created multiple layout for different type of pages, for example, here I created blogger.html layout (May be you are using default post or page layout)
---
layout: null
---
<html>
{% include head.html %}
<body>
{% include header/blogger.html %}
<section class="container">
<div class ="content row">
<section class="main col col-lg-7">
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{{ content }}
</article>
</div>
</section>
</div>
</section>
{% include footer.html %}
</body>
</html>
As you can see(after <body> tag), I have added blogger file into _include folder, so yes, you can add any file/folder into _include folder, just make sure, the relative path is correct.
I would like to know if there is a way to pass a dynamic named content to the page from the layout.
For example,
Layout
<body>
<div class="container">
{{ content }}
</div>
<footer>
<p>© Company 2015</p>
</footer>
<script src="path/to/jquery.js"></script>
{{ page.other_content }}<!-- Objective: To write scripts that varies with page -->
</body>
Page
---
layout: default
title: About Us Page
---
<p> This is about us page </p>
{% capture other_content %}
<script>
$(document).ready(function(){
console.log("About us page.");
});
</script>
{% endcapture %}
Is there a way to render multiple content sections in pages from layout?
In ASP.NET we can do this is the Layout page.
#RenderSection("scripts", required: false)
In content page we can render that section like this.
#section scripts {
Hey I'm actually on the _Main layout.
I can vary according to the page.
My presence is not mandatory in every page
}
Can this be done with jekyll?
GitHub Pages disallow plugins, so I'll stick to vanilla Jekyll workarounds. You can of course use plugins, generate your site locally and host the results on GitHub.
This is ugly, but possible. Keep your layout as is:
<body>
<!-- varies with page -->
{{ page.other_content }}
</body>
Then in your page file, define the property other_content in the front matter:
---
other_content: |
<script>
console.log("You can't stop me!");
</script>
---
The pipe character denotes a multiline string. Per YAML's rules, your scripts must be indented by spaces (no tabs allowed).
If your scripts become too large, you can move them to separate files, and the front matter of your pages would refer to the script file names instead:
---
scripts: [test]
---
In the layout:
{% for s in page.scripts %}
<script src="{{ s }}.js"></script>
{% endfor %}
This works if test.js is in the same directory as the page using it. You can use site.baseurl to get absolute paths, etc.
I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.