Adding a 'root' variable to allow pages in sub-directories.

@karawoo recently created a workshop website with a sub-directory for syllabus material. The `_layouts/page.html` template didn't work properly in this case because our included files have fixed relative paths to CSS and JS files. This PR adds the `root` variable, and references to it, where needed. It also moves the inclusion of `footer.html` to the right place (so that the footer spans the whole page). Note that the `index.html` page already had an (unused) `root` variable.
DIPnet · Apr 18, 2015 · 0b53944 · 0b53944
1 parent 6003607
commit 0b53944
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,7 +1,7 @@
 <link rel="shortcut icon" type="image/x-icon" href="{{site.swc_site}}/v5/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css"  />
-<link rel="stylesheet" type="text/css" href="css/swc.css" />
+<link rel="stylesheet" type="text/css" href="{{page.root}}/css/bootstrap/bootstrap.css"  />
+<link rel="stylesheet" type="text/css" href="{{page.root}}/css/swc.css" />
 <link rel="alternate" type="application/rss+xml" title="The Software Carpentry Blog" href="{{config.site}}/feed.xml"/>
 <meta charset="UTF-8" />
 <meta http-equiv="last-modified" content="{{site.timestamp}}" />

diff --git a/_includes/javascript.html b/_includes/javascript.html
@@ -1,3 +1,3 @@
 <!-- Javascript placed at the end of the document so the pages load faster. -->
-<script src="js/jquery-1.9.1.min.js"></script>
-<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
+<script src="{{page.root}}/js/jquery-1.9.1.min.js"></script>
+<script src="{{page.root}}/css/bootstrap/bootstrap-js/bootstrap.js"></script>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -4,24 +4,24 @@
 <!--
   Use this layout for generic pages in the workshop website.
   Use 'workshop.html' for the workshop home page.
+
+  Remember to set the variable 'root' in the header of the actual page.
 -->
 <html>
   <head>
     <title>Software Carpentry: {{ page.venue }}</title>
     {% include header.html %}
   </head>
   <body class="workshop">
-
     {% include github-ribbon.html %}
-
     <div class="container card">
       {% include banner.html %}
       <div class="row">
         <div class="col-md-10 col-md-offset-1">
           {{content}}
-          {% include footer.html %}
         </div>
-       </div>
+        {% include footer.html %}
+      </div>
     </div>
     {% include javascript.html %}
   </body>

diff --git a/setup/index.md b/setup/index.md
@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Testing Setup
+root: ..
 ---
 For Learners
 ------------