How to add more to a head on Jekyll

Asked 4/1, 2019 at 7:48 Answered 29/1, 2022 at 14:21

I have a GitHub hosted website, that is currently using a Jekyll theme, and running on HTML. The problem with this is I have to put

---
layout: default
---

Into the beginning, and that takes care of the head. But now, I can't add anything to the head, like important scripts I need to use. If anyone has experience with this, what can I do?

Chairman answered 4/1, 2019 at 7:48 Comment(0)

I found a solution to this on Jessica Reel's blog.

To your default.html layout, in your head (or better yet at the end of your body, unless your scripts need to be in the head), add something like this:

  {% if page.custom_js %}
    {% for js_file in page.custom_js %}
      <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ js_file }}.js"></script>
    {% endfor %}
  {% endif %}

Then in your page's front-matter, add:

custom_js:
- example-js-file-1
- example-js-file-2

Exact same principle works great for CSS, too.

I ended up taking it a step further with my own website since I use nested layouts. Jekyll 3 so has a separate variable namespace for layout variables, so in the head of my main layout I specify first the layout's custom css then the page's custom css:

{% if layout.custom_css %}
  {% for stylesheet in layout.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}
{% if page.custom_css %}
  {% for stylesheet in page.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}

So you can see that it applies the custom css from the layout's front matter, then the custom css from the specific page's front matter, so that stuff cascades properly from general to specific styles.

Pug answered 18/4, 2020 at 7:55 Comment(0)

If you are using a Jekyll theme by GitHub, you can populate the following file with the desired headers:

_includes/head-custom.html

Because this (AFAIK) overrides the theme-provided file, I recommend using the theme's own file as a starting point. In the cayman theme, for example, it looks like this (link, CC0):

<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->
{% include head-custom-google-analytics.html %}

<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->

<!-- end custom head snippets -->

Please note that I only tested this for the cayman and architect themes.

Cystine answered 29/1, 2022 at 14:21 Comment(1)

With the minima layout the name should be _includes/custom-head.html – Omora 22/5 at 20:58

-1

https://jekyllrb.com/docs/layouts/#usage

The first step is to put the template source code in default.html.

Create the following file _layouts/default.html

And then you can put whatever you want inside and customize the head, for example:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

Fellmonger answered 4/1, 2019 at 9:17 Comment(2)

Just to clarify, in the file _layouts/default.html, do I only put the head of what GitHub generates for me? Github generates some code for the template automatically on the website, and I can see it on its source code. So do I copy the automatically generated code, and put it in the said file? – Chairman 4/1, 2019 at 19:49

You have to put everything in the default.html and use the variables as shown in the example. Feel free to read the documentation to get a full understanding of how the templates work. – Fellmonger 4/1, 2019 at 20:21

-2

Jekyll view can be divided into two main parts on is layout and second is content. Layouts are stored in _layouts folders, you can add your own layout there, you can even use other layouts to create a new one check here.

For each layout, you need to {{ content }}, this is the place where your page content will be added finally.

you can also add some more information in your content to access on the layout. Added info

And get it on the main/layout page. Get info

Insubstantial answered 4/1, 2019 at 12:7 Comment(0)

Recommended topics

Hot tags