HTML Templating curioustiy

Getting Help
1

So I have a series of templates, a layout that holds placement for the overall theme of elements on my site:

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"  media="screen,projection"/>

    <link type="text/css" rel="stylesheet" href="/Public/css/style.css" />
  <!-- <link rel="stylesheet" href="/Public/layout.css"> -->
  <style media="screen">
  body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
  </style>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <meta charset="utf-8">

    <title>MyAcu</title>
  </head>
  <body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script type="text/javascript">
    // Initialize collapse button
    // $('.button-collapse').sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
// $('.collapsible').collapsible();
(function($){
  $(function(){

    $('.button-collapse').sideNav({
      menuWidth: 260
    });

  }); // end of document ready



})(jQuery); // end of jQuery name space
//Function that ensures our table of contents functions correctly
$(document).ready(function() {
  $('.toc-wrapper').each(function() {
      var $this = $(this);
      var $target = $('#' + $(this).attr('data-target'));
      $this.pushpin({
        top: $target.offset().top,
        bottom: $target.offset().top + $target.outerHeight() - $this.height()
      });
    });

 $('.scrollspy').scrollSpy();

 $('select').material_select();
 });
    </script>





    <header class="page-header">

<!-- Sliding Side Nav -->
      {{template "navigation"}}

<!-- Heading Banner -->
      <div class="section card-panel white" id="index-banner">
        <div class="container">
          <a href="#!" data-activates="slide-out" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only"><i class="material-icons green-text text-lighten-1">menu</i></a>
          <div class="row">
            <div class="col s12 m9">
              <div id="logo-container" class="brand-logo"><img id="logo-container" class="brand-logo center" src="/Public/MyAcu.png" alt="" ></div>

            </div>

          </div>

        </div>

      </div>

      </header>
      <main>
      <body class="page-body grey lighten-5">

          <div id="content" class="container" style="padding-bottom:50px;">

            <div class="row">
              <!-- Main Content Rows -->
              <div class="section col s12 m9 l10">

                  {{template "content" . }}

              </div>
              <!-- Table of Contents Section -->
              <div class="col hide-on-small-only m2 l1">
                <div class="toc-wrapper pin-top" style="top:0px;" data-target="content">
                  <div >
                    <ul class="section table-of-contents">
                      <li><a href="#main">Main</a></li>
                      <li><a href="#second">Second</a></li>
                    </ul>
                  </div>
                </div>
              </div>

            </div>
          </div>
      </body>
      </main>

  <footer class="page-footer red darken-4 z-index-2">
  <div class="container">
    <div class="row">
      <div class="col l8 s12" style=" margin-top:20px;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>

    </div>

  </div>
</footer>

</html>

My problem is that if I do something with a Pipeline that could be empty like in the following:

{{ define "content" }}
<div class="card">
  <div class="card-content">
  <div class="form-group" style="padding-left:20px;">
    <form class="login" action="/login/" method="post">
      <label for="Email">Email:</label><input type="text" name="email" value=""><br>
      <label for="Password">Password: </label><input type="text" name="password" value=""><br>
      <input type="submit" class="waves-effect waves-light btn" name="Login" value="Login">
    </form>
  </div>

<div id="sociallogin" class="card-action">
  <a href="/googlelogin/" class="waves-effect waves-light btn">Login With Google</a>
  <a href="/facebooklogin/" class="waves-effect waves-light btn">Login With Facebook</a>
  <a href="/register/" class="waves-effect waves-light btn">Sign Up</a>
</div>
{{with .Error}}
<div class="card-content red">
  <label for="error" class="white-text">Error: {{.}}</label>
</div>
{{end}}
</div>
</div>
{{end}}

If the pipeline that I check for is empty then the rest of the page gets skipped and I have no footer, anyone know why it behaves this way?

2

Are you checking the error returned by template.Execute?

1 Like
3

Sweet, forgot the func returned an error and that error message helped me realize I needed to still pass in a matching value type, even if nil.

1 Like
4

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.