cms이외의 html로 만든 정적인 사이트의 공통 부분, 헤더나 풋터 사이드 바등을 수정할 때 일부분만 변경하는 경우에서도 전 페이지의 소스를 수정해야 하기 때문에 힘듭니다.
거기서 뭔가 일괄 변환할 수 있는 방법이 없을까 생각하고, Javascript로 일괄 변환할 수 있는 방법을 소개합니다.

별도로 Dreamweaver의 template 기능이나 PHP로 작성해도 괜찮습니다. 하기 때문에 .access의 설정을 하거나 등으로 서버마다의 설정이 있으므로 이번에는 Javascript를 선택했습니다.

Javascript로 공통화하자

먼저 기본 HTML에 자바스크립트를 로드할 수 있습니다.

<script src="main.js"></script>

그리고 공통화하는 부분에 하기를 기술.

<script>header();</script>

다음으로 로드할 자바스크립트를 만듭니다.
이번에는 ajax를 사용한 방법입니다.

참고:
jQuery 참조 jQuery.ajax
※ url: "header.html", 가 읽어들이는 HTML 파일입니다.

js

function header(){
    $.ajax({
        url: "header.html",
        cache: false,
        success: function(html){
            document.write(html);
        }
    });
}

패스를 지정한 만들기가 된다면

<script>header('../');</script>

function header(rootDir){
    $.ajax({
        url: rootDir + "header.html",  // 読み込むHTMLファイル
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); //header.htmlの{$root}を置換
            document.write(html);
        }
    });
}

참고:
갱신하는 것이 귀찮아! 사이트의 공통 부분을 쉽게 만드는 다양한 방법

공통화 파일이 복수 있다면 include 폴더를 만들어 정리하는 것이 알기 쉽습니다.

index.html
style.css
main.js
include
 - header.html
 - footer.html
 - sidebar.html

폴더를 정리할 때는 디렉토리를 주의하십시오.

function header(rootDir){
    $.ajax({
        url: rootDir + "include/header.html", // ディレクトリー変更
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); 
            document.write(html);
        }
    });
}

링크가 있는 경우 '{$root}'를 추가합니다.

<a href="{$root}index.html">TOP</a>

출력되면 아래와 같이 됩니다.
단점으로는 script 부분이 여분의 소스가 되는, 브라우저의 js를 끊고 있는 경우 표시되지 않는 등이 있습니다.

<script>header('../');</script>
<header>
    <ul>
        <li><a href="{$root}index.html">TOP</a></li>
        <li><a href="{$root}about.html">ABOUT</a></li>
        <li><a href="{$root}service.html">SERVICE</a></li>
        <li><a href="{$root}contact.html">CONTACT</a></li>
    </ul>
</header>

추가

이 기사를 썼을 때부터 개발의 상황은 상당히 변화하고 현재는 Nuxt.js(Vue-CLI)를 사양하고 있습니다.

Vue.js 기반으로 만들고 싶다 → Nuxt.js

Vue.js별로 사용하지 않는다 → Gulp나 Grunt

↑를 사용할 수 없을 때 이 기사의 방법이 되는 것은 아닐까 생각합니다.