# Enable ToC on page layout with Chirpy theme

**URL:** <https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713>\
**Category:** Help\
**Created:** [February 12, 2025, 12:22pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713 "2025-02-12T12:22:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafisics](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rafisics/32/5996_2.png) [@rafisics](https://talk.jekyllrb.com/u/rafisics)\
**Post date:** [February 12, 2025, 12:22pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/1 "2025-02-12T12:22:46Z")

</div>

I want to enable ToC on both `page` and `post` layouts. Here’s the [modified template](https://github.com/rafisics/website-theme/tree/a469743076675a5491a8691eb609f0e93f5f47fd) I am using.  
I have tried with changing the [\_layouts/page.html](https://github.com/rafisics/website-theme/blob/a469743076675a5491a8691eb609f0e93f5f47fd/_layouts/page.html) in the following way:

```auto
---
layout: default
refactor: true
panel_includes:
  - toc
---

{% include lang.html %}

{% include toc-status.html %}

<article class="px-1" data-toc="{{ enable_toc }}">
  {% if page.layout == 'page' or page.collection == 'pages' %}
    {% assign page_key = page.title | downcase %}
    {% assign title = site.data.locales[lang].pages[page_key] | default: page.title %}
    <header>
      <h1>
        {{ title }}
      </h1>
      {% if page.description %}
      <blockquote class="prompt-info">{{ page.description }}</blockquote>
      {% endif %}
    </header>

  {% if enable_toc %}
    <div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
      <span class="label text-truncate">{{ page.title }}</span>
      <button type="button" class="toc-trigger btn me-1">
        <i class="fa-solid fa-list-ul fa-fw"></i>
      </button>
    </div>

    <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
      <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
      <i class="fa-solid fa-angle-right fa-fw"></i>
    </button>

    <dialog id="toc-popup" class="p-0">
      <div class="header d-flex flex-row align-items-center justify-content-between">
        <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
        <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
          <i class="fas fa-close"></i>
        </button>
      </div>
      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
    </dialog>
  {% endif %}

    <div class="content" style="text-align: justify;">
      {{ content }}
    </div>
  {% else %}
    {{ content }}
  {% endif %}
    <!-- lastmod date -->
    <!-- pageviews -->
</article>

```

and tested with following change in [\_pages/about.md](https://github.com/rafisics/website-theme/blob/a469743076675a5491a8691eb609f0e93f5f47fd/_pages/about.md):

```auto
---
layout: page
title: About
permalink: /about/
toc: true
---

# H1 

## H2

### H3 

```

The ToC is not appearing. How to resolve it?

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [February 15, 2025, 10:10pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/2 "2025-02-15T22:10:15Z")

</div>

If you check your code, there is no mention to `page.toc`, but there is a variable like `enable_toc` in your `_layouts/page.html`. Maybe change from `enable_toc` to `page.toc`.

---

<div class="post-metadata">

**Author:** ![rafisics](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rafisics/32/5996_2.png) [@rafisics](https://talk.jekyllrb.com/u/rafisics)\
**Post date:** [February 16, 2025, 1:46am UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/3 "2025-02-16T01:46:08Z")

</div>

I tried what you suggested. It didn’t work.  
If you check [\_layouts/post.html](https://github.com/rafisics/website-theme/blob/a469743076675a5491a8691eb609f0e93f5f47fd/_layouts/post.html), it has `enable_toc` too and it works.

---

<div class="post-metadata">

**Author:** ![rafisics](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rafisics/32/5996_2.png) [@rafisics](https://talk.jekyllrb.com/u/rafisics)\
**Post date:** [February 17, 2025, 1:48pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/5 "2025-02-17T13:48:37Z")

</div>

The steps I have followed to enable ToC on the `page` layout: [How to enable ToC on the layout `page`? · cotes2020/jekyll-theme-chirpy · Discussion #2241 · GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/discussions/2241#discussioncomment-12213450)

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [February 20, 2025, 3:41pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/6 "2025-02-20T15:41:57Z")

</div>

I’ve never used the Chirpy template. Have you tried asking this question in their Q&A section?

---

<div class="post-metadata">

**Author:** ![rafisics](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rafisics/32/5996_2.png) [@rafisics](https://talk.jekyllrb.com/u/rafisics)\
**Post date:** [February 20, 2025, 4:01pm UTC](https://talk.jekyllrb.com/t/enable-toc-on-page-layout-with-chirpy-theme/9713/7 "2025-02-20T16:01:26Z")

</div>

Yes, I posted there, as you see in my previous reply - I have shared the link.  
The issue seems solved. But my solution might have triggered something that disabled the PWA pop-up of the theme.

I have posted here ([Enable PWA (Update Popup) and Deployment Issue](https://talk.jekyllrb.com/t/enable-pwa-update-popup-and-deployment-issue/9725)) and on GitHub ([Enable PWA (Update Popup) and Deployment Issue · cotes2020/jekyll-theme-chirpy · Discussion #2258 · GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/discussions/2258#discussion-7977990)) as well.