The Magic and Mystery of Server-Side Includes

A server-side include (SSI) file lets you change many files at once, by simply adjusting a single file that sits elsewhere. Includes are used most often as menus.

If you have a package of articles that should all refer to each other, includes are a great way to handle the menu portion. Let's use Sean's ongoing series of TV pieces about the series 24 to see how they work, so you, the enterprising Flak editor, can implement them without bugging me.

In the file "24-1.html", there is a line of code that looks like this:

<!--#include virtual="/global_images/menubar/ includes/nav_24.html" -->

This code means: go to the root directory of www.flakmag.com. Go to the "global_images" folder in that directory. Go to the "menubar" folder. Go to the "includes" folder. Grab the file "nav_24.html" and insert it, right here.

You may notice that this include is sitting right above the COMMENT OUT RELATED LINKS HERE portion of the code in the file "24-1.html". That is where it belongs. Look where it is:

<!-- 24 LINKS -->

<!--#include virtual="/global_images/menubar/ includes/nav_24.html" -->

<!-- END 24 LINKS -->

<!-- COMMENT OUT RELATED LINKS HERE -->

<TR>
<TD class="menuhead" valign="top" bgcolor="#c0c0c0"> Related Links
</TD>
</TR>
<TR>
<TD class="menutext" width="170"> <a href="http://fox.com/24/guide.html">Fox's episode guide</a><br><br>
<img src="http://www.flakmag.com/justin/ transfer_temp/frontpage/spacer.gif" height="1" width="170">
</TD>
</TR>

<!-- END COMMENT OUT RELATED LINKS HERE -->

Okay then. When you want to add an include file to a story or series of stories you're working on, just insert the same code right above the COMMENT OUT RELATED LINKS HERE portion in your story, and customize it to fit your needs. Check it out:

<!-- MY SEXY FLAK DIARY LINKS -->

<!--#include virtual="/global_images/menubar/ includes/nav_sexydiary.html" -->

<!-- MY SEXY FLAK DIARY LINKS -->

Right. This code won't, of course, work until you build a file called "nav_sexydiary.html" and put it on the Flak server, at /global_images/menubar/includes/. (In other words: in the "includes" folder, found in the "menubar folder" found in the "global_images" folder.)

To build your include file, it's easiest to take existing code like Sean's 24 review thing, and just adapt it:

nav_24.html:

<!-- BEGIN 24 LINKS -->

<TR>
<TD class="menuhead" valign="top" bgcolor="#c0c0c0"> 24 Reviews
</TD>
</TR>
<TR>
<TD class="menutext" width="170"> <a href="/tv/24-4.html">Episode 4</a><br>
<a href="/tv/24-3.html">Episode 3</a><br>
<a href="/tv/24-3.html">Episode 2</a><br>
<a href="/tv/24-3.html">Episode 1</a><br>
<br>
<img src="http://www.flakmag.com/justin/ transfer_temp/frontpage/spacer.gif" height="1" width="170">
</TD>
</TR>

<!-- END 24 LINKS -->

Now, the adapted nav_sexydiary.html:

<!-- BEGIN SEXY DIARY LINKS -->

<TR>
<TD class="menuhead" valign="top" bgcolor="#c0c0c0"> Sexy Flak Diary Entries
</TD>
</TR>
<TR>
<TD class="menutext" width="170"> <a href="/features/sexydiary1.html">Entry 1: The New Intern, Alfredo</a><br>
<a href="/features/sexydiary2.html">Entry 2: Intrigue Mounts</a><br>
<a href="/features/sexydiary3.html">Entry 3: An Innocent Lunch</a><br>
<a href="/features/sexydiary4.html">Entry 4: "Mounting Little Roundtop"</a><br>
<a href="/features/sexydiary5.html">Entry 5: Bitter, Bitter Disappointment</a><br>
<br>
<img src="http://www.flakmag.com/justin/ transfer_temp/frontpage/spacer.gif" height="1" width="170">
</TD>
</TR>

<!-- END SEXY DIARY LINKS -->

And that, my friends, is it. You've got the code for the include sitting above Related Links. You've got the file - which is really just a table row with some links - sitting in the includes folder. And now, whenever you change the menu file (nav_sexydiary.html) every file that refers back to it is instantly updated. Neat, huh?

God, I don't know if I'm cool or pathetic for having written this tutorial. I'm leaning toward the latter, except I'd just be playing Diablo II otherwise. Jesus Christ my life has deteriorated since college. Still, it's several steps better than the beginning of high school. I was still painting lead figurines at that point.