Jekyllのテーマを自作する基本編 - 第9回（終） - まとめ

さて､前回までで簡単なJekyllテーマ作成は終了です｡今回はまとめの回となります｡

本シリーズで作成したテーマファイル一式

本シリーズで作成したテーマファイル一式です｡「_sites」以下と「_posts」以下は省略します｡


my-jelyll
├── .git
├── .gitignore
├── _config.yml
├── _includes
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
├── _sass
│   ├── config.scss
│   ├── extends.scss
│   └── mixins.scss
├── _site
├── about.md
├── assets
│   ├── css
│   │   └── style.scss
│   └── images
│   └── js
└── index.html

title: My Jekyll
description: >
  My Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
baseurl: ""
url: "http://e-joint.jp"

author:
  name: e-JOINT.jp
  email: mail@example.com
  github: ejointjp
  twitter: ejointjp

paginate: 3
paginate_path: page:num

sass:
  style: expanded

gems:
  - jekyll-paginate
  - jekyll-feed

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }} | {{ site.description}}{% endif %}</title>
  <!-- Normalize.css -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Main CSS -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <meta name="viewport" content="width=device-width">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
  {% feed_meta %}
</head>

<body>

<!-- サイト名とナビゲーション部分｡全ページ共通 -->
<header class="header">
  <div class="container">
    <div class="site-title"><a href="{{ '/' | relative_url }}">{{ site.title }}</a></div>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="{{ '/' | relative_url }}">Home</a></li>
        <li class="nav__item"><a href="{{ '/about/' | relative_url }}">About</a></li>
      </ul>
    </nav>
  </div>
</header>



{{ content }}



<!-- フッター｡全ページ共通 -->
<footer class="footer">
  <div class="container">
    <div class="footer__container">
      <p class="copyright"><small>&copy; 2017 {{ site.author.name }}</small></p>

      <div class="social-link">
        {% if site.author.github %}
          <p class="social-link__item">
            <a href="https://github.com/{{ site.author.github }}"><i class="fa fa-github"></i></a>
          </p>
        {% endif %}
        {% if site.author.twitter %}
          <p class="social-link__item">
            <a href="https://twitter.com/{{ site.author.twitter }}"><i class="fa fa-twitter"></i></a>
          </p>
        {% endif %}
      </div>
    </div><!--footer__container-->
  </div><!--container-->
</footer>

</body>
</html>

---
layout: default
---

<article class="contents page">
  <div class="container">
    
    <div class="page__header">
      <h1 class="page__title">{{ page.title }}</h1>
      <p class="page__description">{{ page.description }}</p>
    </div>

    <div class="page__body">


        {{ content }}


    </div><!--page__body-->
    
  </div><!--container-->
</article><!--page-->

---
layout: default
---

<article class="contents page">
  <div class="container">

    <div class="page__header">
      <h1 class="page__title">{{ page.title }}</h1>
      <p class="page__date">{{ page.date | date: '%B %d, %Y' }}</p>
    </div>

    <div class="page__body">


      {{ content }}


    </div><!--page__body-->

    <!-- 前後のページへのリンクを表示したい -->
    <div class="pager">

      {% if page.next %}
        <p class="pager__item--next">
          <a href="{{ page.next.url | relative_url }}">&lt; {{ page.next.title }}</a>
        </p>
      {% endif %}

      {% if page.previous %}
        <p class="pager__item--prev">
          <a href="{{ page.previous.url | relative_url }}">{{ page.previous.title }} &gt;</a>
        </p>
      {% endif %}

    </div><!--pager-->
    
  </div><!--container-->
</article><!--page-->

---
layout: default
---

<div class="contents front-page">
  <div class="container">

    <!-- 記事一覧 -->
    {% for post in paginator.posts %}
      <article class="archive">
        <h2 class="archive__title"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
        <p class="archive__date"><time>{{ post.date | date: '%B %d, %Y' }}</time></p>
        <div class="archive__excerpt">{{ post.excerpt }}</div>
      </article>
    {% endfor %}

    <!-- ページネーション -->
    {% if paginator.total_pages > 1 %}
      <div class="pagination">

        {% if paginator.previous_page %}
          <a class="pagination__item" href="{{ paginator.previous_page_path | relative_url }}">&lt; 前のページ</a>
        {% endif %}

        {% for page in (1..paginator.total_pages) %}
          {% if page == paginator.page %}
            <span class="pagination__item current">{{ page }}</span>
          {% elsif page == 1 %}
            <a class="pagination__item" href="{{ site.paginate_path | relative_url | replace: 'page:num', '' }}">{{ page }}</a>
          {% else %}
            <a class="pagination__item" href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
          {% endif %}
        {% endfor %}

        {% if paginator.next_page %}
          <a class="pagination__item" href="{{ paginator.next_page_path | relative_url }}">次のページ &gt;</a>
        {% endif %}

      </div><!--pagination-->
    {% endif %}

  </div><!--container-->
