Differences

This shows you the differences between two versions of the page.

--- jekyll_website_overhaul [2019/09/12 00:03] – tell
+++ jekyll_website_overhaul [2019/09/12 00:40] (current) – [The Home Page is Special] tell
@@ Line 56: / Line 56: @@
     <p>&copy; Eastbots 2019</p>
 </footer>
+</code>
 ===== end-of-page code =====
@@ Line 68: / Line 69: @@
 With those include files set up, we can now stitch back together most of the standard pages in the new site.
-Page layouts are done with templates in the ''_layouts'' directory.
+Page layouts are done with templates in the ''_layouts'' directory.  Mostly they're very short, and contain a little bit of HTML and some jekyll-syntax include statements.
+Here's ''_layouts/standard.html'' in its entirety:
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{% include head.html %}
+</head>
+<body>
+  <div id="page-wrapper" class="container-fluid p-0">
+    <!-- Navigation bar -->
+    {% include nav.html %}
+    <!-- Main body -->
+    <div class="container">
+        <div class="starter-template" id="post">
+            <h2 align="center">{{ page.title }}</h2> {{ content }}
+        </div>
+        <hr> {% include footer.html %}
+    </div>    <!-- /.container -->
+    {% include end.html %}
+  </div>
+</body>
+</html>
 </code>
+The best thing about these layout templates is that they're short, and serve as an outline of the whole page.  With the reusable pieces broken out into files, ''_layouts/standard.html'' reads just like the bulleted list of pieces that we started with above.
+Some of the things we see in there are the include statements for head, nav, and end; they look like
+''{% include nav.html %}''
+There's also ''%%{{page.title}}%%'' again, and  ''%%{{content}}%%'', which gets replaced with the markdown
+content for the page.
+====== Page Content ======
+Finally, we get to put together a page.  The new "Contact Us" page consists of three short
+paragraphs of text.  The markdown source for that page goes into ''contact/index.md''
+and starts off with a simple header:
+<code>
+---
+title: Contact Us
+layout: standard
+---
+</code>
+Unless you know what you're doing (or have read more markdown documentation than I have)
+put four lines exactly like these into the .md file for each page.  That's:
+  * three dashes
+  * title: followed by the actual page title
+  * layout: followed by the name of the page layout template, here ''standard'' means to use ''_layouts/standard.html''
+The file continues wiht the actual text for the page, starting with:
+<code>
+To contact the Eastbots, please email us at <admin@eastbots.com>, and our team will get back to you as soon as possible.
+</code>
+Note that the markdown content can include some html, but that it generally doesn't have to.  Just type plain text, and seperate each paragraph with a blank line, and your text will get formatted up nicely.
+====== The Home Page is Special ======
+The main home landing page is special: it doesn't use the "standard" layout.  It has its own layout,
+''_layouts/home.html'', which includes some additional css to set up the transparent "card" overlayed on top of a big background image.
+The text in the card comes from the to level ''index.md'' file.
+We actually could just put the whole thing into a single html file in the github repo, but breaking it up this way is useful for several reasons:
+  * we can reuse this layout if we want.
+  * the text can still be edited in its own markdown file, even by someone who doesn't understand html or the rest of the site
+  * an opportunity to learn more jekyll
+''_layouts/home.html'' is still a concise outline of what goes into the page:
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{% include head.html %}
+<style>
+{% include css/home.css %}
+</style>
+</head>
+<body>
+  <div id="page-wrapper" class="container-fluid p-0">
+    {% include nav.html %}
+    <div id="info-card" class="card shadow-sm">
+      <div class="card-body">
+	<div class="card-text">
+	  {{ content }}
+	</div>
+      </div>
+    <hr>
+    {% include footer.html %}
+  </div> <!-- /container -->
+  {% include end.html %}
+</body>
+</html>
+</code>
+TODO get this page up too.