レイアウトの型をテンプレート化して、文章や画像だけをページごとに差し替えて使いまわす方法が知りたいです。

前提・実現したいこと

トップページの下層ページ、「お部屋」「お料理」「温泉」はほぼ同一型のレイアウトです。
そのためひとつテンプレート型を制作して、割り振っているid等の条件分岐として各ページに適切な文章や画像を差し替えて使いまわして使用したいと考えています。

ただ、ここから先のやり方が全くどうしていいのか分かりません。
どうかご教授頂けますと幸いです。

該当のソースコード

※一応一旦どこになにがくるかの理解のために今は普通にテキストいれていますが、ここに変数名?をおいて置き換えていこうと思っています。

HTML
1<!DOCTYPE html>
2<body>
3  <head> 
4    <link rel="stylesheet" href="../src/css/reset.css"/>
5    <link rel="stylesheet" href="../dest/css/page.css"/>
6    <link rel="preconnect" href="https://fonts.gstatic.com"/>
7    <meta name="viewport" content="width=device-width,initial-scale=1"/>
8  </head>
9  <main> 
10    <header>
11      <nav class="header-nav flex-box"><a href="#"><img class="logo" src="../img/top-header-logo-min.png"/></a>
12        <div class="header-wrapper"> <a href="#">お部屋</a><a href="#">お料理</a><a href="#">温泉</a></div>
13      </nav><a class="header-btn" href="#"> <img class="carender-img" src="../img/calender-min.png"/>
14        <p>宿泊予約</p></a>
15    </header>
16    <section class="fv-bg" id="top">
17      <div class="content-wrapper">
18        <nav> <a href="../dest/index.html"> トップ</a><a href="#">お部屋</a></nav>
19        <p class="syoukai">創業より受け継がれてきた石井花壇の和の造り<br> 温海の雄大な絶景を堪能していただけるように設計された客室<br>ゆるやかに流れ行く時間に身を委ねて</p>
20        <div class="main-content-wrapper">
21          <div class="content-item item1">
22            <picture class="img-inner"> 
23              <source class="content-item item-img1 pc" srcset="../img/oheya01-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya01@2x-min.png" alt=""/>
24            </picture>
25            <div class="text-inner syoukai-bg"> 
26              <h2 class="content-title">温泉付き客室</h2>
27              <p class="setumei">温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。</p>
28              <p class="attention">＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
29            </div>
30          </div>
31          <div class="content-item item2 reverse">
32            <picture class="img-inner"> 
33              <source class="content-item item-img1 pc" srcset="../img/oheya02-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya02@2x-min.png" alt=""/>
34            </picture>
35            <div class="text-inner syoukai-bg">
36              <h2 class="content-title">庭園付き客室</h2>
37              <p class="setumei">庭園付きの客室になります。 お庭を見ながら、ほっとするひとときをお過ごしください。</p>
38              <p class="attention">＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p>
39            </div>
40          </div>
41          <div class="content-item item3">
42            <picture class="img-inner"> 
43              <source class="content-item item-img1 pc" srcset="../img/oheya03-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya03@2x-min.png" alt=""/>
44            </picture>
45            <div class="text-inner syoukai-bg"> 
46              <h2 class="content-title">一般客室</h2>
47              <p class="setumei">最もベーシックな客室になります。伝統の中にモダンさを取り入れた 内装となっており、とても過ごしやすくしていただけます。</p>
48              <p class="attention">＊全室お部屋より日本海を望むことができます。</p>
49            </div>
50          </div>
51        </div>
52      </div>
53    </section>
54    <section class="section-wrapper" id="footer">
55      <div class="content-wrapper"> 
56        <nav class="footer-nav"><a class="footer-list" href="#">温泉</a><a class="footer-list" href="#">お料理</a><a class="footer-list" href="#">お部屋</a></nav>
57        <div class="title-wrapper"><img class="title-icon" src="../img/logo02-min.png" alt="ロゴ"/>
58          <h2 class="section-title">石井花壇</h2>
59        </div>
60        <div class="footer-address"> 
61          <div class="flex-box">
62            <p class="first-item">〒000-0000</p>
63            <p>山形県鶴岡市xxxxxxxxxxxx </p>
64          </div>
65          <div class="flex-box">
66            <p class="first-item">TEL 000-0000-0000</p>
67            <p>FAX 00-0000-0000</p>
68          </div>
69        </div>
70      </div>
71    </section>
72    <footer> <small>Copyright © 石井花壇 All Rights Reserved.</small></footer>
73  </main>
74</body>

該当のソースコード

setting.pug
1
2  //各ページの設定
3
4- 
5  var page = {
6    siteName: 'サンプルサイト',
7    siteUrl: 'https://example.com',
8    pageMeta: {
9      oheya: {
10        id: 1,
11        name: 'oheya',
12        title: 'お部屋 - 石井花壇 | 温海温泉旅館【公式サイト】',
13        description: '当旅館のお部屋についてご案内いたします。',
14        headerImage: '../img/oheya-header@2x-min.png',
15        type: 'website',
16        path: '/',
17        heyaPran:{
18          copy:'創業より受け継がれてきた石井花壇の和の造り<br> 温海の雄大な絶景を堪能していただけるように設計された客室<br>ゆるやかに流れ行く時間に身を委ねて',
19          mainContent:{
20            tag: 1{
21              subTitle:'温泉付き客室',
22              subTxt:'温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。',
23              attention:'＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。'
24            },
25            tag: 2{
26              subTitle:'庭園付き客室',
27              subTxt:'庭園付きの客室になります。 お庭を見ながら、ほっとするひとときをお過ごしください。',
28              attention:'＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。'
29            },
30            tag: 3{
31              subTitle:'一般客室',
32              subTxt:'最もベーシックな客室になります。伝統の中にモダンさを取り入れた 内装となっており、とても過ごしやすくしていただけます。',
33              attention:'＊全室お部屋より日本海を望むことができます。'
34            },
35
36          }
37
38        },
39      },
40      cook: {
41        id: 2,
42        name: 'cook',
43        title: 'お料理 - 石井花壇 | 温海温泉旅館【公式サイト】',
44        description: '当旅館のお料理についてご案内いたします。',
45        headerImage: '../img/menu-header-min.png',
46        type: 'website',
47        path: '/page1.html'
48        cookPran:{
49          copy:'地元熱海の市場で仕入れた食材のみを使った食材をふんだんに使い、<br> 大将の技が光る「熱海料理」<br>  四季ごと、日ごとに変化する味わいを、どうぞご堪能ください。',
50          mainContent:{
51            tag: 1{
52              subTitle:'地元食材にこだわった会席料理',
53              subTxt:'みずみずしくほのかに甘い野菜、新鮮で味に深みがある魚介類、肉類。<br>  旬の素材をそのままに生かす、経験に裏打ちされた確かな技。 <br> 四季ごと、日ごとに変化する味わいを、どうぞご堪能ください。'
54            },
55            tag: 2{
56              subTitle:'熱海の漁港で目利きの品を',
57              subTxt:'石井花壇でお出しする料理はすべて料理長である大将の目利きで、<br>  熱海の魚市場でその日のうちに仕入れたものを使用しております。<br>  日本海の宝玉を十分にお楽しみください。'
58              
59           },
60           tag: 3{
61              subTitle:'食材が一流、職人も一流',
62              subTxt:'石井花壇の料理人は料亭で20年経験を積んだものばかり。<br> その時の最も旬な食材を、最高の調理でお届けします。<br> また、お料理への細かいご要望にもお答えできますので、<br> お気軽にお申し付けください。'
63            
64            },
65
66          }
67
68        },
69      },
70       onsen: { 
71        id: 3,
72        name: 'onsen',
73        title: '温泉 - 石井花壇 | 温海温泉旅館【公式サイト】',
74        description: '当旅館の温泉についてご案内いたします。',
75        headerImage: '../img/oheya-top-min.png',
76        type: 'website',
77        path: '/page1.html',
78        onsenPran:{
79          copy:'心も身体も癒やす汐の温泉。 <br> 湯あたりしにくく、赤ちゃんから年配の方までどなたでもゆっくりと安心して入っていただけます。  <br>柔らかく優しい湯にじっくりと漬かれば、心身共にリラックスできます。',
80          mainContent:{
81            tag: 1{
82              subTitle:'貸し切り露天風呂「雲居の湯」',
83              subTxt:'弱酸性の湯質が優しく肌を包み込むような心地よさ<br> 最上階の露天風呂「雲居の湯」では、湯冷めしにくい食塩泉を<br> 熱海の町並みを遠方に望みながら・・・'
84            },
85            tag: 2{
86              subTitle:'美肌を促す乳白色の硫黄泉を',
87              subTxt:'まじりっけなしの白いにごり湯。鳥海山から引いた酸性の強い硫酸塩泉を、 <br>たっぷりと掛け流しています。<br> 四季の移り変わりを、天然温泉の湯に浸りながら味わってください。'
88            }
89
90          }
91
92        },
93      },
94      },
95    }
96

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VScode
ブラウザ:クローム

tanat

2021/06/17 08:55

JavaScriptについてはどの程度理解されていますか？

mitrasi

2021/06/17 09:00

簡単な条件分岐程度ならわかりますが、webサイトの実装で絡めて（それもテンプレートとして）利用するのは初めてです。

行動規範の内容に同意します

回答2件

ベストアンサー

回答（学習目的の場合）

簡単な条件分岐程度ならわかりますが、webサイトの実装で絡めて（それもテンプレートとして）利用するのは初めてです。

まずは、JavaScriptによるDOMの操作を一通り把握しない事にはスタートラインにも立てないので、
JavaScriptの基礎とデバッグ方法を一通り学習されることをお勧めします。
(他の言語をある程度のレベルで学習している人であれば、JavaScript DOM 操作あたりで検索して必要なところだけ学ぶことも可能だとは思います)

ただ、ここから先のやり方が全くどうしていいのか分かりません。

と言う状態の人に対して全てを解説するには本一冊では足りないくらいの量になるため、teratail等の質問掲示板で扱うには重すぎる課題です。

回答（実用目的の場合）

実用目的の場合は、既に存在しているコンテンツ管理システムを使うのがベストです。

CMS
静的サイトジェネレータ
テンプレート機能を持つWebオーサリングツール

など、選択肢は色々とあり、クオリティも個人では太刀打ち出来ない高さのものがいくらでも存在します。

学習/作成の流れ

以下のような順で一つづつ理解して行けば、完成すると思います。
現状ではさっぱりわからない部分もあると思いますし、すべてを解説するのは前述の通りスペースが足りませんが、学習を進めるうちにわかる様になると思います。

まずはもっと単純なところからスタートする

例えば以下の様なHTMLの<div id="test">test</div>をブラウザがアクセスしたタイミングで固定値<div id="test">changed</div>に書き換えるJavaScriptを書いてみる。
その際、doument.write()などによる文字列操作では無く、DOMの操作を行うAPIを使用する。

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6</head>
7<body>
8<div id="test">test</div>
9</body>
10</html>
11

検索ワードは
JavaScript アクセス時実行
JavaScript DOM 操作
あたりです。

DOM操作方法を把握したら、同じHTMLに対し、JavaScript内で変数を使用して要素を書き換えてみる

JavaScriptに書き換え後のデータがハードコーディングされていると大変なので、変数にして管理をしやすくしてみてください。

現在のURLを取得して、HTML内に表示してみる

1で用意したHTMLがtest1.htmlだとしたら、コードは全く同じ状態でtest2.htmlとしてコピーして、アクセスした際にそれぞれのURLが表示されるようにしてみる。

2で用意した変数に、URLをキーとして持つ値を追加して、HTML内で表示してみる

test1.htmlとtest2.htmlで全く同じソースであっても、URLをキーに使うことによって表示する内容を変化させられるはずです。

webサーバの機能（Apacheの場合はmod_rewrite）を使って、test1.htmlにアクセスした時もtest2.htmlにアクセスした時もindex.htmlにアクセスされるように設定をする

検索ワードは
.htaccess mod_rewriteあたりです。

実際に必要なHTMLをDOM操作しやすい形にクラスやIDを付与する
実際に必要なデータをURLをキーとしたツリーとして整理する
1-7を組み合わせて、アクセスしたURLに合わせてデータを選択肢、HTMLのDOMを操作するJavaScriptを書く
変数に直接記述している部分をJSON置き換えて別のファイルとして管理しやすいようにする等の使い勝手の向上

投稿2021/06/17 11:23

tanat

総合スコア18713

mitrasi

2021/06/17 23:29

詳細な学習マップと情報ありがとうございます！今のところ勉強目的でやってみたかったのですが、実務ではツールを使っているとのことでしたので、とりあえずツールが使えそうならツールを試してみたいと思います。親身なご回答ありがとうございます。

行動規範の内容に同意します

ちょっと質問の主旨から外れてしまう気もしますが^^;
静的サイトジェネレータを使用すると良いと思います。

そのためひとつテンプレート型を制作して、割り振っているid等の条件分岐として各ページに適切な文章や画像を差し替えて使いまわして使用したいと考えています。

まさにこのような管理方法に適したシステムです。

投稿2021/06/17 21:06

退会済みユーザー

総合スコア0

mitrasi

2021/06/17 23:45

ご回答ありがとうございます！まさになんですね(笑) wordpressは一通り経験があって、pugの関数とかincludeの差し込みも使えるっていうのを知ると「wordpressのときみたいにテンプレートごとに作れるのかも！？」と思って、ひらめいただけだったのですが…静的ジェネレーターを利用を検討してみたいと思います。

行動規範の内容に同意します

あなたの回答