How is it better to optimize repetitive chunks of html code across multiple pages? V2

Questions
1

Hi! There is a top navbar that is repeated on multiple pages? But not at all.

<div class="navbar-inner  align-items-center  sliding justify-content-space-between ">
    <div class="">
        <a class="back f7-icons padding-left">undo</a>
    </div>
    <a class="link" href="/contact/">
        <img src="images/res/logo.png" class="imgLogo" />
    </a>
    <div>
        <a href="/search/" class="link f7-icons" id="btn">search</a>
    </div>
    <div>
        <a class="link f7-icons popover-open" data-popover=".popover-links">bars</a>
    </div>
    <div>
        <a class="f7-icons padding-right closeWin">close</a>
    </div>
</div>

Template 7 or are there other ways?
If Template 7, I did not understand how to insert html code into a variable.

2 
Template7.global={
  navbarInner:'<div class="navbar-inner sliding">\
                 <div class="left">left</div>\
                 <div class="title">title</div>\
                 <div class="right">right</div>\
               </div>'
};

<div class="page">
  <div class="navbar">{{@global.navbarInner}}</div>
  <div class="page-content"></div> 
</div>
3

It is necessary to register in the app.js?

4

Prescribed in app.js. Outputs as plain text {{@global.navbarInner}}. Perhaps something else is necessary to prescribe?

5

page need to be parsed

use componentUrl || templateUrl || template

6

Excuse me, can I get more details or a link to the material?

7

Did you ever get a solution for this. I am having trouble using a variable with HTML in my template. With mustache/handlebars, I always used triple stashes {{{varWithHTMLInIt}} but that doesn’t seem to work with template7.