Use per-page title with a Jekyll theme

Question

This is my personal GH Pages site.

I have this set in my /_config.yml:

theme: jekyll-theme-cayman

title: iBug @ GitHub
description: The small personal site for iBug

Now it shows a big title iBug @ GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried

---
title: Blog index
---

in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.

How do I set an override title for a single page?

Answer 1

Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:

---
title: My custom title
---

---

To specify another title, you need to change the layout file.

Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:

<h1 class="project-name">{{ page.title | default: site.title }}</h1>

Then Jekyll will respect the title set in the front matter, and place it there.

Answer 2

This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.

<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>

Hope that helps!

Answer 3

My approach is using javascript as follows.

<script>
    document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>

You can write a html file in _includes dir and use {% include your_file.html %}.