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,
--[[Paweł|ptecza]]
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.
Hi Charles,
Thanks for the hint! I don't know CSS3 yet :) What modern and popular
WWW browsers do support it now?
Safari supports it. Firefoz&Co support most of it. IE6 did not, but IE7
supports a fair part of CSS3, ans is said to support selectors.
Example on how to use selectors here: http://www.kryogenix.org/days/2002/08/30/external
I also think this should be in an external plugin, not in ikiwiki.
I find CSS3 support still spotty... Here are some notes on how to do this in IkiWiki with jQuery: http://iki.u32.net/setup/External_Links --[[sabr]]
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
I've never written plugin for ikiwiki, but I can try if it's simple job :)
--[[Paweł|ptecza]]
I wouldn't mind adding a single css class to ikiwiki links, but it
would have to be a class added to all internal, not all external, links.
Reason is that there are many ways for external links to get into an
ikiwiki page, including being entered as raw html. The only time ikiwiki
controls a link is when an internal link is added using a WikiLink.
(Note that tags get their own special
[[rel_attribute|rel_attribute_for_links]] now that CSS can use.)
--[[Joey]]
