かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

PugでPHPタグを出力したい

pug (jade) Node.js PHP Gulp

pugはHTMLテンプレートエンジンなのですが gulp などで拡張子をリネームしてしまえば PHPのテンプレートファイルにする事もできます。
ex:

var gulp    = require("gulp"),
    plumber = require("gulp-plumber"),
    rename  = require('gulp-rename'),
    pug     = require("gulp-pug");

gulp.task('pug', function(cb) {
  let options = {
        pretty: true
      };
  return gulp.src( files )
    .pipe( plumber() )
    .pipe( pug(options) )
    .pipe( rename({
      extname: '.php'
    }) )
    .pipe( gulp.dest( destPath ) );
});

こんな時にpugで生成するファイルにPHPタグを出力する方法のメモ。

pugの機能であるHTMLタグなどをエスケープしない Plain Text を利用するとPHPタグを出力することができます。(エスケープされないので、この方法を使うとPHPタグに限らず<script>タグなども出力できます。)

Plain Text
Pug provides four ways of getting plain text
...
And because plain text is not escaped, you can also include literal HTML.
出典: Plain Text – Pug

HTMLのタグ内にPHPを出力する

1行で出力する時はタグの後スペースを置き直接 PHPタグを書く ( Inline in a Tag )

// pug
div <?php the_content(); ?>

// コンパイル後
<div><?php the_content(); ?></div>

　
複数行で出力する場合

1. タグ名 の後に .を置き改行&インデントしてPHPを書く ( Block in a Tag )
// pug
div.
  <?php
    $id = get_the_ID();
    echo get_the_title( $id );
  ?>

// コンパイル後
<div><?php
  $id = get_the_ID();
  echo get_the_title( $id );
?></div>
2. タグ名を書き改行・インデントして行毎に | +スペースに続けてPHPを書く ( Inline in a Tag )
// pug
div
  | <?php
  |   $id = get_the_ID();
  |   echo get_the_title( $id );
  | ?>

// コンパイル後
<div><?php
  $id = get_the_ID();
  echo get_the_title( $id );
?></div>

hrefやaltなどの属性の値にPHPを出力する

pugの属性の値はエスケープされるので Inline in a Tag のように書いても上手くコンパイルされません。

// pug
a(href="<?php the_permalink(); ?>") Link Text

// コンパイル後  < > がエスケープされてしまう
<a href="&lt;?php the_permalink(); ?&gt;">Link Text</a>
!= を使うと属性にPHPタグが出力できる

Using != disables HTML-encoding in attributes.
出典: node.js - Jade: Why && is compiled to &amp; when used in angularjs in Jade template? - Stack Overflow

属性の場合、pugの変数を属性に設定する時と同じように != の後にスペースを開けて"の括った中に出力したいPHPタグを書けばOK。PHPタグを " で囲うことでタグを含む文字列としてそのまま出力させることができます。

// pug
a(href!= "<?php the_permalink(); ?>") Link Text

// コンパイル後
<a href="<?php the_permalink(); ?>">Link Text</a>

HTMLタグ外に直接PHPタグを出力する

PHPファイルの先頭のコメントなど、HTMLタグの外にPHPタグを出力させる方法。
複数行で出力する場合と同じ方法を、先頭にHTMLタグ名無しでも使用することができるようです。

1. . の後に改行したインデント内に記述する方法 ( Block in a Tag )
// pug
.
  <?php
    /**
     * hoge
     */
  ?>

// コンパイル後
<?php
  /**
   * hoge
   */
?>
2. | + スペースで記述する方法 ( Piped Text )
// pug
| <?php
|   /**
|    * fuga
|    */
| ?>

// コンパイル後
<?php
  /**
   * fuga
   */
?>
3. < で始まるタグはプレーンテキストとして解釈される事を利用する ( Literal HTML )

Literal HTML
Whole lines are also treated as plain text when they begin with a left angle bracket (<), ...
出典: Plain Text – Pug

pugは < から始まる行をプレーンテキストとして出力するので、PHPの開始タグに関してはこの方法を利用することができます。

//pug
<?php
.
   /**
    * Mofu
    */
  ?>

// コンパイル後
<?php /**
  * Mofu
  */
?>

//pug
<?php
  |
  | /**
  |  * Bar
  |  */
  | ?>

// コンパイル後
<?php
/**
 * Bar
 */
?>

先頭の <?php だけ Literal HTML で出力し、あとの部分は . block か | を使う必要があるので、全部 . block か | で書いてしまった方が簡単だと思いますが... 　

まとめ

pugでPHPタグやhtmlタグを直接出力する時は

  • HTMLタグ内/外 の場合は
    1. . の後に改行しインデントしてタグをそのまま記述する
    2. | に続けて出力するタグをそのまま記述
  • 属性の値として出力する時は != "<?php 出力するコード ?>" の形式で記述

と覚えておけば良さそうです！

[参考]

ゲーマーズ！ DLC (富士見ファンタジア文庫)

ゲーマーズ！ DLC (富士見ファンタジア文庫)