くまだどうも、くまだです。
JSONファイルを使って情報の出しわけをEJSで行う。
JSONファイルを使って情報を出しわける
例えば、以下のようなjsonファイルを用意します。
{
"siteInfo": {
"name": "サイト名",
"siteUrl": "サイトのドメイン"
},
"pages": {
"home": {
"name": "トップページ",
"description": "トップページの説明",
"type": "website",
"slug": "/",
"addClass":"test"
},
"news": {
"name": "ニュースページ",
"description": "ニュースページの説明",
"type": "article",
"slug": "/news/",
"addClass":"test2"
}
}
}_header.ejsには以下のように記述します。
<% let title = (pageId === 'home') ? jsonData.siteInfo.name : jsonData.pages[pageId].name + ' | ' + jsonData.siteInfo.name%>
<% let description = jsonData.pages[pageId].description %>
<!DOCTYPE html>
<html lang="ja">
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body>
<div class="container">
<!-- ヘッダー -->
<header class="header <%- jsonData.pages[pageId].addClass %>" >
~~省略~~
</header>index.ejs、news.ejsには以下のように記述。
〇index.ejs
<% let pageId = 'home'; %>
<%- include('_header', {pageId:pageId}) %>
<main>
～～コンテンツが入る～～
</main>
<%- include('_footer') %>〇 news.ejs
<% let pageId = 'news'; %>
<%- include('_header', {pageId:pageId}) %>
<main>
～～コンテンツが入る～～
</main>
<%- include('_footer') %>これらをHTMLとして出力すると、
〇index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サイト名</title>
<meta name="description" content="トップページの説明" />
</head>
<body>
<header class="header test">
～～省略～～
</header>
<main>
～～コンテンツが入る～～
</main>
<footer>
～～省略～～
</footer>
</body>
</html>〇 news.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ニュースページ | サイト名</title>
<meta name="description" content="ニュースページの説明" />
</head>
<body>
<header class="header test2">
～～省略～～
</header>
<main>
～～コンテンツが入る～～
</main>
<footer>
～～省略～～
</footer>
</body>
</html>という感じで出しわけることができます。
header.ejsやfooter.ejsなど共通パーツでも、トップページと下層ページで異なるクラスを指定してトップページ専用のヘッダー、下層ページ用ヘッダーとして使うこともできます。
metaタグの中身も、jsonファイルを使ってページごとに異なる情報を設定することができます。
ここまで読んでくださりありがとうございました。