Nunjucksで独自のファンクションを実行する

Nunjucksのテンプレートファイルに独自に定義した別ファイルのファンクションを実行する方法を紹介します。

gulpでコンパイルする場合を想定しています。

gulp-data

gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法で紹介したように、gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。

同じ要領で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファンクションをテンプレートから呼び出すことができます。

例えば、以下のようなファンクションを定義したファイルを作成します。

func.js
exports.func = {
  func1 : function func1(){
    return 'func1test';
  },
  func2 : function func2(param){
    return 'func2' + param;
  }
};

gulpfile.jsは以下のようにします。

gulpfile.js
var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data'); //gulp-dataを参照します
var nunjucks_func = require('func.js'); //作成したファイルを参照します

gulp.task('compile', function(){
  nunjucksRender.nunjucks.configure('src/'); //相対パスを指定
  gulp.src(['src/**/*.njk',
            '!src/**/_*.njk'])
    .pipe(data(nunjucks_func.func)) //ファンクションを指定します
    .pipe(nunjucksRender())
    .pipe(gulp.dest('dst'));
});

以下のようにして、定義したファンクションをテンプレートファイルから呼び出すことができます。

<!DOCTYPE HTML>
<html>

<head>
  <title>サンプルホームページ</title>
</head>

<body>
  {{ func1() }} <!-- "func1test"と出力されます -->
  {{ func2('testA') }} <!-- "func2testA"と出力されます -->
</body>
</html>

関連記事

  • Front Matterでファイルごとに変数を持たせる

    Front Matterを使えば、各ファイルに変数を定義して簡単に扱えるようになります。各ページの先頭に以下のように---で囲って情報を定義します。content.attributesでFront M...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのテ...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...