Style internal and external links differently

Support
1

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?

2

That can be done via CSS directly. You do need to hardcode your domain name in the CSS but not a huge deal imo?

3

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.

4

Probably not. Most people can do a[href=^http://mydomain], a[href=^http://localhost]. Needing a specific IP is kinda niche imo

5

OK good to know.

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).