サイト制作に関するメモ書き

HOME > HTML・CSS > Pugのif文で変数がない場合の対応

Pugのif文で変数がない場合の対応

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タイトル">

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP