Help us understand the problem. What is going on with this article?

ejsでjsonを読み込みmeta情報を一括管理

編集ファイル

  • gulpfile.js
  • _head.ejs(パーシャル化)
  • meta.json
  • 各個別ページのejsファイル

先ず、gulpfile.jsに設定を記述する。
jsonファイルを読み込むのに必要な「fs(File System)」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。
タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。

gulpfile.js
// gulp core
var gulp = require('gulp');
//fsファイルの読み込み
var fs = require( 'fs' );
var ejs = require("gulp-ejs");
var rename = require("gulp-rename");


gulp.task('ejs', function() {
  var json = JSON.parse(fs.readFileSync("../ejs/includes/meta.json","utf-8"));
  gulp.src(
      ["../ejs/**/*.ejs", '!' + "../ejs/**/_*.ejs"]  //参照するディレクトリ、出力を除外するファイル
    )
    .pipe(ejs({json:json})) //jsonの読み込み
    .pipe(rename({
      extname: ".html"
    })) //拡張子をhtmlに
    .pipe(gulp.dest("./"));
});

_head.ejsの頭に下記ソースを挿入。もし該当ページのmeta情報がなければdefaultの情報を入れるという記述。

_head.ejs
<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }
-%>

各meta要素のcontent部分に、<%= page['出力名'] %>といった記述を挿入。
descriptionやtitleといったjsonファイルで設定したものを載せる。

_head.ejs
~省略~
<meta name="description" content="<%= page['description'] %>" />
<meta property="og:title" content="<%= page['title'] %><%= page['sitename'] %>">
<meta property="og:image" content="<%= page['ogp_img'] %>">
<meta property="og:description" content="<%= page['description'] %>">
<meta property="og:url" content="<%= page['url'] %>">

meta.jsonにオブジェクトを記述していく。

defaultというオブジェクトが基本的に記述されるmeta情報。
その下に続けて書いてあるtopやaboutがページごとに設定していく情報。
この場合トップページとアバウトページになる。

meta.json
{
  "default": {
    "title": "ページタイトル",
    "description": "ディスクリプション!",
    "url":"サイトURL",
    "ogp_img": "ogp画像",
    "sitename": "配下ページタイトルの末尾に着けるサイト名(|株式会社○○など)"
  },
  "top": {
    "sitename": ""
  },
  "about": {
    "title": "アバウト",
    "url":"https://exsample.com/about/"
  }
}

※各オブジェクトの末尾はカンマをつけないこと。
jsonファイルは続けて記述する場合のみカンマをつける。でないとエラーがでる

meta.json
{
  "default": {
    "title": "ページタイトル",
    "description": "ディスクリプション!",
    "url":"サイトURL",
    "ogp_img": "ogp画像",
    "sitename": "配下ページタイトルの末尾に着けるサイト名(|株式会社○○など)", ←NG
  },
  "top": {
    "sitename": ""
  },
  "about": {
    "title": "アバウト",
    "url":"https://exsample.com/about/"
  }, ←NG
}

_head.ejsとmeta.jsonの設定が完了したら、あとはページごと個別にファイルを読み込んでいく。

index.ejs(トップ)
<%-
  include('./includes/_head', {
    page: json['top']
  });
%>
index.ejs(アバウト)
<%-
  include('../includes/_head', {
    page: json['about']
  });
%>

上記のように、ejsファイルの頭にjsonを読み込む記述を置く。
そうすると、対応したオブジェクト名の値が読み込まれ、meta情報が書き出される。

ここまで書いたら、あとはコンパイルするのみ。お疲れ様でした。

dt-media
通販ビジネスを最大化させるためのノウハウと具体的なソリューションのすべてをお客様にワンストップで提供
https://dt-media.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした