Document strip_anchors plugin in pelican theme post
Added new section explaining the homepage summary filtering plugin that strips TOC anchor links from article summaries. Includes: - Why the problem exists (RST generates anchor links in TOC) - How the plugin solves it (strip_anchors Jinja2 filter) - Implementation details with code examples - Template usage example This plugin prevents broken anchor links in homepage excerpts.
This commit is contained in:
parent
71c8d78853
commit
80cba5647b
1 changed files with 57 additions and 0 deletions
|
|
@ -86,6 +86,63 @@ When the TOC is present, the main content width adjusts using the ``:has()`` pse
|
|||
width: 65%;
|
||||
}
|
||||
|
||||
homepage summary filtering
|
||||
===========================
|
||||
|
||||
ReStructuredText automatically generates anchor links in section headings when a table of contents is present. These anchors work perfectly on article pages, but become broken links when article summaries appear on the homepage - the anchor targets don't exist in that context.
|
||||
|
||||
To solve this, I created a Pelican plugin that provides a ``strip_anchors`` Jinja2 filter. This filter removes TOC divs and ``toc-backref`` anchor links from article summaries before they're rendered on the homepage.
|
||||
|
||||
**The Plugin**
|
||||
|
||||
The plugin (``lib/strip_toc_summary.py``) uses regex to strip problematic HTML:
|
||||
|
||||
.. code-block:: python
|
||||
|
||||
def strip_anchors(text):
|
||||
"""Jinja2 filter to strip TOC and anchor links from HTML text."""
|
||||
if not text:
|
||||
return text
|
||||
|
||||
# Remove the entire <div class="contents"> ... </div> block
|
||||
text = re.sub(
|
||||
r'<div\s+class="contents[^"]*"[^>]*>.*?</div>',
|
||||
'',
|
||||
text,
|
||||
flags=re.DOTALL | re.IGNORECASE
|
||||
)
|
||||
|
||||
# Remove anchor links from headings
|
||||
# Converts <a class="toc-backref" href="#id1">text</a> to just text
|
||||
text = re.sub(
|
||||
r'<a[^>]*class="[^"]*toc-backref[^"]*"[^>]*>(.*?)</a>',
|
||||
r'\1',
|
||||
text,
|
||||
flags=re.DOTALL | re.IGNORECASE
|
||||
)
|
||||
|
||||
return text
|
||||
|
||||
**Template Usage**
|
||||
|
||||
The filter is applied in the theme's ``index.html`` template:
|
||||
|
||||
.. code-block:: jinja
|
||||
|
||||
<div class="article_text">
|
||||
{{ article.summary | strip_anchors }}
|
||||
</div>
|
||||
|
||||
This approach ensures that:
|
||||
|
||||
1. Article pages retain their TOC anchor links for proper navigation
|
||||
2. Homepage summaries display clean headings without broken links
|
||||
3. The filtering happens at template render time, not during content generation
|
||||
|
||||
**Why This Matters**
|
||||
|
||||
Without this filter, homepage excerpts would contain links like ``<a href="#the-design">the design</a>`` that point to anchors that don't exist on the homepage. This creates a poor user experience with broken navigation. The filter strips these anchors while preserving the heading text, resulting in clean, functional homepage previews.
|
||||
|
||||
dark mode implementation
|
||||
========================
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue