ikiwiki/doc/todo/CSS_classes_for_links.mdwn

48 lines
2.4 KiB
Plaintext
Raw Normal View History

Hi Joey,
What do you think about CSS classes for links to display link with icon?
You probably know that there are wikis with that feature, for example
Moin Moin.
Here is a piece of `common.css` file grabbed from <http://wiki.openwrt.org>
site which is powered by Moin Moin wiki:
a.www:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.http:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.https:before {content: url(../img/moin-www.png); margin: 0 0.2em;}
a.file:before {content: url(../img/moin-ftp.png); margin: 0 0.2em;}
a.ftp:before {content: url(../img/moin-ftp.png); margin: 0 0.2em;}
a.nntp:before {content: url(../img/moin-news.png); margin: 0 0.2em;}
a.news:before {content: url(../img/moin-news.png); margin: 0 0.2em;}
a.telnet:before {content: url(../img/moin-telnet.png); margin: 0 0.2em;}
a.irc:before {content: url(../img/moin-telnet.png); margin: 0 0.2em;}
a.mailto:before {content: url(../img/moin-email.png); margin: 0 0.2em;}
a.attachment:before {content: url(../img/moin-attach.png); margin: 0 0.2em;}
a.badinterwiki:before {content: url(../img/moin-inter.png); margin: 0 0.2em;}
a.interwiki:before {content: url(../img/moin-inter.png); margin: 0 0.2em;}
You can see that they use a lot of CSS classes for links, but only one CSS class
for external links is enough for me :) Please look at my example:
\[[Foo]] -> <a href="http://www.mywiki.org/foo.html">Foo</a>
\[[Bar|foo/bar]] -> <a href="http://www.mywiki.org/foo/bar.html">Bar</a>
<http://www.gnu.org/> -> <a class="external" href="http://www.gnu.org/">http://www.gnu.org/</a>
[GNU](http://www.gnu.org/) -> <a class="external" href="http://www.gnu.org/">GNU</a>
[RMS](mailto:rms@gnu.org) -> <a href="mailto:rms@gnu.org">RMS</a>
My best regards,
--Pawel
> If you did not already know, you can achieve similar results using CSS3
> selectors. Eg: `a[href="http://www.foobar.com/"] { foobar: css }` or
> `a[title~="Mail"] {text-decoration: none; }`. See
> <http://www.w3.org/TR/2001/CR-css3-selectors-20011113/> for a complete list.
>
> If you need to achieve this in IkiWiki itself, I imagine you could create a
> plugin which runs in the `format` phase of rendering and search/replaces
> specific link patterns. This should be a fairly simple exercise in regular
> expressions.
>
> --CharlesMauch