How to dynamically insert html content into an existing html document?

Say, I have an html document named index.html. Also, I have another html document named blog_content.html.

What I want is when the clients request for index.html, a dynamic number of blog_content.htmls could be loaded into index.html. Moreover, the contents in blog_content.html are also dynamically generated.

And blog_content.html may look like:

<div class="a_blog_container" id="${article.id}">
<h2>${article.title}</h2>
<h3>${article.metadata.date}</h3>
<div class="a_blog_content">
    <p>this is test content</p>
</div>
<p class="article_foot"><span>赞(${article.additional.up})</span><span> |
</span><span>阅读(${article.additional.read})</span></p>

where things like $<article.title> are placeholders to be dynamically assigned with values whenever any backend engine would render the document, say, Spring.

What are your suggestions for the above requirements?