I just came across a pretty weird problem. In order to list the static pages I created in the page's top navigation, I used
{% for page in site.pages %}
{{ page.title }}
{% endfor %}
For some reason, the output after jekyll serve will create this:
Index
Projects
Does anyone have an idea why the .css file is inserted here as a link?
I do call the *.css in my header as:
<link rel="stylesheet" type="text/css" href="{{ "/css/style.css" | prepend: site.baseurl }}">
I use SCSS in order to create my final css:
root structure:
/css/style.scss (sets a few variables and imports elements from /_scss)
/_scss/_main.scss
/_scss/_mobile.scss
Final _site structure (regarding css):
/css/style.css
That's why the original jekyll new mysite creates a navigation (_includes/header.html) with :
{% for page in site.pages %}
{% if page.title %}
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
Only page with a title are in the menu.
Everything with a front matter, that is not a post or a collection, is a page. So, your scss, feed.xml and so on are pages.
Give a title to pages you want to see in the menu an filter with {% if page.title %}.
Related
Currently aaronirwin.com has an empty title tag like <title></title>
I defined title in the index front matter and am using page.title in the template
Code is in github pages
How do I get the title to render?
You can use the site title in the index
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
and define the site title in the _config.yml file.
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 %}
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 %}
If I'm using Jekyll to build a blog and I want to share the link to posts. I'd like to have a preview thumbnail for the posts, however, the post itself has no images on it, and I'd like to keep it that way. Any ideas on how do that?
I found the solution I needed.
Following the Open Graph Protocol, if a post has a thumbnail image available for sharing via Facebook, Twitter, etc., you can specify your <head> open graph metadata like this.
{% if page.image %}
<meta property="og:image" content="path/to/post/image.jpg">
{% else %}
<meta property="og:image" content="path/to/page/image.jpg">
{% endif %}
If the post doesn't have a specified image it will use the image specified for the page. Then add the following to the post's front matter:
---
image: path/to/post/image.jpg
---
You could define a thumbnail attribute in each post's front matter, then use that when you create the page containing links to your posts.
Here is an example blog post:
---
layout: default
thumbnail: "/path/to/the/thumbnail.png"
---
This is a blog post!
And then in your blog's index.html page, you'd do something like this:
{% for post in site.categories.blog %}
<div>
<a href="{{ post.url }}" ><img src="{{ post.thumbnail }}" />
<a href="{{ post.url }}" >{{ post.title }}</a>
</div>
{% endfor %}
I'm developing an web app with Google app engine that uses jinja2 as a template engine.
I'm my base.html file i have a <link> tag for CSS.
Now i have a another file front.html that extends the first file . It has the {% extends 'base.html' %} block and the code is in a block {% block content %} ....... {% endblock %}.
In the second file, the CSS style won't apply. Any ideas how to fix it ?
To be more precise:
base.html :
<head>
<link ... >
< /head>
<body>
{% block content %}
{% endblock %}
</body>
front.html:
{% extends 'base.html' %}
{% block content %}
....
{% endblock %}
The style from the tag won't apply to the block.
Ok. I figured it out . The path to the front.html was something like /path1/path2 while for the base.html the path was /path1. So it did not link corectly.
As a solution you can make a block on the link tag and the override it something like:
{% block stylesheet %}
<link href="path1/something.css">
{% endblock %}
and in the child you have
{% block stylesheet %}
<link href="/path1/path2/something.css">
{% endblock %}
Or, you could put a path in the app.yaml file.