Custom class attribute for internal links

Support
1

I’m building a small documentation website and would like to colour links differently based on things like section, pretty similar to how docs.rs has different colours for traits vs. functions vs. structs. I came up with two ideas so far:

  1. Use a shortcode, something like {{ linktype(name=page) }} → <a href="{{ permalink of linktype/page.md }}" class="section-{{ linktype }}"></a>. This doesn’t scale, but would work for my small project with less than half a dozen sections. While this would give me some flexibility like being able to decide whether to automatically grab the page title as link text or not, I would then be required to use an HTML shortcode (CommonMark doesn’t seem to support adding additional info), so I’d lose out on the link checker (which, if I’m not mistaken, requires Markdown input) on one hand and outright error out if using get_page() to get the information on a not (yet) existing page, ruling out building the site incrementally. I’d need to know beforehand whether to call get_page() or get_section(), too.
  2. Modify Zola to add class="section-{{ sectionname }}" to each link, where pages in nested sections would then add multiple of these class names like class="section-sec1 section-sec1-subsec1". This wouldn’t require hard-coding shortcodes for each section and would be fenced by a config option. (I’m tempted to give this a try)

Both seem to be quite some work, especially the shortcode would get pretty complicated, I imagine. Is there something else that would work instead?

2

Could you pull it off with CSS only using an attribute selector? (e.g. html - CSS Target Attribute Containing Partial Match - Stack Overflow)

1 Like
3

@napoleon beat me! If your links contain the type of page they are, it’s easy to do via CSS.

4

Far too obvious. Thank you!

For the record:

  a[href*="sectionname/"] {
      color: #2dbfb8;
  }
1 Like