정적 웹 사이트의 모든 페이지에 콘텐츠 컨테이너를 추가하기 위해 mustache.js 사용하기

Question

모든 페이지의 콘텐츠가 동일한 콘텐츠 컨테이너 (navbar, footer 등)로 둘러싸인 정적 웹 사이트를 만들고 싶습니다. 그렇게하려면 mustache.js와 같은 템플릿 엔진을 사용하여 콘텐츠 컨테이너를 정의한 다음 페이지 콘텐츠가 템플릿의 콘텐츠 영역에 삽입되도록 템플릿을 렌더링하려고합니다.

이 내가 생각하고있는 것입니다 :

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

다른 부분을 넣어 어디 붙어 있어요 문제입니다. 내 마음에 오는 유일한 해결책은 : render_template.js 파일

에

• 넣고 템플릿 및 렌더링/삽입 코드는 site_content.html 파일로
• 전화 렌더링 및 삽입 기능 동안 페이지의 콘텐츠를 넣어 실제 site.html

에서 올바른 컨텐츠 HTML을 통과하는 실제 site.html에 콘텐츠 HTML을 넣고 템플릿을 렌더링하기 위해 그것을 사용하는 방법이 있나요?

Answer 1

나는 이것이 콧수염의 목적이라고 생각하지 않습니다. MustacheJs는 전체 html 페이지가 아니라 js 객체의 변수 값으로 완료되는 요소 템플릿을 만드는 데 사용해야합니다 (예 : 템플릿은 사용자 정보 페이지의 html 구조이며 콧수염에 의해 삽입되는 변수는 정보 관련 first-name, last-name과 같은 사용자의 경우 ...이 경우 다른 사용자를 표시하기 위해 동일한 템플릿을 다시 사용할 수 있습니다.)

동적 언어 (예 : PHP, Python 또는 기타)를 사용할 수없는 경우이 작업을 조금씩 수행하십시오.

페이지의 각 redondant 부분 (예 : header, navbar, footer)에 대해 별도의 html 페이지를 만들 것입니다. 그런 다음 빌드 프로세스에 반복 부분을 포함하게하는 모든 콘텐츠 페이지를 만들 것입니다 (예 : GruntJS의 경우이 플러그인을 사용할 수 있습니다 : https://github.com/vanetix/grunt-includes)

또 다른 방법은 구성 요소 템플릿을 처리하는 js 프레임 워크를 사용하는 것입니다. 포함하지만, 페이지에 일부 html 부분 만 포함 시키면 매우 복잡해 보입니다.