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.
Related
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
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) }}
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.
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 -%}