Pugのif文で変数を使用する際、変数が設定されているかの判別で少し迷うことがあったのでメモ。
サンプルコード
やりたかったことは、OGPのタイトルを各ページ内で変数で設定できるようにして、変数がない場合はページタイトルを使用するという内容です。
まずはやろうとしてうまくいかなかった例です。
head.pug
title #{pageTitle} if ogTitle=='' - var thisOgTitle = pageTitle; else - var thisOgTitle = ogTitle; meta(property="og:title" content=thisOgTitle)
ページタイトルは「pageTitle」、OGP用のタイトルは「ogTitle」という変数で各ページ管理の想定です。
次に各ページの設定です。
ページA.pug(ogTitleの値が空の場合)
- var pageTitle = 'ページAタイトル'; var ogTitle = '';
ページB.pug(ogTitleの値を設定している場合)
- var pageTitle = 'ページBタイトル'; var ogTitle = 'ページBの個別設定OGPタイトル';
ページC.pug(ogTitle自体が無い場合)
- var pageTitle = 'ページCタイトル';
ページAはOGP用タイトルを空に、ページBはOGP用タイトルを設定、ページCはOGP用タイトルの変数を削除しています。
この状態でコンパイルすると、それぞれ以下のような出力になりました。
ページA.html(ogTitleの値が空の場合)
<title>ページAタイトル</title> <meta property="og:title" content="ページAタイトル">
ページB.html(ogTitleの値を設定している場合)
<title>ページBタイトル</title> <meta property="og:title" content="ページBの個別設定OGPタイトル">
ページC.html(ogTitle自体が無い場合)
<title>ページCタイトル</title> <meta property="og:title">
ページAとページBは想定通りの表示になりましたが、ページCのOGPタイトルの値が出力されませんでした。
いろいろ試してみた結果、以下のような設定だと意図した通りの出力になりました。
head.pug
title #{pageTitle} unless ogTitle - var thisOgTitle = pageTitle; else - var thisOgTitle = ogTitle; meta(property="og:title" content=thisOgTitle)
unlessを使って変数のみで判別する形にしています。
これで再度コンパイルすると、以下のようなHTMLが出力されました。
ページA.html(ogTitleの値が空の場合)
<title>ページAタイトル</title> <meta property="og:title" content="ページAタイトル">
ページB.html(ogTitleの値を設定している場合)
<title>ページBタイトル</title> <meta property="og:title" content="ページBの個別設定OGPタイトル">
ページC.html(ogTitle自体が無い場合)
<title>ページCタイトル</title> <meta property="og:title" content="ページCタイトル">
コメントが承認されるまで時間がかかります。