''. We also preserve the google analytics code that was in the old website. What nav.html looks like ===== footer html ===== Our page footer consists mainly of a copyright symbol and a date. ''_includes/foot.html ''contains



    © Eastbots 2019

===== end-of-page code ===== Taking another cue from the old jekyll website, we look at the new html for common code that goes at the bottom of every page body. In ''_includes/end.html'' we copy the javascript includes used in the new page, which happen to match those in the [[https://getbootstrap.com/docs/4.3/getting-started/introduction/ | Bootstrap documentation]] link to end.html in github. ===== Layout template for a page ===== 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. 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:





{% include head.html %}


  
    
    {% include nav.html %}
    
    
        
            {{ page.title }} {{ content }}
        
         {% include footer.html %}
    
    
    {% include end.html %}

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:


---
title: Contact Us
layout: standard
---

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:


To contact the Eastbots, please email us at , and our team will get back to you as soon as possible.

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:





{% include head.html %}


    {% include nav.html %}
    
      
	
	  {{ content }}
	
      
    
    {% include footer.html %}
  
 
  {% include end.html %}

TODO get this page up too.