Q&A
コンテンツの内容を記したmarkdownファイルを必要な数だけ用意し、普通にhugoを実行すれば良いと思いますが…何が問題なのでしょうか？
前提・実現したいこと
「htmlページをたくさん複製して、部分的にデータを置き換えた内容のものを作成する」
→静的サイトジェネレーターHugoを使って、
「テンプレートになるhtmlと、参照用データのymlを用意してhtmlをたくさん生成する」
htmlの大量生成について、PHPとCSVを使った方法ならネットでよく見つかるのですが、静的サイトジェネレーターで作成したいです。
（上記のことができればHugo以外の静的ジェネレーターでも構いません。もし最適なものがあれば教えてください）
発生している問題
1つの template.html から o_0001.html、o_0002.html、o_0003.html、o_0010.html、o_0011.html のように複数のファイルを生成したいです。
そこで、下記コードを作成したところまではいいのですが、上記のように生成するには、contentフォルダに置く index.md をどのように書けばいいのかわかりません。
書き出されるそれぞれのhtmlのファイル名を「o_(onigiri.yamlのidの値)」にする方法もわかりません。
そもそも、下記のコードが合っているかもわからない状態です…。
1つの /layouts/_default/template.html から複数のファイルを書き出すには書き出すhtml分だけの.mdファイルが必要になるのでしょうか？？しかし、それだと自動生成する意味がないような気がします。
コンテンツの内容 = template.html なのですがそもそもの考え方が間違っているのでしょうか？
当方、HTMLとCSSの知識があるだけ（あとjQueryが少しわかる）のド初心者なのでお手柔らかにお願いいたします。まわりにエンジニアの方がいないなか作業しなければならない状況にいるのでteratailの先輩方、ご教授ください。どうぞよろしくお願いいたします。
該当のソースコード
html
1<!-- template.html --> 2{{ partial "header.html" . }} 3<body> 4 <div class="container"> 5 <div id="selected"> 6 <!-- ①画像ファイル名の数字の部分をonigiri.ymlのidに置き換える --> 7 <img src="/images/o_{{ .Site.Data.onigiri.id }}.jpg"> 8 </div> 9 <div id="selected-menu"> 10 <ul class="onigiri"> 11 <li class="menu">おにぎり</li> 12 <!-- ②onigiri.ymlのmenuの値を挿入する --> 13 <li class="menuName">{{ .Site.Data.onigiri.menu }}</li> 14 </ul> 15 <div class="onigiriConts"> 16 <ul class="onigiri-menu"> 17 <!-- ③画像ファイル名の数字の部分をonigiri.ymlのidの上から順番に挿入した一覧のリストを作る --> 18 {{- range .Site.Data.onigiri }} 19 <li> 20 <img src="/images/o_{{ .id }}.jpg"> 21 </li> 22 {{- end }} 23 </ul> 24 </div> 25 </div> 26 </div> 27{{ partial "footer.html" . }} 28
yml
1- 2id: 0001 3menu: うめぼし 4- 5id: 0002 6menu: こんぶ 7- 8id: 0003 9menu: しゃけ 10- 11id: 0010 12menu: たらこ 13- 14id: 0011 15menu: めんたいこ
完成イメージ
html
1<!-- o_0001.html --> 2<body> 3 <div class="container"> 4 <div id="selected"> 5 <!-- ①画像ファイル名の数字の部分をonigiri.ymlのidに置き換える --> 6 <img src="/images/o_0001.jpg"> 7 </div> 8 <div id="selected-menu"> 9 <ul class="onigiri"> 10 <li class="menu">おにぎり</li> 11 <!-- ②onigiri.ymlのmenuの値を挿入する --> 12 <li class="menuName">うめぼし</li> 13 </ul> 14 <div class="onigiriConts"> 15 <ul class="onigiri-menu"> 16 <!-- ③画像ファイル名の数字の部分をonigiri.ymlのidの上から順番に挿入した一覧のリストを作る --> 17 <li> 18 <img src="/images/o_0001.jpg"> 19 </li> 20 <li> 21 <img src="/images/o_0002.jpg"> 22 </li> 23 <li> 24 <img src="/images/o_0003.jpg"> 25 </li> 26 <li> 27 <img src="/images/o_0010.jpg"> 28 </li> 29 <li> 30 <img src="/images/o_0011.jpg"> 31 </li> 32 </ul> 33 </div> 34 </div> 35 </div> 36</body>
補足情報
Mac OS
Hugo v0.76.3
コメントありがとうございます。
1つのtemplate.htmlからデータの内容を置き換えた同様のhtmlファイルをたくさん複製したいのですがそのためには、markddownファイルをどのように作ればいいかわからないという状態です。
「テンプレート」の意味は理解できていますか？
ページを作成するための雛形と理解していますが間違っておりますでしょうか…？
ちなみに共通箇所は/layouts/_default/のなかに作成するものだと思っています。
回答1件
0
ベストアンサー
テンプレートとは全ページに共通な部分のありようを記した「型紙」。
ページごとに異なる部分は変数として書いておき、その変数に当たる部分は別のファイルで定義します。同じスタイルのページを作るのであればテンプレートファイルは一つだけ（layouts/template.html）作ればいいのです。
「別のファイル」に当たるのが、contentフォルダに置くmdファイルです。
ここでは質問者さんがymlとして提示しているものの内容をバラして作ればいいでしょう。どうもここが納得できていないようですが、100個のhtmlページを作りたいなら、その個別内容を記した100個のmdファイルを、o_0001.md, o_0002.md...と作っていくのです。
このように、「定数」部分と「変数」部分を2種類のファイルに分けて管理することによってサイトの更新の手間を大きく軽減しようというのがサイトジェネレータの出発点であり、私が知る限り、どのサイトジェネレータも基本的に同じです。
投稿2020/10/28 11:44
総合スコア13692
早速の回答ありがとうございます。
> ymlとして提示しているものの内容をバラして作ればいいでしょう。どうもここが納得できていないようですが
実は昔いた職場のエンジニアの方が実際に、静的サイトジェネレーターを使って、100個分の商品データが書かれた1つのymlから100個の各商品ページのhtmlを出力していたので、同じようなことができないかなと思ったのが今回のきっかけでした。
それで、「変数」の部分を1つのファイルで済ます方法が何かしらあるが、私の技術力ではできないのだと思ってここで質問しました。
> 「変数」の部分を1つのファイルで済ます方法
それはhugoの外での対応になりそうです。MacOSやlinuxであればawkですぐにできるのですが、windowsだと少し仕込みが必要かもしれません。
なるほど、Hugoだけでは難しいのですね…。私の開発環境はMacOSです。方法があるのであれば挑戦したいので、awkを使っての方法をご教授いただくことは可能でしょうか？私のような素人には難しいでしょうか？もし可能であれば、ご面倒おかけしますが何卒よろしくお願いいたします…！
示されているymlファイルがcontentsディレクトリにinput.ymlという名前で存在していると仮定します。コマンドラインから当該ディレクトリにcdして、次のようにすると、o_0001.md, o_0002.md, ...とファイルができると思います。
awk 'BEGIN{RS="-\n"}{printf "--\n%s--\n",$0 > sprintf("o_%04d.md",NR)}' input.yml
ありがとうございます！
でも結局は生成するhtmlの分だけmdファイルを作成しなければならないのですね…
あなたの回答
tips
プレビュー
