Building Web Projects

with Server-Side Includes, a little Perl, and some JavaScript
Page-Dependent Content

Page-Dependent Content

Published: May 30, 2024
Revised: September 12, 2024
Post a comment

Overview

Server-Side Includes (SSI) are often used in footer sections of pages. And the footer section may contain a link to an About page. Well, if we just included that footer on every page on the site, the link to the About page will appear on all pages, including the About page. That means that the About page will have a link to itself, which is not only bad practice, but can be confusing to the user because they select a link only to stay on the same page.

To avoid this while still using the footer snippet, all we need to do is hide that link on the About page, and we can easily do this using SSI.

Approach

In the past I had done this using Perl where I would read in the snippet and write it back out, changing the outputted text as needed. Since I was already using SSI I wanted to see if I could come up with an SSI-only solution. Turns out that's very easy. Here's what I did.

For this example, we have two pages. First is the Main page, main.shtml which is just a page on the site. The second page is the About page, about.shtml, which is in the footer.shtml file that I include on every page. In this snippet (footer.shtml) is a link the about page for the site.

The main page could loook something like this. (Note: I've omitted much of the HTML page since it's not important to the discussion.)

Here's some of the code in main.shtml.

<h1>
   Main Page
</h1>
<p>
   Here's some content for the main page.
</p>

<!--#include virtual="/inc/footer.shtml" -->

Here's some code of the code in about.shtml.

<h1>
   About This Site
</h1>
<p>
   Here's some content for the about page.
</p>

<!--#include virtual="/inc/footer.shtml" -->

Here's the code for footer.shtml.

<!-- s:footer.shtml -->
<!--#set var="thisPage" value="$REQUEST_URI" -->
<!--#if expr='v("thisPage") != "/about.shtml"' -->
<p>
   You will find more information on the <a href="about.shtml">About</a> page.
</p>
<!--#endif -->
<!-- e:footer.shtml -->

Explanation

footer.shtml works by first setting the variable, "thisPage," to be equal to the SSI environmental variable, "REQUEST_URI."

When this snippet is on main.shtml the variable thisPage (line #2) is set to "/main.shtml" and when it's on about.shtml it is set to "/about.shtml." Using SSI to compare the variable thisPage against the page of interest (line #3), about.shtml, we can get SSI to show the content as long as the user is not on about.shtml, that is when thisPage is not equal to /about.shtml in line #3.

Output

main.shtml

On main.shtml, the snippet displays as shown below, where it provides a link to about.shtml.

Here's some content for the main page.

You will find more information on the About page.

about.shtml

On about.shtml, the snippet displays as shown below, where the link to about.shtml is not displayed.

Here's some content for the About page.