htmlのあるセクションの内容を一括で変更したい

Question

前提・実現したいこと

現在、html、css、javascriptでホームページの作成を行っています。
ホームページのbody部分は、大きく２列に分かれており、左側の列に他のページへのリンクを表示しています。
イメージとしては以下のような形で各ページへのリンクを一覧で出しているのですが、ページが増えるにつれてリンクを増やした際に、このリンク部分の記述を変更していくのが辛くなってきました。

該当のソースコード

<div id="columnL">
  <div class="submenu">
    <h4><li><a href="aaa.html">aaa1</a></li></h4>
      <li><a href="bbb.html">bbb1</a></li>
      <li><a href="ccc.html">ccc1</a></li>

現在全部で50ページほどなのですが、ページを増やすたびに、例えば上記のbbb.htmlとccc.htmlの間にddd.htmlという新しいページのリンクを追加する場合、現在は地道に50ページ分のページを全て以下のように書き換えていっています。

該当のソースコード

<div id="columnL">
  <div class="submenu">
    <h4><li><a href="aaa.html">aaa1</a></li></h4>
      <li><a href="bbb.html">bbb1</a></li>
      <li><a href="ddd.html">ddd1</a></li> <!-- この挿入を50ページ分繰り返すのではなく、一括で変更されるようにしたい -->
      <li><a href="ccc.html">ccc1</a></li>

恐らくHPを作り始める前に、真面目にHPの作り方について学んで構成をしっかり考えてよかったのかとは思うのですが、なんとなくで作り始めたために現在更新するのが苦痛になってきています。
上記のリンクについてはテンプレートのようなページを作っておいて、上記のリンク用の列は、そのページに記載されている内容を読みに行くといったような設定は可能でしょうか？
（あるいはもっと素直な作り方はできるでしょうか？）
ご専門の方のお知恵を貸していただけると非常に有難いです。

宜しくお願いします。

Answer 1

解決後ですが。
aaa.html、bbb.html、ccc.htmlについて、

  <div class="submenu">
    <h4><li><a href="aaa.html">aaa1</a></li></h4>
    <li><a href="bbb.html">bbb1</a></li>
    <li><a href="ccc.html">ccc1</a></li>
  </div>

の部分を、

  <div class="submenu"></div>

に置き換える。（中身を削除する）
削除したものはhtmlファイルとしてどこかに置いておく。（ここでは/parts/submenu.htmlと仮定する）
当然、/parts/submenu.htmlは以下のようになる。

    <h4><li><a href="aaa.html">aaa1</a></li></h4>
    <li><a href="bbb.html">bbb1</a></li>
    <li><a href="ccc.html">ccc1</a></li>

あとは、aaa.html、bbb.html、ccc.htmlにて共通で読み込むJavaScriptにて、<div class="submenu"></div>に/parts/submenu.htmlの内容をロードするajax処理を書く。
簡単のためjQueryを用いると、以下のようになる。

$(function() {
    $('.submenu').load('/parts/submenu.html');
});

ddd.htmlを追加する際は/parts/submenu.htmlを編集すればよく、aaa.html、bbb.html、ccc.htmlをいじる必要はない。

---

その他の方法として、サーバーサイドで行う（phpやSSIなどなど…）、
静的サイトジェネレータを使う、
などがあります。
静的サイトジェネレータを検討される場合は、StaticGenというサイトにほぼ網羅されています（Python製のものもたくさんリストされています）ので参考にしてみてください。

Comments

[cesolution]

解決済のところ、丁寧なご回答をいただき誠にありがとうございます。正に私の知りたかった内容で、非常に分かりやすかったです。また参考となるサイトもご紹介いただきありがとうございます。大変助かりました。

Answer 2

書籍にて調べてみます。良い方法が無い場合は、Pythonでテキスト操作として挿入することを考えてみます。

Answer 3

上記のリンクについてはテンプレートのようなページを作っておいて、上記のリンク用の列は、そのページに記載されている内容を読みに行くといったような設定は可能でしょうか？

この質問だと、「可能です」が回答になります。

Comments

[cesolution]

ご回答ありがとうございます。もう少し自分で調べてみます。