title: JavaScript/jQuery/HTML: Automatically detect the file context and build relative links and images
body: <p>I have a website that has a fairly complex and often-changing structure.  To give a sense of what this website is like, here is a pretend version of its file structure:</p>
  
  <pre><code>/Website Directory
      /HTML
          home.html
          /Area1
              area1home.html
              /sub1Area1
                  sub1Area1home.html
                  /sub1Sub1Area1
                      s1s1a1p1.html
                      s1s1a1p2.html
                      s1s1a1p3.html
                  /subSubArea2
                      s1s1a2p1.html
                      s1s1a2p2.html
                      s1s1a2p3.html
                      s1s1a2p4.html 
              /sub1Area2
                  ... (similar to /sub1Area1)
          /Area2
              ... (similar to /Area1)
  
      /images
          ... (structured similar to /HTML)
  
      /CSS
          style.css
      /JavaScript
          script.js
  </code></pre>
  
  <p>I'll be frequently adding and removing files and folders as I develop the site, and each page should have links that can allow the user to navigate the tree structure.  I'll use a breadcrumbs link bar with dropdowns to accomplish this.  However, because these files change so often, I don't want to just manually write in the links on each page.  Rather, I would like to have it such that, when pages or folders are added or removed, the links on any page automatically get populated on the surrounding pages.  So if you're at page <code>s1s1a1p1.html</code> and the breadcrumbs bar displays </p>
  
  <pre><code>Home &gt; Area1 &gt; Sub1Area1 &gt; sub1Sub1Area1 &gt; s1s1a1p1.html
  </code></pre>
  
  <p>and the <code>Area1</code> button is a dropdown with the other areas (say, <code>Area1</code>, <code>Area2</code>, ... for options).  Likewise for the <code>Sub1Area1</code> button and all the others in the breadcrumbs bar.  </p>
  
  <p>And besides the links, I'll also have image files used to make a slide-show, and I'd like these to automatically update too.  That would mean that somehow when an image is added tot he folder, automatically the page should include the pictures in the slide-show.</p>
  
  <p>My question is, how is the best way to accomplish this?  Should I write some JavaScript or jQuery script that explores the file structure relative to where on the server the script was called from, and writes out the links on the HTML?  I guess it would have to be a server-side script if so, right?  Would the cost of always running a script to re-build the HTML every time the page is accessed be a substantial cost?  There might be 100 pages all together.</p>
  
  <p>Or should I do something else entirely?  Like not handle this on the server-side, but write all the files locally, and then after every edit, run a Python script that's designed to go through all the files and update the links--then the HTML files will have the links coded directly in, but I wouldn't have to manually edit them every time.</p>