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 -%}
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.
This question already has an answer here:
How to properly reference local resources in HTML?
(1 answer)
Closed 2 years ago.
My favicon is only showing up on the home page of my website.
It's located in the root directory of my repo on github and i've added the following lines to the head.html and _config.yml files respectively.
I've tried multiple paths and file names. When inspecting the source code on other pages on the site it seems to link the relative path with /favicon.png at the end.
The home page source leads to the favicon.
<link rel="shortcut icon" type="image/png" href="favicon.png">
plugins:
- jekyll-feed
- jekyll-seo-tag
Here's my head.html file:
<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 }}">
<link rel="shortcut icon" type="image/png" href="favicon.png">
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
</head>
Should my favicon not show on every subpage and post on the site?
At present, it's only showing on the home page and not on any other page.
here's my repo:
https://github.com/Redm0nd/redm0nd.github.io
The webpage is www.dylanredmond.me
This issue can be fixed by adding a slash before favicon.png as below.
<link rel="shortcut icon" type="image/png" href="/favicon.png">
Without slash, favicon.png is related path so it is loaded from following path but it doesn't exist.
http://www.dylanredmond.me/jekyll/update/2019/04/30/favicon.png
I'm having an odd issue with Django 2.0.4 (which maybe isn't so odd since I'm new to it).
I have a template which I am rendering from a view, and the data passed in is a string containing HTML.
My view renders the template as so:
return render(request, 'template.html', { 'data' : data })
data.content contains HTML in the above.
In my template, I am rendering it as so:
template.html (what works):
{{ data.content|safe }}
This renders fine. However when I have this template include other templates, the HTML ceases to render correctly.
template.html (what I want):
{% include 'header.html' %}
{{ data.content|safe }}
{% include 'footer.html' %}
The above renders header.html and footer.html fine, but the data.content|safe part in between actually becomes text with no styling. If I view source it's correct HTML (real tags, classes, etc. No & l t ; funny business.), but the browser doesn't apply rendering to it. It just winds up plaintext, e.g. strong tags around a word don't make it bold, lists are just linebreaks, etc. Even though the HTML in the top and bottom templates are included correctly with displayable HTML.
The oddest part is the only HTML that is rendered correctly from that variable is hrefs. Nothing else. I think it's crazy that no other tag works. There is no CSS messing with the HTML, either.
I have also tried using {% autoescape off %} ... {% endautoescape %} with the same results.
Obviously my intention here is to have my view display an HTML page composed of multiple templates, with values distributed among them. Yet I can't even get this one variable to display correctly, let alone any others.
Thank you so much for any help.
Edit:
header.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<meta name="Description" content="" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,600i,700|Open+Sans:300,400,400i,600,700|Roboto:300,400,400i,700|Arvo:400,400i,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static "org/css/foundation.min.css" %}"/>
<link rel="stylesheet" type="text/css" href="{% static "org/css/styles.css" %}"/>
</head>
<body>
template.html:
{{ data.content|safe }}
'data.content' is the string '<strong>test</strong>'
footer.html:
</body>
</html>
The resulting view source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<meta name="Description" content="" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,600i,700|Open+Sans:300,400,400i,600,700|Roboto:300,400,400i,700|Arvo:400,400i,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/org/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/org/css/styles.css" />
</head>
<body>
<strong>test</strong>
</body>
</html>
The resulting displayed HTML page is just 'test' with no strong styling.
For some unknown reason any LIQUID syntax used inside <head> ends up in the <body>
What I have done?
1) I cloned a template and build my own layout with JEKYLL static site generator.
2) I installed all gems (check gemlist: 'jekyll-seo-tag' 'liquid 4.0')
3) I configured config.yml
4) I added {%SEO%} to <head>
Minimal
<head>
<meta charset="utf-8">
<meta name="author" content="Gino Ludikhuyze">
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>title</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
{% seo %}
</head>
What is happening?
If I render the website, online or local host, It shows a white GAP at the top. If I inspect it. It shows my liquid TAG in the body.
What I expect to happen?
That liquid should work in cohesion with jekyll.
Link to repo: https://github.com/bomengeduld/reno
Link to website: https://bomengeduld.github.io/reno/
Your index.html should start with (empty frontmatter):
---
---
Otherwise the Liquid will not get rendered. That is all!
In Gemfile, add following line
gem "jekyll-seo-tag"
then bundle install
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) }}