{% extends "base.html" %} {% block title %}{{ post.title }} - {{ config.title }}{% endblock %} {% block content %} <div class="article-container"> <article class="article-content"> <header class="article-header"> <h1 class="article-title">{{ post.title }}</h1> <div class="article-meta"> <time class="article-date">{{ post.date }}</time> {% if post.language %} <span class="article-lang">{{ post.language }}</span> {% endif %} </div> <div class="article-actions"> {% if post.markdown_url %} <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown"> .md </a> {% endif %} {% if post.translation_url %} <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation"> 🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %} </a> {% endif %} </div> </header> <div class="article-body"> {{ post.content | safe }} </div> <div id="comment-atproto"></div> </article> <aside class="article-sidebar"> <nav class="toc"> <h3>Contents</h3> <div id="toc-content"> <!-- TOC will be generated by JavaScript --> </div> </nav> </aside> </div> <script> // Generate table of contents function generateTableOfContents() { const tocContainer = document.getElementById('toc-content'); const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6'); if (headings.length === 0) { tocContainer.innerHTML = '<p class="no-toc">No headings found</p>'; return; } const tocList = document.createElement('ul'); tocList.className = 'toc-list'; headings.forEach((heading, index) => { const id = `heading-${index}`; heading.id = id; const listItem = document.createElement('li'); listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`; const link = document.createElement('a'); link.href = `#${id}`; link.textContent = heading.textContent; link.className = 'toc-link'; link.addEventListener('click', function(e) { e.preventDefault(); heading.scrollIntoView({ behavior: 'smooth' }); }); listItem.appendChild(link); tocList.appendChild(listItem); }); tocContainer.appendChild(tocList); } // Initialize on page load document.addEventListener('DOMContentLoaded', () => { generateTableOfContents(); }); </script> {% endblock %} {% block sidebar %} {% endblock %}