I created a new page, there was a for loop to display the list of posts, but it can't work as expcted
and here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
</body>
</html>
Add front matter so Jekyll knows it has to process it.
Simply add two lines of the dashes at the beginning of the file:
---
---
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>
<ul>
{% for post in site.posts %}
<li> {{ post.title }} {{ post.excerpt }} </li>
{% endfor %}
</ul>
</body>
</html>
Related
How can I include the following template (there are many of such template) in the main template so that each block gets appended to the corresponding block in the main template? Actually I want to avoid adding CSS and JavaScript separately each time I include a template, so asking this question.
{% block head %}
<link rel="stylesheet" href="/static/navbar.css">
{% endblock %}
{% block body %}
<div id="navbar"></div>
{% endblock %}
{% block script %}
<script src="/static/navbar.js"></script>
{% endblock %}
Main template:
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="/static/main.css">
{% endblock %}
</head>
<body>
<div id="header"></div>
{% block body %} {% endblock %}
<div id="footer"></div>
{% block script %}
<script src="/static/main.js"></script>
{% endblock %}
</body>
</html>
i have two html file ,i should extends secend file from first file but it doesnt work
first file base.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Library{% endblock %}</title>
</head>
<body>
<div id="test">
{% block test %}
<h1>This page belongs to me.</h1>
{% endblock %}
</div>
</body>
</html>
secend one booklist.html
{% extends "base.html" %}
{% block content %}
<h3>Books</h3>
<div>
{% for book in books %}
{% if book.available %}
<p>{{ book.author }} wrote {{ book.title }}.</p>
{% endif %}
{% endfor %}
</div>
{% endblock %}
You Forgot to add in your parent template
{% block content %}{% endblock %}
This is where the child template is going to be placed.
Your parent template should look like this (for example):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Library{% endblock %}</title>
</head>
<body>
<div id="test">
{% block test %}
<h1>This page belongs to me.</h1>
{% endblock %}
</div>
<div class="myChildContentComesHere">{% block content %}{% endblock %}</div>
</body>
</html>
So I'm trying to develop an app in Django. At the moment I'm trying to do a simple search bar that when you type the title of a fil it show several data of that film. I have successfully developed the search bar and it works. The problem is that when doing the html template and extending it from base.html the data shown dissapears.
base.html
<!DOCTYPE html>
<html lang="es">
<head>
{% load staticfiles %}
<title>Peliculas</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Tangerine&v1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Yanone+Kaffeesatz" />
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}"/>
</head>
<body>
<div id="content">
<div id="main">
<div id="header">
<div id="logo">
<h1>SERIAL KILLER</h1>
<div class="slogan">SLOGAN</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="current" in the li tag for the selected page - to highlight which page you're
on -->
{%block menu%}
{% endblock %}
</ul>
</div>
</div>
</div>
<div id="site_content">
{%block lado%}
{% endblock %}
<div id="content">
{% block contenido %}
{% endblock %}
</div>
</body>
</html>
the template where I show the data from the query: buscarResultados.html
{% extends "base.html" %}
{% load staticfiles %}
{% block titulo %} RESULTADOS {% endblock %}
{%block content %}
<ul>
{% for peli in object_list %}
<li>
{{peli.titulo}}, {{peli.descripcion}}
</li>
{% endfor %}
</ul>
{% endblock %}
my form in index.html
<div id="search">
<form action="{% url 'busqueda_resultados' %}" method= 'get'>
<input type="text" name="q" placeholder="Buscar...">
<input type="submit" value="Buscar">
</form>
</div>
my views.py
class BuscarPeliculas(ListView):
model = Pelicula
template_name = 'buscarResultados.html'
def get_queryset(self):
query = self.request.GET.get('q')
object_list = Pelicula.objects.filter(
Q(titulo__icontains=query) | Q(descripcion__icontains=query)
)
return object_list
my urls.py
path('busqueda/', views.BuscarPeliculas.as_view(), name='busqueda_resultados'),
what appears if I extend from base.html
What appears if I don't extend from base.html
as you can see, The data dissapears if I extend from base.html, I tried to do my question as complete as possible, help is much appreciated.
Its because you are addintg it to a block content, but the base.html expects block contenido
fix your block names
I'm Twig beginner. I currently try to setup Yii2 layout with Twig.
I having 3 Twig file.
base.twig
{{ this.beginPage() }}
<!DOCTYOE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ app.language }}">
<head>
<meta charset="{{ app.charset }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ html.encode(this.title) }}</title>
{{ this.head() }}
{{ html.csrfMetaTags() | raw }}
</head>
<body>
{{ this.beginBody() }}
{% block body %}{% endblock %}
{{ this.endBody() }}
</body>
</html>
{{ this.endPage() }}
cp.twig
{% extends '_layouts/base.twig' %}
{% block body %}
<div class="cp">
{% block header %}{% endblock %}
<hr />
{% block content %}
{{ content }}
{% endblock %}
</div>
{% endblock %}
index.twig
{% extends '_layouts/cp.twig' %}
{% block header %}this is header{% endblock %}
After I render from my Yii2 controller return $this->render('index'); then it come out very weird output:
<!DOCTYOE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="csrf-param" content="_csrf">
<meta name="csrf-token" content="z_y1CPsfUBwHE6uC3dHg225wVQ8i2-eGhZa9f55Qrm39nYI6gk0TdVJ6nruf5q6WJAcCaUGolPWo9fxM_TrNHA==">
</head>
<body>
<div class="cp">
<hr />
<!DOCTYOE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="/mlaxology/yii2/workspace/projects/pawscms/web/assets/903cba57/css/style.css" rel="stylesheet">
<meta name="csrf-param" content="_csrf">
<meta name="csrf-token" content="z_y1CPsfUBwHE6uC3dHg225wVQ8i2-eGhZa9f55Qrm39nYI6gk0TdVJ6nruf5q6WJAcCaUGolPWo9fxM_TrNHA==">
</head>
<body>
<div class="cp">
this is header <hr />
</div>
</body>
</html>
</div>
</body>
</html>
It output unexpected duplicated parent layout.
My objective is to create a dynamic layout header which can be override by child layout with Twig {% block header %}{% endblock %} command. I know there is other way to solve this issue, like using Twig variable to store the dynamic header. But I like they way what {% block %} does.
I'm wondering why base.twig {% block body %}{% endblock %} working properly but index.twig having repeat content issue ....
I already spend 2 days on this, try googling but no similar issue can be found ... finally I think I really need stackoverflow help.
Sorry for my English and thanks for reading this :)
My ugly way to solve this issue :
base.twig:
{% if content is defined %}{{ content | raw }}{% else %}
{{ void(this.beginPage()) }}
<!DOCTYOE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ app.language }}">
<head>
<meta charset="{{ app.charset }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ html.encode(this.title) }}</title>
{{ this.head() }}
{{ html.csrfMetaTags() | raw }}
</head>
<body>
{{ this.beginBody() }}
{%- block body %}{% endblock %}
{{ this.endBody() }}
</body>
</html>
{{ void(this.endPage()) }}
{% endif %}
After several debug ... this happen because reprint content, so I wrap with {% if content is defined %}{{ content | raw }}{% else %} for temp fix.
Any better way to solve this issue?
In Django can you have one template base layer inheriting from another?
For example:
base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<meta charset="UTF-8">
<title>Cloud Fabric || Product Calculator</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
{% block additionalStyles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/editionsStylesheet.css' %}" />
{% endblock additionalStyles %}
</head>
<body>
<div id="header">
<h1 id="HeaderH1"><i>{{EditionName}}</i></h1>
</div>
{% block content %}
{% endblock content %}
</body>
</html>
So that will be the main base layer now is there a way to make another base layer to inherit from it for different parts of a website? like so:
base2.html
{% extends "base.html" %}
{% block additionalStyles %}
{% load staticfiles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/monthlyEditionsStylesheet.css' %}" />
{% endblock additionalStyles %}
{% block content %}
<h1 id="chooseMonthH1">Choose The Monthly Range:</h1>
{% block monthlyForm %}
{% endblock monthlyForm %}
<button type="submit" class="pure-button pure-button-primary" id="subButton">Submit</button>
{% block formend %}
</form>
{% endblock formend %}
</div>
{% endblock content %}
So then further html can inherit from base2.html? i have already tried this but the form stopped working and the css messed up.
Your base2.html template overwrites contents of the additionalStyles block from the base.html template.
To preserve parent's block content, you must use the magic block.super variable like this:
{% extends "base.html" %}
{% block additionalStyles %}
{{ block.super }}
<link ... >
{% endblock additionalStyles %}
The above notation appends content to the additionalStyles block.