more flexible implementation of TOC

content/dl4traj/end-to-end/index.md

@@ -2,9 +2,6 @@
 title = "End-to-end Learning of Spatiotemporal Trajectories"
 date = 2026-02-02
 description = ""
-
-[extra]
-toc = true
 +++
 
 End-to-end learning means training a model to perform a task from input to output, supervising only on how the output aligns with the task's ground truth.
@@ -21,6 +18,8 @@ For each category of tasks, we will give a general problem formulation and the g
 
 > Schema overview of the three categories of end-to-end trajectory learning tasks.
 
+{{ toc() }}
+
 ## Trajectory Prediction
 
 Recall in the [introduction post](@/dl4traj/introduction/index.md) that a complete trajectory usually records the movement of the target from the beginning to the end of the movement process.

templates/page.html

@@ -12,27 +12,31 @@
         <time datetime="{{ page.date }}">{{ page.date | date(format="%B %d, %Y") }}</time>
         {% endif %}
     </header>
-    {% if page.extra.toc | default(value=false) %}
-    <nav class="toc">
-        <p class="toc-title">Table of Contents</p>
-        <ul>
-        {% for h2 in page.toc %}
-            <li>
-                <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                {% if h2.children %}
-                <ul>
-                    {% for h3 in h2.children %}
-                    <li><a href="{{ h3.permalink | safe }}">{{ h3.title }}</a></li>
-                    {% endfor %}
-                </ul>
-                {% endif %}
-            </li>
-        {% endfor %}
-        </ul>
-    </nav>
-    {% endif %}
     <div class="content">
-        {{ page.content | safe }}
+        {% if page.content is containing("<!--TOC_PLACEHOLDER-->") %}
+            {% set parts = page.content | split(pat="<!--TOC_PLACEHOLDER-->") %}
+            {{ parts[0] | safe }}
+            <nav class="toc">
+                <p class="toc-title">Table of Contents</p>
+                <ul>
+                {% for h2 in page.toc %}
+                    <li>
+                        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+                        {% if h2.children %}
+                        <ul>
+                            {% for h3 in h2.children %}
+                            <li><a href="{{ h3.permalink | safe }}">{{ h3.title }}</a></li>
+                            {% endfor %}
+                        </ul>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+                </ul>
+            </nav>
+            {{ parts[1] | safe }}
+        {% else %}
+            {{ page.content | safe }}
+        {% endif %}
     </div>
 </article>
 {% endblock content %}

templates/shortcodes/toc.html

@@ -0,0 +1 @@
+<!--TOC_PLACEHOLDER-->