以前metaについて書きましたが、今回はgulp+EJS環境で外部JSONファイルを読む方法について書こうと思います。
これのメリットはそれぞれのページのmeta情報を一括で管理できるようになります
以前の記事はこちら
ファイルの準備
JSON
以下のようなJSONファイルを用意します
{
"default": {
"title": "デフォルトtitle",
"description": "default description",
"keywords": "keywords"
},
"about": {
"title": "aboutページタイトル",
"description": "about us, description",
"keywords": "about,keywords"
},
"contact": {
"title": "contactページタイトル",
"description": "contact us, description",
"keywords": "contact,keywords"
}
}gulpfile.jsのejsタスク
const ejs = require("gulp-ejs");
const fs = require('fs');
const ejsCompile = () => {
//jsonファイルを読み込み
var meta = JSON.parse(fs.readFileSync('./src/json/meta.json', 'utf8'));
return src(srcPath.ejs)
.pipe(ejs({
meta:meta
}, { ext: '.html'}
))
.pipe(dest(destPath.html));
};const fs = require('fs');
これはNode.jsのfsモジュールで、ファイルを操作する際に必要なものです。
fs.readFileSync(path, option)
ファイルの読み込みを行うための記述で、第二引数には文字コードを書きます
JSON.parse(file)
読み込んだファイルをJSONオブジェクトにするための関数です
ここでは変数metaに格納しています。
.pipe(ejs({meta:meta},{ ext: '.html'}))
ejsコンパイル時に変数meta（右）をmeta（左）という名前で渡します
ejs
ejsファイルでは、例えばabout.ejsの場合は以下のように書きます
<title><%= meta.about.title %></title>
<meta name="description" content="<%= meta.about.description %>" />
<meta name="keywords" content="<%= meta.about.keywords %>" />そうするとコンパイル時に以下のように出力されます
<title>aboutページタイトル</title>
<meta name="description" content="about us, description" />
<meta name="keywords" content="about,keywords" />contactページであればejs内のmeta.aboutをmeta.contactに変えるといった具合です
各ページに応じて読み込むように設定する
これが数ページならいいのですが、ejsファイルが増えていくとなるとそれぞれmeta.***をいちいち書き換えるのが面倒です
各ページ１箇所だけ変更すると自動的に読み込みたい記述を引っ張ってくるよう設定を行います
<%
var _default = json['default'];
for ( var key in _default ) {
if ( typeof page[key] === 'undefined' ) {
page[key] = _default[key];
}
}
-%>
<head>
<meta charset="UTF-8" />
<title><%= page['title'] %></title>
<meta name="description" content="<%= page['description'] %>" />
<meta name="keywords" content="<%= page['keywords'] %>" />
</head>
<%- include('./common/_head', { page: json['about'] }); %>この例でいくとabout.ejsで_head.ejsを読み込みます。
その際にjson['about']をpageと言う変数名で_head.ejsに渡します
つまり以前<%= meta.about.title %>としていたところのmeta.aboutの部分をpageに置き換えることができます
ここでmeta.jsonにaboutの内容が記述されていればその値がそのまま出力されます。
meta.jsで未定義の場合の処理
では以下の記述は一体何をしているのか
正直コピペで動きますが、一応何をしてるのかくらい把握しておくといいと思います。
知ってて損なことはないです
//抜粋
<%
var _default = json['default'];
for ( var key in _default ) {
if ( typeof page[key] === 'undefined' ) {
page[key] = _default[key];
}
}aboutの記述が全く、または一部ない場合にdefaultの内容が反映されるようにするための記述です
for...inでmeta.js内のdefaultをループで回してます
if( typeof page[key] === 'undefined' )
例えばmeta.jsのaboutのtitleがない状態だった場合や、{ page: json['hogehoge'] }が指定されてない場合などがこの条件に当てはまります
page[key] = _default[key];
するとこれが適用されデフォルトで設定された値が代入されます
for...inに関しては以下の記事をご覧の上、keyとary[key]がどのように出力されるか確認するとよくわかると思います
contact.ejsであれば同様に以下のように1箇所のみ記述を変えてあげればOKです
<%- include('./common/_head', { page: json['contact'] }); %>あとはお好みでmeta情報を増やしていけばいいと思います
