I was just going through the code of _master.twig in the default theme in bolt and i came across the following lines of code:
{% set main_width = theme.layout.main_width|default(8) %}
{% set aside_width = theme.layout.aside_width|default(4) %}
<!doctype html>
<html class="no-js" lang="{{ htmllang() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# make sure we always display a proper title: The record's title if there is one, appended with the
sitename. If there is no title, we append the sitename with the payoff, if there is one. #}
<title>
{%- if record.title is defined %}{{ record.title|striptags }} | {% endif -%}
{{ app.config.get('general/sitename') -}}
{% if record.title is not defined and app.config.get('general/payoff') %} | {{ app.config.get('general/payoff') }}{% endif -%}
</title>
<link rel="stylesheet" href="{{ paths.theme }}css/foundation.css">
<link rel="stylesheet" href="{{ paths.theme }}css/theme.css">
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:700,700italic' rel='stylesheet' type='text/css'>
{% block headincludes %}
{% endblock headincludes %}
</head>
I just wanted to know what is paths.theme and where is it defined ?? And what does this variable mean in bolt CMS ??
Ah, yes. That actually goes back to Bolt 1.x functionality that we were going to remove in 3.x but … time pressures. ;-)
We've recently removed/cleaned that up in those base templates as we've been implementing the functionality via Symfony Asset for a while.
The correct approach now looks like:
<link rel="stylesheet" href="{{ asset('css/foundation.css', 'theme') }}">
Where theme is the Symfony Asset "theme packages", in this case the current running theme, and css/foundation.css is the path to foundation.css, relative also to the running theme's directory.
As for where are they defined … the asset service provider.
Take a look at the bolt Cheatsheet. There you find all available paths.
The paths.theme variable contains the current relative path to the template root directory, for example /theme/base-2016/.
To list all the available path variables in your template just add the following snipped {{ dump(paths) }}
Related
Running the following three shell commands creates a Jekyll site with the default Minima theme and serves it to the browser:
jekyll new test_blog
cd test_blog/
bundle exec jekyll serve
By default, the HTML <title> element of the rendered index page includes both the blog title and the description, so that it appears as follows:
I would like to remove the description and display the only the title. Normally, the way you do this is by copying the default _includes/head.html to your local site directory and modifying the <title> element accordingly. But the default _includes/head.html includes no <title> element to speak of:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
</head>
... nor do any of the other files in the basic Minima template, as far as I can tell by grep. I tried adding a line <title>My Literal Title</title> in _includes/head.html as well, but it seems to be get overwritten by something else, because it has no effect on the displayed title.
How can I change the formatting of the homepage title in the Jekyll Minima template?
If modifying _includes/head.html to add a title element, the title will not change if the new title element is added below the {%- seo -%} line. Add it above that line, and the | and description will be removed.
I tested this on a fresh install of Jekyll and created the _includes/head.html in the directory.
My posts in _post have the css applied to them when using the: bundle exec jekyll serve. When i go to build the jekyll site with: bundle exec jekyll build; the posts in _post no-longer have the css applied to them even though in the html source, of the built site, they have the same <link rel="stylesheet" href="/assets/css/styles.css">
Here is the article _layout:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="shortcut icon" type="svg/svg" href="assets/svg/users-dmitri13.svg">
</head>
<body>
{% include navigation.html %}
{{ content }}
{% include footer--articles.html %}
</body>
If i take away the beginning / in <link rel="stylesheet" href="/assets/css/styles.css">. The css will show on the article page of the built _site, but then the posts won't be able to find the css.
The post _layout:
---
layout: articles
---
<article class="article">
<div class="header--large header--large--gradient">
<div class="heading-primary--main-static header__text-box">
<h1>{{ page.title }}</h1>
</div>
</div>
<div class="article__content">
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
<div class="paragraph--big">
{{ content }}
</div>
</div>
You should use a link tag. Jekyll will generate the correct output URL for you in the _site folder.
<link rel="stylesheet" href="{% link /assets/css/styles.css %}">
Docs for the link tag.
The <link rel="stylesheet" href="/assets/css/styles.css"> works when the folder, housing all your files, is the root.
Using bundle exec jekyll serve or hosting on a web-server makes the folder, housing all your files, the root. The beginning / in /assets/css/styles.css is telling the <link rel="stylesheet" href="/assets/css/styles.css"> to start looking in the root of your folder.
Hey i am using twig and symfony i am extending a base:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}test{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico}}"
/>
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
<footer>
{% block footer %}{% endblock %}
</footer>
</html>
and extending it on twig
{% extends 'testFEBundle:main:index.html.twig' %}
i used it before and i never had a problem. Does anybody have any idea why this is happening im using PhpStorm as an editor.
Thanks.
With Windows, by default, PhpStorm does't use UTF8. You must change settings and convert the file to UTF8.
Change settings: Go to File / Settings / Editor / File encoding menu and change options: IDE encoding, project encoding and default encoding for properties files.
You can convert the PHP file to UF8 with NotePadd++ or other tool.
I'm using twig and having a problem with include and extends.
I have a file header.html.twig that I'm including on index.html.twig. That works fine.
However, I'm also trying to overwrite a portion of the header.html.twig file with extends on index.html.twig. The code I came up with is:
<!-- index.html.twig -->
{% include '::header.html.twig' %}
{% extends '::header.html.twig' %}
{% block head %}
<li class="active">Login</li>
{% endblock %}
However, this code throws the exception "A template that extends another one cannot have a body...."
How can I fix this?
You can only have {% block... %} {% endblock %} tags in the template that extends another one.
In your case, if I got correctly what you are trying to achieve, you can define an empty block in header.html.twig (at the beginning), and override that block in index.html.twig with
{% block foo %}
{% include "header.html.twig" %}
{% endblock %}
If you are doing things outside any block, those things are considered to be the body of your twig file. And as the exception clearly tells, if you are extending a twig template, you need to overwrite some blocks contained in the extended file without any body.
You should use the {% extends %} tag without any include before, as the extends already include contents. The packaged "base.html.twig" file is a good example: you put the code that will be used everywhere in your application in a base.html.twig file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
For your case, you can add a {% block head %}{% endblock %} above the body block, and then, in your index.html.twig file, you'll overwrite this block to fulfill it.
{% extends '::base.html.twig' %}
{% block head %}
<li class="active">Login</li>
{% endblock %}
This will finally output:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<li class="active">Login</li>
</body>
</html>
Conclusion
The difference between extends and include is that you are able to override blocks from the extended file, where you can't while including it using include.
In Liquid, you can capture a variable:
{% capture header %}
<!-- My header content -->
{% endcapture %}
Then whatever is within this variable can be transformed with a filter:
{{ header | strip_newlines }}
Now, let's say you have some references/meta tags in the <head> on a web page:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if page.demo %} <link href="/css/demo.css" rel="stylesheet" type="text/css" media="screen">{% endif %}
<link href="/css/hello.css" rel="stylesheet" type="text/css" media="print">
How would you strip only the double newlines? What I want to end up is a clean <head> with one "reference" per line. The "if" structure for the demo.css file will make it so that the source of non-demo pages will look a bit like this:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/hello.css" rel="stylesheet" type="text/css" media="print">
I don't want that extra whitespace between the lines - in some cases, on bigger sites it can be 10+ lines of whitespace. Looking for a suggestion on how to get rid of this whitespace by filtering the content.
There is Jekyll plugin that strips the whitespace.
Jekyll plugins by Aucor: Plugins for eg. trimming unwanted
newlines/whitespace and sorting pages by weight attribute.
You can it directly from its Github repository. So basically you wrap your code with {% strip %}{% endstrip %}. Even if this doesn't suit you needs, you can easily change the ruby script.
For example:
{% strip %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if page.demo %} <link href="/css/demo.css" rel="stylesheet" type="text/css" media="screen">{% endif %}
<link href="/css/hello.css" rel="stylesheet" type="text/css" media="print">
{% endstrip %}
However, please remember the nature of Jekyll plugins, you can't run them on the Github Pages server.
Quote from documentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you'll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.
The latest version of Liquid has a built-in way of controlling whitespace. If your project is using Liquid 4.0 or later then you'll be able to use hyphens inside the braces to avoid creating new lines.
{%- capture random -%}
Here's a cool example
{%- endcapture -%}