zukucode
主にWEB関連の情報を技術メモとして発信しています。
gulp

gulp markdownを変換してnunjucksで扱う

gulp markdownの内容をhtmlに変換するでmarkdownファイルの内容をhtmlに変換する方法を紹介しました。

実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。

そのため、markdownで変換した内容はdataとして次の処理に渡して、ファイルのコンテンツはnunjucksのテンプレートに変換します。

gulpをES2015で実装するで紹介したように、gulpfileはES2015の記法で実装しています。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import marked from 'marked';
import hljs from 'highlight.js';

const $ = gulpLoadPlugins();

// task処理一部抜粋
.pipe($.data((file) => {
  // html形式に変換します
  const marked = marked(String(file.contents), {
    highlight: (code, lang, callback) => hljs.highlight(lang, code).value
  });
  // ファイルのコンテンツはnunjucksのテンプレートに置き換えます
  file.contents = new Buffer(fs.readFileSync('default.njk')).toString());
  // html形式に変換したデータを返します
  return marked
}))

front-matterでテンプレートファイルを定義

gulp front-matterの内容をdataとして使用するで紹介した方法で、nunjucksのテンプレートファイルはmarkdownの各ページ（ファイル）ごとに持たせます。

---
title: タイトル
layout: template123.njk
---
記事の内容

タスク処理は以下のようになります。front-matterの情報はdata.metaで参照できるようにしています。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import marked from 'marked';
import hljs from 'highlight.js';
import fm from 'front-matter';

const $ = gulpLoadPlugins();

// task処理一部抜粋
.pipe($.data((file) => {
  const content = fm(String(file.contents));
  // ファイルの内容を設定します（front-matterの記載部分を取り除く）
  file.contents = new Buffer(content.body);
  // front-matterの情報をデータとして返します
  return { meta: content.attributes };
}))
.pipe($.data((file) => {
  // html形式に変換します
  const marked = marked(String(file.contents), {
    highlight: (code, lang, callback) => hljs.highlight(lang, code).value
  });
  // ファイルのコンテンツはnunjucksのテンプレートに置き換えます
  // front-matterに未定義の場合はdefault.njkを読み込みます
  file.contents = new Buffer(fs.readFileSync(file.data.meta.layout || 'default.njk').toString());
  // html形式に変換したデータを返します
  return marked
}))

この段階でdataにmarkdownで記載したfront-matterのデータとhtmlに変換されたmarkdownのデータが入っています。

そしてファイルの中身はnunjucksのテンプレートになっているので、最後にnunjucksをhtmlに変換すれば、実際に公開するhtmlファイルが作成されます。

gulp

関連記事