Search code examples
javascripthtmlenduro.js

Include external html into enduro.js


I have an enduro.js blog based on this tutorial:

https://www.endurojs.com/blog/how-to-make-a-blog-with-endurojs

And I want to add navbar and footer as external .html files available on some URL. How can I include some navbar url into following code which is component "header.hbs":

<header>
    <div class="inner">
        <h1><a href="{{global.base_url}}">{{global.site_name}}</a></h1>
        {{#if global.site_description}}
            <p>{{global.site_description}}</p>
        {{/if}}
    </div>

</header>
<nav class="aSiteNav" id="navbarDiv">
    <div class="inner">
        {{#if global.show_archive_link}}
            <a href="/blog/archive/">{{global.archive_link_text}}</a>
        {{/if}}
        {{#navlinks}}
            {{#each this}}
                <a href="/blog/pages/{{this.page_slug}}/">{{this.content.navigation_title}}</a>
            {{/each}}
        {{/navlinks}}
    </div>
</nav>

Solution

  • I solved it by including jquery:

    <header>
       <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
       <script>
          $(function(){
            $("#navbar").load("https://mydomain.xyz/navbar.html");
          });
       </script>  
       <div class="inner" id="navbar">
       </div>
    </header>