This shows you how modify Ikiwiki to put a mark on all external links, just like Mediawiki and Moin Moin.


When clicking on a link, are you going to going to see a new page? Or will you suffer 20 pop-under ads and then need to re-install your operating system? Since links are the the most important part of a wiki (otherwise they're just 250-page Word documents), I want to reduce link fear as much as I can.

Create the Graphic

Download wikipedia's svg icon and use Inkscape to change the colors to match your links. Or, even easier, just edit the file with a text editor (look for stroke:#COLOR).

Update: I made some changes to make the svg render more clearly as a small icon. It also can render on top of background colors other than white. Use External2.svg instead.

Finally, now that the colors and fills are correct, resize the icon to be the same size as your text (you may have to tweak -h and -w).

$ inkscape External2.svg -e External-12x12.png -h 12 -w 12

And check your new external link icon into your site's root.

Add Link Detection

I use CSS3 to do this because it's easier (only need to edit local.css) and lighter weight. The drawback is that it doesn't work on a number of browsers. If you care about this, you'll want to follow these lengthly instructions.

Add the following CSS to your local.css file. If it doesn't already exist in your wiki's root directory, go ahead and create it.

/* show external link icon on all absolute urls */
a[href^="http:"] {
    background: transparent url(/External-10x10.png) no-repeat scroll right center;
    padding-right: 12px;
/* except on URLs back into our domain */
a[href^=""] {
    background: transparent;
    padding-right: 0px;

Make sure to replace the path to the graphic and the base URL of your site.


You're done! You may need to rebuild your wiki, and you may have to hit shift-reload on pages that are already in your browser's cache, but you should now see little icons next to every external link.