Q&A
前提・実現したいこと
下記metaタグを変数で定義して使いまわしたいと思っています。
参考記事をもとに試作中なのですが、エラーがあるようでmetaタグがpugからhtmlに生成されません。
今の現状だと、多分エラーは「metaで使おうとしているやつ定義されてないよ（main.jsに定義して）」だと思うのですが、今思いつく読み込み方は一通り試したつもりなので、どこで定義して（また定義ファイルを分ける場合はどこに変数ファイルをおいて読み込めばいいのか）について知りたいです。
どうぞご教授よろしくお願いいたします。
発生している問題・エラーメッセージ
[11:29:31] Using gulpfile ~\Desktop\ntyuex - バックアップ\gulpfile.js [11:29:31] Starting 'default'... [11:29:37] Starting 'compilePug'... [11:29:37] 'compilePug' errored after 133 ms [11:29:37] TypeError in plugin "gulp-pug" Message: C:\Users(ファイル)\src\index.pug:15 13| link(rel='stylesheet', href="css/sp.css") 14| link(rel='preconnect' href='https://fonts.gstatic.com') > 15| title= package.title 16| meta(name='description', content=package.description) 17| meta(name='keywords', keywords=package.keywords) 18| meta(name='robots', keywords=package.robots) Cannot read property 'title' of undefined Details: path: C:\Users(ファイル)\src\index.pug domainEmitter: [object Object] domainThrown: false
※上記(ファイル)は伏せるために表記を置き換えてあります。
該当のソースコード
pug
1<!DOCTYPE html> 2html 3 body 4 head 5 link(rel='stylesheet', href="../src/css/reset.css") 6 link(rel='stylesheet', href="css/style.css") 7 link(rel="stylesheet",href="css/headerall.css") 8 link(rel='stylesheet', href="css/tab.css") 9 link(rel='stylesheet', href="css/sp.css") 10 link(rel='preconnect' href='https://fonts.gstatic.com') 11 title= package.title 12 meta(name='description', content=package.description) 13 meta(name='keywords', keywords=package.keywords) 14 meta(name='robots', keywords=package.robots) 15 16（中略） 17 18include include/_footer 19 script(src="../src/main.js")
該当のソースコード
js?
1var package = { 2 title: '最高にクールなホームページ', 3 description: '最高にクールなホームページです。見ないと損です。', 4 keywords: [ 5 '最高', 6 'クール', 7 '世界一', 8 '天才' 9 ], 10 robots: [ 11 'INDEX', 12 'FOLLOW', 13 'NOODP', 14 'NOYDIR', 15 'NOARCHIVE' 16 ] 17};
試したこと
■main.jsファイルを作成して、その中に定義してpugにはscriptタグで読み込む
→変わらずだめっぽい
■pugのhtmlよりも上の方に定義する
→エラーの意味はよく分からないけど、定義の一行目から「ここがだめ」って指摘されているようなので、多分pugに書いちゃダメなのかと思っています。
補足情報（FW/ツールのバージョンなど）
OS:Windows
エディタ:Brackets
ブラウザ:クローム
###ご回答の提案策を受けて修正
定義したファイル「setting.pug」はindex.pugと同じ階層。
【エラーメッセージ】
[13:03:42] Starting 'compilePug'... [13:03:42] 'compilePug' errored after 23 ms [13:03:42] Error in plugin "gulp-pug" Message: C:\Users(ファイル)\src\setting.pug:6:12 4| 5| - var package = { > 6| title: '最高にクールなホームページ', ------------------^ 7| description: '最高にクールなホームページです。見ないと損です。', 8| keywords: [ 9| '最高', unexpected text "'最高にク" Details: code: PUG:UNEXPECTED_TEXT msg: unexpected text "'最高にク" line: 6 column: 12 filename: C:\Users(ファイル)\src\setting.pug src: - var package = { title: '最高にクールなホームページ', description: '最高にクールなホームページです。見ないと損です。', keywords: [ '最高', 'クール', '世界一', '天才' ], robots: [ 'INDEX', 'FOLLOW', 'NOODP', 'NOYDIR', 'NOARCHIVE' ] }; toJSON: function () { return { code: this.code, msg: this.msg, line: this.line, column: this.column, filename: this.filename }; } domainEmitter: [object Object] domainThrown: false
【index.pug】
index.pug
1include setting 2 3<!DOCTYPE html> 4html 5 body 6 7 head 8 link(rel='stylesheet', href="../src/css/reset.css") 9 link(rel='stylesheet', href="css/style.css") 10 link(rel="stylesheet",href="css/headerall.css") 11 link(rel='stylesheet', href="css/tab.css") 12 link(rel='stylesheet', href="css/sp.css") 13 link(rel='preconnect' href='https://fonts.gstatic.com') 14 title=package.title 15 meta(name='description', content=package.description) 16 meta(name='keywords', keywords=package.keywords) 17 meta(name='robots', keywords=package.robots) 18 19
【setting.pug】
setting.pug
1 2 3 4 5- var package = { 6 title: '最高にクールなホームページ', 7 description: '最高にクールなホームページです。見ないと損です。', 8 keywords: [ 9 '最高', 10 'クール', 11 '世界一', 12 '天才' 13 ], 14 robots: [ 15 'INDEX', 16 'FOLLOW', 17 'NOODP', 18 'NOYDIR', 19 'NOARCHIVE' 20 ] 21 };
回答1件
0
ベストアンサー
問題1:Pug内のロジックはPugファイルで書く
script(src="../src/main.js")を記述してもブラウザ用のjavascriptを読み込む記述を入れるだけなのでPug上では使えません。Pug上でのscriptはPugファイルで記載してください。
※pugでscript書く場合は「-」入れて移行インデントをつけて書き始めてください。
※例ではindex.pugとmain.pugが同一階層にあるものとします。
以下例
main.pug
pug
1- 2 var package = { 3 title: '最高にクールなホームページ', 4 description: '最高にクールなホームページです。見ないと損です。', 5 keywords: [ 6 '最高', 7 'クール', 8 '世界一', 9 '天才' 10 ], 11 robots: [ 12 'INDEX', 13 'FOLLOW', 14 'NOODP', 15 'NOYDIR', 16 'NOARCHIVE' 17 ] 18 };
index.pug
pug
1include main 2 3doctype html 4html 5 body 6 head 7 link(rel='stylesheet', href="../src/css/reset.css") 8 link(rel='stylesheet', href="css/style.css") 9 link(rel="stylesheet",href="css/headerall.css") 10 link(rel='stylesheet', href="css/tab.css") 11 link(rel='stylesheet', href="css/sp.css") 12 link(rel='preconnect' href='https://fonts.gstatic.com') 13 title=package.title 14 meta(name='description', content=package.description) 15 meta(name='keywords', keywords=package.keywords) 16 meta(name='robots', keywords=package.robots)
問題2：Pugの構文エラー
おそらく「=」とobjectの間に空白があるとエラーになります。
pug
1title= package.title × 2title=package.title ○
投稿2021/06/17 02:53
編集2021/06/17 03:25
総合スコア508
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/17 02:59
2021/06/17 03:02
2021/06/17 03:05
2021/06/17 03:24
2021/06/17 04:30 編集
2021/06/17 05:11
2021/06/17 07:40