まずブログのデザインを決め普通にhtmlで書き起こし、スタイルを整えて機能にわけて使えるようにした。
デフォルトで入っているテーマを変更しながら自分の好きなようにテーマを作っていく。
とはいえ・・・初めてテンプレートというものを使ってみる＆ejsの基本的なところを読んだだけではどうしていいのかわからなかったため
こちらの方の記事を参考に
http://dev.shikakun.com/post/hexo-init/
コミット歴をなぞりつつ、こうやるのか・・・と覚えながら変更を加えていきました。（ありがとうございます・・・！）
テーマの階層はこんな感じ。
.
└── themeName
├── _config.yml
├── gulpfile.js
├── layout
│ ├── _partial
│ │ ├── archive.ejs・・アーカイブのレイアウトを定義
│ │ ├── article.ejs・・各記事のレイアウトを定義
│ │ ├── head.ejs・・・・headの中身が書いてある
│ │ ├── header.ejs・・・ページのヘッダーが書いてある
│ │ └── post・・・・・・ここに記事の型を入れていく
│ │ ├── date.ejs
│ │ ├── nav.ejs
│ │ ├── tag.ejs
│ │ └── title.ejs
│ ├── archive.ejs
│ ├── index.ejs
│ └── layout.ejs・・・ページの雛型
├── node_modules
├── package.json
└── source・・・cssなど
layout.ejsの中はこんな感じ。
<html>
<%- partial('_partial/head') %>
<body>
<%- partial('_partial/header') %>
<main class="articleWrap">
<%- body %>
</main>
<footer>
</footer>
</body>
</html>
今回はアーカイブもindexも同じレイアウトにしたかったのでindex.ejsもarchive.ejsも
<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>
というふうにした。
partial/archive.ejs内で各記事を繰り返し書くようにしている
<% page.posts.each(function(post){ %>
<%- partial('article', {post: post, index: true}) %>
<% }) %>
<% if (page.total > 1){ %>
<nav id="page-nav">
<%- paginator({
prev_text: '« Prev',
next_text: 'Next »'
}) %>
</nav>
<% } %>
hexoには用意されている変数がいくつかある。
詳しくは
https://hexo.io/docs/helpers.html
ファイルを呼び出すときは
<%- partial(layout, [locals], [options]) %>
cssを呼び出すときは
<%- css(path, ...) %>
ページネーターは
<%- paginator(options) %>
という感じで・・・。楽チン！
各記事は
<article class="article">
<header class="article-header">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/title', {class_name: 'article-title'}) %>
<%- partial('post/tag') %>
</header>
<main class="article-main">
<%- post.content %>
</main>
</article>
というふうにして、日付、タイトル、タグ、コンテンツを分けてある。
ページの中身もhexoで変数が用意されていて、
page.title（タイトル）
page.date（日付）
page.content（コンテンツ）
page.tags（タグ）
タグリストも変数があるので、
<%- list_tags([options]) %>
クラスをつけて全て表示したいときは
<% if (post.tags && post.tags.length){ %>
<%- list_tags(post.tags, {
show_count: false,
class: 'article-ingredient'
}) %>
<% } %>
という感じで書くことができる。
また設定ファイルの中も変数になっていて
config.yaml内のいろんな情報も使いやすい！
https://hexo.io/docs/configuration.html
たとえばhead内は
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<%= config.description %>">
<title><%- config.title %></title>
<%- css('/css/style') %>
</head>
こんな感じでかける。
なんとなくテンプレートの使い方がわかった気がする。
ブログ完成したらgithbにあげます・・。
