ディレクトリの構成

テンプレートは以下のファイルで構成されており、ディレクトリごとに役割が決まっています。 より詳しい情報はJekyll公式のドキュメントを参照してください。

Semimaro
├── 404.html        #404ページ
├── LICENSE
├── README.md
├── _config.yml     #ビルド設定ファイル
├── _includes       #各レイアウトで使いまわしたいHTMLテンプレート群
├── _layouts        #ページのレイアウトを決めるHTMLテンプレート
├── _posts          #ブログのマークダウンファイル
├── _sass           #スタイルファイル群
├── _site           #ビルドしたWEBサイトが出力されるディレクトリ
├── about-en.md     #Aboutページ（日本語）
├── about-ja.md     #Aboutページ（英語）
├── assets          #画像やメインスタイルファイル等
├── blog.md         #ブログページ（日付ごと）
├── index.md        #ホーム
├── publication.md  #研究業績ページ
└── tags.md         #ブログページ（タグごと）

レイアウトを変えたい

/_layoutsや/_includesディレクトリにあるHTMLテンプレートによってレイアウトを変更します。 /_includesに各ページで使い回すHTMLテンプレートを作成し、/_layoutsで以下のコードのようにインクルードしてサイトを構成します。

詳しくはjekylll公式ドキュメントを参照してください。

より柔軟なカスタマイズを行いたい場合は、Liquidのドキュメントも参照してください。

日本語と英語のページを用意したい

Front matterにlang:ja-JPを設定したページとlang:en-USを設定したページを用意します。テンプレートでは以下の2つのファイルがそれにあたります。

Semimaro
├── ...
├── about-en.md     #Aboutページ（日本語）
├── about-ja.md     #Aboutページ（英語）
├── ...

_config.ymlのナビゲーションバーの設定にこれら2つのファイルをネストした状態で設定するとドロップダウンメニューとしてナビゲーションバーに表示されます。

navitem:
  - 
    - about-ja.md
    - about-en.md
  - blog.md
  - publication.md

デザインを変えたい

/_saasディレクトリにスタイルファイルがあります。

_sass
├── bulma.sass
├── j4r.scss
├── sass
└── usercss.scss

SaSS(SCSS)とはCSSを拡張したメタ言語であり、変数の定義、mixinによるスタイルの使い回し、制御構文などの便利な機能を使うことができます。 Sass記法とSCSS記法があり、SCSS記法ではCSSに近い書き方ができます。 デザインを調整したいときは/_saas/usercss.scssに変数やスタイルを定義してください。

本テンプレートではBulmaというCSSフレームワークを利用しています。 Bulmaでは変数を設定することで、カスタマイズを行うことができます。

Variables

例えば、

$link: $red;

とすることで、リンクの色が赤色になります。 また、従来のCSSのようにセレクタを使ってスタイルを定義することもできます。

Google Analyticsを導入したい

トラッキングIDを取得し、_config.ymlより、以下の行をコメントアウトし設定してください。

google_analytics_tracking_id: xx-xxxxxxxxx-x

ブログにコメント機能を付けたい

Jekyllはデータベースを使わない静的ウェブサイトのため、コメント機能は外部ライブラリを使います。 Disqusというサービスに登録し、URLの登録等を行ってshortnameを取得してください。 _config.ymlより、以下の行をコメントアウトしshortnameを設定してください。

disqus_shortname: your_shortname

参考になるURLまとめ

JekyllではLiquidというテンプレートエンジンを利用します． カスタマイズの際は参考になります．

また，当テンプレートでは以下のCSSフレームワークおよび外部ライブラリを使用しています。 カスタマイズの際は各ドキュメントを参照してください。