Utilisation de moustache.js pour ajouter un conteneur de contenu pour toutes les pages d'un site Web statique

Question

Je souhaite créer un site Web statique dans lequel le contenu de chaque page est entouré du même conteneur de contenu (barre de navigation, pied de page, etc.). Pour ce faire, je veux utiliser un moteur de modèle comme moustache.js pour définir mon conteneur de contenu, puis rendre le modèle avec le contenu des pages inséré dans la zone de contenu du modèle.

C'est ce que j'ai à l'esprit:

// Template 
<h1>Website</h1> 
<p>Navbar here</p> 
<div class="content-area">{{{content_html}}}</div> 
<p>Footer here</p> 

Le problème que je suis coincé avec est de savoir où mettre les différentes parties. La seule solution qui me vient à l'esprit est:

• Modèle Put et rendu/code d'insertion dans un fichier render_template.js
• Mettez le contenu de la page dans un fichier site_content.html
• Appelez la fonctionnalité rendu et insertion tout en en passant le code html contenu correct de la réelle site.html

est-il un moyen de mettre le contenu HTML dans le site.html réelle et l'utiliser pour le rendu du modèle?

Answer 1

Je ne pense pas que ce soit le but de la moustache. MoustacheJs doit être utilisé pour créer des modèles d'éléments qui sont complétés par des valeurs de variables d'un objet js, pas par des pages html complètes (par exemple le modèle est la structure html d'une page de détails utilisateur et les variables pour l'utilisateur comme prénom, nom de famille, ... Dans ce cas, nous pouvons réutiliser le même modèle pour afficher différents utilisateurs).

Dans votre cas, si vous ne pouvez pas utiliser un langage dynamique (comme php, python ou autre), je le ferais un peu différent.

Je ferais des pages html séparées pour chaque partie redondante de votre page (ex: en-tête, navbar, footer). Ensuite, je ferais toutes vos pages de contenu où vous laisserez un processus de construction inclure les parties redondantes (par exemple avec GruntJS vous pouvez utiliser ce plugin: https://github.com/vanetix/grunt-includes)

Une autre façon serait d'utiliser un framework js qui gère la modélisation des composants et comprend, mais cela semble être très compliqué si vous avez juste besoin d'inclure des parties html dans les pages.