I would like to style external links like [foo](https://bar.org) different to internal links like [foo](@/bar/baz.md). For example to add an svg image ::after the link-text of all external links as for example wikipedia does. It would be nice to still use standard markdown links. Zola seems to know which links are external and which are internal (the config option external_links_target_blank suggests that this is the case). So it would be good if I could use that information from css (somehow).
Currently I use a shortcode extlink.html for external links, where I add a css-class:
<a class="external-link" href="{{ url }}">
{{ body }}
</a>
I like that this is very explicit. But I still prefer writing pure markdown for links. I don’t want to rely on heuristics which analyze the url (note that zola serve does not use the base_url).
Is there a solution where I just write ordinary markdown links in my content files?
This is part of what I meant with “analyzing” the url. I wanted a solution which just works everywhere (without additional setup), even when I serve it in my local network to view how it looks on my tablet (then the domain is the local ip address of my computer). That is the main reason I preferred the shortcode over that.
I can live with my workaround via shortcode (probably for others it isn’t even a workaround since it is really flexible, just the syntax is not very beautiful for such simple thing like a link imo).
Would you think that implementing a mechanism that propagates zolas knowledge about which links are internal vs external to the final HTML (e.g. via css class like above) would be a good thing? Just want to know your opinion.
I was just thinking that something like external_link_css_class = "my-css-class" in config.toml would be very similar to the already existing option external_link_target_blank = true. It could just add the specified css class to the anchor-element in a similar way how target="_blank" is added by the latter (already existing) option. For symmetry reasons internal_link_css_class could also be provided.
But I am no web-developer and also new to zola so I do not know if this would be a good feature in general (for example because others would classify links in yet another way leading to an explosion of options or something like that).
The problem with this approach is that themes can’t provide the feature. I’m trying to use config.toml exclusively for theme setup, and avoid asking users to move or copy or edit CSS.
For now, I can achieve this with JavaScript, but it feels wasteful.