I originally used jQuery to mark external links. After accidentally removing any other uses for jQuery, and realizing I just don't give a rat's ass about IE6 or IE7, there was no reason to avoid CSS3. See External Links for what I'm doing now.

Should we use CSS3?

Short answer: yes. See these instructions.

Here's what I thought a week ago:

It would be nice to use css3 but that doesn't work in IE6 (six years later we're still worrying about this dreck, sheesh...). So, since I'm using jQuery for syntax highlighting anyway (update: no I'm not), I might as well use it to smooth over the browser issues too. The marks won't show up if the user has Javascript turned off. But who turns off Javascript any more?

Steve Purcell already figured out the hard stuff. The only thing to do is shove it into Ikiwiki.

There are a number of steps in here that are more intrusive than they should be... Hopefully this can become easier as Ikiwiki matures.

Create the Graphic

See External Links.

Add jQuery to Ikiwiki

Download the latest copy of jquery.js and store it in your wiki's root directory.

$ cd wiki
$ wget http://jqueryjs.googlecode.com/files/jquery-1.2.3.js -O jquery.js

Now we need to override the page template to add jQuery to every wiki page. It's not really clear how Ikiwiki intends for you to do this... Here's how I did it; please edit if there's a better way.

Copy all the templates somewhere specific to your wiki

$ cp -r /usr/share/ikiwiki/templates mywiki/templates

Set this as the templates directory in your configuration file

templatedir => "/full/path/to/source/templates",

And then add this line to the page template. You'll notice I'm adding it at the end of the page, rather than in the page header (the customary spot). That's because I want the page to display even before jQuery is loaded. For users behind slow links, this shouldn't slow down their fast Ikiwiki browsing experience at all. They just might be startled when the external icon links appear a few seconds after the page has loaded.

--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -112,5 +112,6 @@ Last edited <TMPL_VAR NAME=MTIME>
 <!-- from <TMPL_VAR NAME=WIKINAME> -->
 </div>

+<script type="text/javascript" src="<TMPL_VAR BASEURL>jquery.js"></script>
 </body>
 </html>

Rebuild your wiki and then ensure that jQuery is indeed being loaded like you'd expect. Hit Shift-Reload and then View Source and just make sure that line is there. If you have Firebug installed, try typing $('a') into the console. It should return an array of all links on the page)

The WikiUrl Plugin

Unfortunately, Ikiwiki doesn't supply the WIKIURL variable to the page renderer. We'll make a quick&dirty plugin to do that.

wikiurl.pm

And make sure that your external links have the 'external' class, and your internal links don't.

Now, enable it in your settings file:

add_plugins => [ ... 'wikiurl' ],

Add the jQuery Code

Now we need to add a small expression to find all the external links in the page and give them the appropriate class. You'll add one line of JavaScript right below the line including jQuery.

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 8fd0c30..802821a 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -113,5 +113,9 @@ Last edited <TMPL_VAR NAME=MTIME>
 </div>

 <script type="text/javascript" src="<TMPL_VAR BASEURL>jquery.js"></script>
+<script type="text/javascript">
+$('a[href^=http]:not("[href^=<TMPL_VAR WIKIURL>]"):not(":has(\'img\')")').addClass('external');
+</script>
+
 </body>
 </html>

See this page (mentioned earlier) for how this expression was derived.

Add the CSS

Finally, we need to change the appearance of external links with CSS. Just add the following to your site's stylesheet (local.css in the wiki's root directory)

a.external {
       background:transparent url(/External-12x12.png) no-repeat scroll right center;
       padding-right:14px;
}

Conclusion

You're done! You should now see little icons next to every external link.

TODO

  • what is the proper way to add a little HTML to every page?
  • what is the proper way to override the page template?
  • should we add rel=nofollow to all external links? Probably not, since I doubt many robots speak javascript anyway?
  • try to convince upstream to supply WIKIURL to all page renderers.