I am trying to develop a navigational menu being referenced to different pages in my app. am using Materialize css as a ui and placed the nav codes in a separate file
<div id="navigation">
<nav>
<div class="nav-wrapper blue darken-3">
<div class="container">
<a href="#" class="brand-logo">
<a href="#" class="sidenav-trigger" data-target="sideMobile"> <i class="material-icons">menu</i> </a>
<ul class="right hide-on-med-and-down">
<li>
<a href="<?= getbaseUrl(); ?> " class=" waves-effect waves-light" type="button" >Incoming Stock</a>
</li>
<li><a href="page.html">Components</a></li>
<li><a href="page.html">Javascript</a></li>
<li><a href="page.html">Mobile</a></li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav blue lighten-2" id="sideMobile">
<div class="container">
<li><a href="page.html">Sass</a></li>
<li><a href="page.html">Components</a></li>
<li><a href="page.html">Javascript</a></li>
<li><a href="page.html">Mobile</a></li>
</div>
</ul>
</div>
which is being reference in the different pages as
<?!= include("navBar"); ?>
in the <head> part of the code.
function include() is in the serverside code as
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
in the doGet part of the app, page is being rendered by
return HtmlService.createTemplateFromFile("home").evaluate();
how can i get to write inline codes in the navBar page? when rendered, all javascript are being displayed as encoded html.
thank you in advance
Instead of creating an HtmlOutput, you should create an HtmlTemplate object and evaluate it.
Reference: Class HtmlTemplate
A template object for dynamically constructing HTML.
function include(filename) {
return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}