I'm using Jekyll to build a static website and the front page scrolls to anchor points up and down the page but if the user go off to a post then the menu obviously doesn't go anywhere due the links being like:
<li class="nav-link"><a data-scroll-goto="4" href="#contact">Contact</a></li>
In Jekyll is there a way say in the cofig file to say if post page then replace menu-A with menu-B?
Thanks,
That's what layouts are made for.
Your /index.html page will use the home.html template
Your posts will use the post.html then the default.html template
index.html
---
layout: home
...
---
your content here
_layouts/home.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include menu-a.html %} <----------LOADING Menu a
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
_layouts/default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include menu-b.html %} <----------LOADING Menu b
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
Related
I have a default.html file in _layout folder. This file contains elements that are common throughout the entire site (e.g., the <head> element), and is supposed to be called in other layout files, which will further extend it.
Depending on the file that calls default.html, I want to include the appropriate snippets in the <head> element.
For instance, consider the (simplified) example files bellow:
_includes/post_metadata.html:
<link rel="stylesheet" href="post.css">
_layouts/default.html
<html>
<head>
{% if <is_post_layout> %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
_layouts/post_layout.html
---
layout: default
---
<article>
{{ content }}
</article>
_posts/2021-09-22-post.md:
---
layout: post_layout
---
[...]
The final page generated by Jekyll should contain:
<html>
<head>
<link rel="stylesheet" href="post.css">
</head>
<body>
<article>
[...]
</article>
</body>
</html>
So, what code should I use to replace <is_post_layout> to make it work?
There are two (and even more) options.
One is similar to the comment of #Brad West.
You can create many layouts, see docs. So create a post.html (e.g. based on default.html) layout and place it inside _layouts folder. Then you can use the layout in the front matter block. For layouts from scratch can use none for an empty layout.
Use a default layout
---
layout: default
---
Use a post layout
---
layout: post
---
The _layouts/default.html
<html>
<body>
{{ content }}
</body>
</html>
The _layouts/post.html
---
layout: none
---
<html>
<head>
{% include post_metadata.html %}
</head>
<body>
{{ content }}
</body>
</html>
The other one is do it with a variable include_post_metadata in the front matter block. Set the variable to true, when it will be omit then it is false / nil, and the if condition will be not excuted.
---
layout: default
include_post_metadata: true
---
The _layouts/default.html
<html>
<head>
{% if page.include_post_metadata %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
Page (page.include_post_metadata) is valid for pages and posts
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 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 %}
I want to divide my base.html template into 2 with some differences in style and html. My structure is like this:
base.html
<html>
<head>
<p>same content for both templates</p>
</head>
{% if category.title == 'something' %}
{% include "base-copy.html" %}
{% else %}
<body>
<p>content</p>
.
.
.
</body>
{% endif %}
</html>
base-copy.html
<body>
<p>content</p>
.
.
.
</body>
inside the body content there are several blocks and other templates extend from base.html {% extends "base.html" %}. If i just copy the whole block of code from body into the included template the content is not showing but if I leave it on the original base.html the content is showing...
Btw I'm using the include statement because otherwise I get the "block" appears more than once error from Django...
any suggestions on how to make this work?