</div><!--main-->

---
layout: page
title: About
description: プロフィールページのサンプルです｡よろしくお願いします｡
permalink: /about/
---

マークダウン形式で書けます｡

## Lorem ipsum

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.

---
---

@import 'config';
@import 'mixins';
@import 'extends';


a{
  color: $font-color-a;
  &:hover{
    color: $font-color-a-hover;
  }
}

body{
  color: $font-color;
}

h2{
  margin: 2em 0 1.5em 0;
  font-size: 20px;

  @include breakpoint(){
    font-size: 24px;
  }
}

p{
  margin: 0 0 1em 0;
}

.archive{

  @include pad();
  border-bottom: $border;

  &__title{

    margin: 0;

    a{
      color: $font-color;
      text-decoration: none;
    }
  }

  &__date{
    @extend %meta;
  }

  &__excerpt{
    font-size: 14px;
    color: #666;
    margin-top: 1em;
  }
}

.container{
  max-width: $container-width;
  margin: auto;
  padding: 0 25px;
}

.copyright{
  margin-bottom: 0;
}

.footer{
  border-top: $border;
  @include pad();

  &__container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.front-page{
  @include pad();
}

.nav{

  border-top: $border;
  border-bottom: $border;

  &__list{
    @include resetlist();
    display: flex;
    flex-wrap: wrap;
  }

  &__item{
    margin-right: 1em;

    a{
      display: block;
      text-decoration: none;
      color: $font-color;
      padding: 15px 10px;
      font-size: 0.9em;
    }
  }
}

.page{

  &__header{
    border-bottom: $border;
    @include pad();
  }

  &__title{
    margin: 0;
    font-size: 28px;

    @include breakpoint(){
      font-size: 40px;
    }
  }

  &__description{
    @extend %meta;
  }

  &__body{
    @include pad();
  }

  &__date{
    @extend %meta;
  }
}

.site-title{
  font-weight: bold;
  padding: 4% 0;

  @include breakpoint(){
    font-size: 20px;
  }

  a{
    color: $font-color;
    text-decoration: none;
  }
}

.pager{
  @include pad();
  display: flex;
  flex-wrap: wrap;

  &__item{

    $pre: &;

    a{
      text-decoration: none;
    }

    &--prev{
      @extend #{$pre};
      margin-left: auto;
    }

    &--next{
      @extend #{$pre};
      margin-right: auto;
    }
  }
}

.pagination{
  @include pad();
  display: flex;
  flex-wrap: wrap;

  &__item{

    margin-right: 4px;
    text-decoration: none;
    display: block;
    padding: 7px 16px;
    border: $border;
  }

  .current{
    background: $color-main;
    border-color: $color-main;
    color: white;
  }
}

.social-link{
  display: flex;
  flex-wrap: wrap;

  &__item{
    font-size: 1.5em;

    a{
      color: #666;
      display: block;
      padding: 5px;
    }
  }
}

$border: 1px solid #ccc;
$color-main: rgb(37, 111, 153);
$container-width: 800px;
$font-color: #333;
$font-color-a: rgb(47, 135, 167);
$font-color-a-hover: lighten($font-color-a, 15%);

@mixin breakpoint($width: 800px){
  @media screen and (min-width: $width){
    @content;
  }
}

@mixin resetlist(){
  list-style: none;
  margin: 0;
  padding: 0;
}

@mixin pad($size: 1){
  padding: 4% * $size 0;
}

%meta{
  font-size: 0.8em;
  color: #666;
  margin-top: 1em;
}

Jekyllのテーマを自作する 基本編 – 第9回（終） – まとめ

本シリーズで作成したテーマファイル一式

トラックバック

Jekyllのテーマを自作する基本編 – 第9回（終） – まとめ