Use liquid to determine whether to render ToC

_includes/panel.html

@@ -47,13 +47,13 @@
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <span class="pl-3 pt-2 mb-2">
+  {% if include.toc %}
+    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+      <span class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}
-    </span>
-    <nav id="toc" data-toggle="toc"></nav>
-  </div>
+      </span>
+      <nav id="toc" data-toggle="toc"></nav>
+    </div>
   {% endif %}
 
 </div> <!-- #panel-wrapper -->

_layouts/post.html

@@ -111,7 +111,15 @@ layout: default
 
   </div> <!-- #post-wrapper -->
 
-  {% include panel.html %}
+  {% assign enable_toc = false %}
+
+  {% if site.toc and page.toc %}
+    {% if content contains '<h2' or content contains '<h3' %}
+      {% assign enable_toc = true %}
+    {% endif %}
+  {% endif %}
+
+  {% include panel.html toc=enable_toc %}
 
 </div> <!-- .row -->
 

assets/js/_utils/toc-filter.js

@@ -1,14 +0,0 @@
-/*
- * Hide the empty ToC in posts.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-$(function() {
-  if ($("#post-wrapper .post-content h1").length === 0
-      && $("#post-wrapper .post-content h2").length === 0) {
-    $("#toc-wrapper").addClass("unloaded");
-  }
-});

assets/js/post.min.js

@@ -12,8 +12,6 @@ layout: compress
 
 {% include_relative lib/_bootstrap-toc.min.js %}
 
-{% include_relative _utils/toc-filter.js %}
-
 {% include_relative _utils/img-hyperlink.js %}
 
 {% include_relative _utils/lang-badge.js %}