feat(nav): add anchor TOC in sidebar for toc-enabled pages
- Pass extracted anchors through template context - Render anchor links under active page when page.toc is true - Hierarchical indentation by heading level (h2-h6) - CSS styling: smaller font, muted color, border-left indicator - Add toc: true to templates.md as example
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
title: Tera Templates
|
||||
description: Customizable templates without recompilation
|
||||
weight: 1
|
||||
toc: true
|
||||
---
|
||||
|
||||
sukr uses [Tera](https://tera.netlify.app/), a Jinja2-like templating engine. Templates are loaded at runtime, so you can modify them without recompiling sukr.
|
||||
|
||||
39
docs/static/style.css
vendored
39
docs/static/style.css
vendored
@@ -111,6 +111,45 @@ body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Anchor navigation (TOC in sidebar) */
|
||||
.sidebar .nav-anchors {
|
||||
margin-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-anchors .anchor-link {
|
||||
font-size: 0.8rem;
|
||||
color: var(--fg-muted);
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.sidebar .nav-anchors .anchor-link:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Indent anchors by heading level */
|
||||
.sidebar .nav-anchors .level-3 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-anchors .level-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-anchors .level-5 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-anchors .level-6 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
|
||||
14
docs/templates/base.html
vendored
14
docs/templates/base.html
vendored
@@ -38,11 +38,25 @@
|
||||
{% set section_prefix = item.path | replace(from="index.html", to="") %}
|
||||
{% set is_current_section = page_path is starting_with(section_prefix) %}
|
||||
<a href="{{ prefix }}{{ item.path }}" {% if page_path==item.path %}class="active" {% endif %}>{{ item.label }}</a>
|
||||
{% if page_path == item.path and page.toc and anchors %}
|
||||
<div class="nav-anchors">
|
||||
{% for anchor in anchors %}
|
||||
<a href="#{{ anchor.id }}" class="anchor-link level-{{ anchor.level }}">{{ anchor.label }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if config.nested_nav and item.children %}
|
||||
<div class="nav-children{% if is_current_section %} expanded{% endif %}">
|
||||
{% for child in item.children %}
|
||||
<a href="{{ prefix }}{{ child.path }}" {% if page_path==child.path %}class="active" {% endif %}>{{ child.label
|
||||
}}</a>
|
||||
{% if page_path == child.path and page.toc and anchors %}
|
||||
<div class="nav-anchors">
|
||||
{% for anchor in anchors %}
|
||||
<a href="#{{ anchor.id }}" class="anchor-link level-{{ anchor.level }}">{{ anchor.label }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user