I have to do a school project that's basically a website.
Our client asked my team for a preview of the design. However, by then, my colleagues and I didn't know anything about Symfony.
So we first created a static HTML website (with CSS and JS libraries) to work on the design of the website.
Once we had agreed on the final design, we had to make the website dynamic.
After learning about the basics of Symfony in class, we decided to go for this technology.
So my question is: what's the best way to "turn" my team's static website into Twig templates ?
Thanks in advance,
As you can read in the documentation You begin by the global site template, containing the layout and the parts that won't change much. (menu, header, footer, etc..)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
Then you can render your specific page rendering content through the blocks you need:
{# app/Resources/views/blog/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Related
I've seen a ton of unanswered questions about VSCode formatting (and if not here, where do you ask these questions?).
There are 2 main issues I run into constantly when I'm trying to write django-html templates.
1. Basic HTML tag linebreak doesn't occur in django-html files.
When you write an html tag, and press enter inside of it, it should split the tag with an empty line in the middle like.
Expected behavior (pipe "|" represents the cursor):
<!-- Write the tag -->
<div>|</div>
<!-- Press enter -->
<tag>
|
</tag>
Here's what's happening in the django-html file after enter:
<!-- Press enter -->
<tag>
|</tag>
How do you fix this WITH proper template tag formatting (below)?
2. Django template tags don't indent as expected.
Tags within if, with, block, etc. tags should be indented. (treated like html)
Expected result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Instead, the html tags within the django template tags are flattened on the same indent level.
Actual result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Also if you're extending a template:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
What happens:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
Conclusion
I've used both beautify and prettier to try to solve the problems, but neither did the expected behavior 100% (especially with the template tags), but they did help.
I believe with slight tweaks they could have the expected behavior and treat django template tags as html tags AND have the html linebreak feature.
How do you get these to format with these 2 simple specifications correctly?
I got the desired result by using the Twig Language 2 extension and putting the following in my project settings:
"files.associations": {
"*.html": "twig"
},
I have base and child templates.
In my base HTML file I have this:
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<ul id="barra">
<li>Inicio</li>
<li>Enlace1</li>
<li>Enlace2</li>
<li>Enlace3</li>
<li>Enlace4</li>
<li>Ayuda</li>
</ul>
{% block content %}
{% endblock %}
</br>
<a>asdasdasdasdasdasd</a>
</body>
</html>
But when I see the web in a browser, the "asdasdasdasdasdasd" is shown below URL and over {% block content}.
Does anyone knows the origin of this behavior, I think its a really simple structure and I cant get why it's failing?
Thank you very much!
I have a layout html file called layout.html that goes as follows:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
{% block head %}
<div class = "container-fluid">
<h1>Books </h1>
<h1 class = "text-muted">Rate and discover books</h1>
</div>
{% endblock %}
{% block body %} {% endblock %}
</body>
</html>
and an index layout called index.html that goes as follows:
{% extends "layout.html" %}
{% block title %}{% endblock %}
{% block head %}{% endblock %}
{% block body %}
<h1>some text</h1>
{% endblock %}
but when I render the index.html into the browser with my flask application, all I see is the following text:
Why??
thanks!
OK, I feel pretty stupid now. I realised that whenever you enter the name of a block in the child template that is also present in the parent template, you are overriding that part of the parent template. So in this case, by entering the block head in the child template and leaving it blank, that's exactly what I did, so the text was overridden by no text basically.
I am using a banner image that needs to change on each page, I would like to set the banner in the html template, so that it is easy for the person I am building it for to easily add new pages.
I am developing it in django, but I can't figure out how to get it to work, please help!
example:
index.html
set image url here
{% extends 'base.html' %}
base.html
<html>
<body>
{% include 'top.html %}
</body>
</html>
top.html
<div>
<img src="{{ image url }}">
</div>
The Django template language does not let you set variables. You can acheive something similar by using blocks. Change your base template to:
base.html
<html>
<body>
<div>
<img src="{% block image_url %}/default_image.jpg{% endblock %}">
</div>
</body>
</html>
Then override the image_url block in your templates, e.g.
index.html
{% extends 'base.html' %}
{% block image_url %}/images/index.jpg{% endblock %}
Note that with this approach it is not possible to use {% include top.html %}, because you cannot override blocks that have been included by the {% include %} tag.
well I didn't understand very well, but should be better if you delete top.html and include that content in the base like:
<html>
<body>
<div>
<img src="{% block url_img %}{% enblock %}">
</div>
</body>
</html>
and in your index
{% extends 'base.html' %}
{% block url_img %}here images url{% endblock %}
also if you are using top.html for another purpose, do the same:
{% extends 'base.html' %}
{% block url_img %}{{ image url }}{% endblock %}
So I'm trying to add the footer and header on every page of my website. I made a base.html file which contains the general layout of the site.
In my about.html page, i did:
{% extends "public/base.html" %}
<h1>Content goes here</h1>
I can see my header and footer, but how do I display the content. I want to type stuff in that about.html page. The content goes here isn't being displayed in the middle.
You need to define a block in base.html and populate it in about.html.
base.html:
<header>...</header>
{% block content %}{% endblock %}
<footer>...</footer>
about.html
{% extends "public/base.html" %}
{% block content %}
<h1>Content goes here</h1>
{% endblock %}
This is all fully explained in the tutorial.
{% extends "public/base.html" %}
{% block content %}
<h1>Content goes here</h1>
{% endblock %}
Or simply create about.html and include it where you want in your main html.
Example:
{% extends "public/base.html" %}
{% block content %}
"Your code"
{% include "core/about.html" %}
{% endblock %}
Let's say your base.html looks like this:
<html>
<body>
<!-- header code -->
{% block content %}
{% endblock %}
<!-- footer code -->
</body>
<html>
Then in your other file you would do this:
{% extends "base.html" %}
{% block content %}
<!-- Content here -->
{% endblock %}
Anything placed inside the template's (extended file's) body tag would be overwritten by the stuff in the child file's content, but anything outside of that tag would be extended, or copied, into it.
Here are the docs on the block tag