読者です 読者をやめる 読者になる 読者になる

kkana's blog

新米コーダーの忘れそうなことメモ

hexoでブログ構築(3) テンプレートをカスタマイズする

hexo ejs

まずブログのデザインを決め普通に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の中はこんな感じ。

<!DOCTYPE html>
<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: '&laquo; Prev',
      next_text: 'Next &raquo;'
    }) %>
  </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にあげます・・。