質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Hugo

Hugoとは、Go言語で実装された静的サイトジェネレータです。コンテンツ管理ではなく、Webサイトで用いられるHTMLファイルやRSSファイルといった生成に特化した機能を持ちます。データベースを必要としないため、バックエンド側の手間もなく、簡単にブログを運営することができます。

静的サイトジェネレータ

静的サイトジェネレータは、何かしらの言語で書いたコードからHTML/CSS/JavaScriptによる静的なWebサイトを生成するツール。表示が高速で安定したサイトを運用することが可能です。セキュリティリスクの軽減やサーバへのアクセス負荷が少ないといった利点があります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

882閲覧

静的サイトジェネレーターHugoを使って同じhtmlをたくさん生成する

pochi-chan

総合スコア4

Hugo

Hugoとは、Go言語で実装された静的サイトジェネレータです。コンテンツ管理ではなく、Webサイトで用いられるHTMLファイルやRSSファイルといった生成に特化した機能を持ちます。データベースを必要としないため、バックエンド側の手間もなく、簡単にブログを運営することができます。

静的サイトジェネレータ

静的サイトジェネレータは、何かしらの言語で書いたコードからHTML/CSS/JavaScriptによる静的なWebサイトを生成するツール。表示が高速で安定したサイトを運用することが可能です。セキュリティリスクの軽減やサーバへのアクセス負荷が少ないといった利点があります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/28 06:27

編集2020/10/28 08:24

前提・実現したいこと

「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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KojiDoi

2020/10/28 06:48

コンテンツの内容を記したmarkdownファイルを必要な数だけ用意し、普通にhugoを実行すれば良いと思いますが…何が問題なのでしょうか?
pochi-chan

2020/10/28 08:28

コメントありがとうございます。 1つのtemplate.htmlからデータの内容を置き換えた同様のhtmlファイルをたくさん複製したいのですがそのためには、markddownファイルをどのように作ればいいかわからないという状態です。
KojiDoi

2020/10/28 10:53

「テンプレート」の意味は理解できていますか?
pochi-chan

2020/10/28 11:42

ページを作成するための雛形と理解していますが間違っておりますでしょうか…? ちなみに共通箇所は/layouts/_default/のなかに作成するものだと思っています。
guest

回答1

0

ベストアンサー

テンプレートとは全ページに共通な部分のありようを記した「型紙」。

ページごとに異なる部分は変数として書いておき、その変数に当たる部分は別のファイルで定義します。同じスタイルのページを作るのであればテンプレートファイルは一つだけ(layouts/template.html)作ればいいのです。

「別のファイル」に当たるのが、contentフォルダに置くmdファイルです。

ここでは質問者さんがymlとして提示しているものの内容をバラして作ればいいでしょう。どうもここが納得できていないようですが、100個のhtmlページを作りたいなら、その個別内容を記した100個のmdファイルを、o_0001.md, o_0002.md...と作っていくのです。

このように、「定数」部分と「変数」部分を2種類のファイルに分けて管理することによってサイトの更新の手間を大きく軽減しようというのがサイトジェネレータの出発点であり、私が知る限り、どのサイトジェネレータも基本的に同じです。

投稿2020/10/28 11:44

KojiDoi

総合スコア13669

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pochi-chan

2020/10/28 12:15

早速の回答ありがとうございます。 > ymlとして提示しているものの内容をバラして作ればいいでしょう。どうもここが納得できていないようですが 実は昔いた職場のエンジニアの方が実際に、静的サイトジェネレーターを使って、100個分の商品データが書かれた1つのymlから100個の各商品ページのhtmlを出力していたので、同じようなことができないかなと思ったのが今回のきっかけでした。 それで、「変数」の部分を1つのファイルで済ます方法が何かしらあるが、私の技術力ではできないのだと思ってここで質問しました。
KojiDoi

2020/10/28 12:56

> 「変数」の部分を1つのファイルで済ます方法 それはhugoの外での対応になりそうです。MacOSやlinuxであればawkですぐにできるのですが、windowsだと少し仕込みが必要かもしれません。
pochi-chan

2020/10/28 13:45

なるほど、Hugoだけでは難しいのですね…。私の開発環境はMacOSです。方法があるのであれば挑戦したいので、awkを使っての方法をご教授いただくことは可能でしょうか?私のような素人には難しいでしょうか?もし可能であれば、ご面倒おかけしますが何卒よろしくお願いいたします…!
KojiDoi

2020/10/28 15:25 編集

示されている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
pochi-chan

2020/10/29 01:44

ありがとうございます! でも結局は生成するhtmlの分だけmdファイルを作成しなければならないのですね…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問