blog.textfile.org結城浩のブログ

blog.textfile.org

Octopressの一部に、独立したデザインの新ページを作る

背景

  • Octopressを使ってブログを運営している。
  • 作ったページはどれも統一感のあるデザインでまとまっている。

問題

  • Bootstrapのテンプレートを新たに使い、ブログとは独立したデザインの新ページを作りたい。
  • でも新たに別ブログや別サイトを立ち上げるのはいや。Octopressの一部を間借りする形にしたい。

解法

  • 以下では仮にsandboxという名前で新ページを作ることにする。

  • source/sandbox/index.markdown を作る。これは新ページのMarkdownソースである。

source/sandbox/index.markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: sandbox
date: 2014-10-20 21:12:08 +0900
title: "ささやかな、毎日の生活"
subtitle: "今日という日に感謝"
author: Hiroshi Yuki
---

# Heading 1

## Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(以下略)
  • source/_layouts/sandbox.html を作る。これは新ページのレイアウトである。Bootstrapのテンプレートをもとにする。

    • この中に出てくる css/bootstrap.min.cssなどのパスは(うまい解決方法がまだわかっていないので)assets/sandbox/ 以下に指定しておく。
    • たとえば、css/bootstrap.min.css<link href="http://blog.textfile.org/assets/sandbox/clean-blog/css/bootstrap.min.css" rel="stylesheet"> のように指定する。
    • ページのタイトルは page.title のように書き、二重の{} ではさむ。内容は content を同様にはさむ。source/_layouts/ の他のファイルを参考にすればわかる。要するにJekyllの(Liquidの)記法である。
  • 必要なファイル(自分が使いたいBootstrapのテンプレートなど)は(うまい置き場所がわかってないので)assets/sandbox/ 以下に展開する。

  • あとはいつも通りにbuildとdeployを行う。

結果

以下は、Start Bootstrapの Clean-Blog というテンプレートを利用した例である。blog.textfile.org配下なのに、このブログとまったく異なるテイストの新ページができている。