DojoJimanページ作成とそれに伴う_pagesの作成

_config.yml

@@ -33,6 +33,10 @@ github_username:
 plugins:
   - jekyll-feed
 
+collections:
+  pages:
+    output: true
+
 defaults:
   - scope:
       path: ""

_includes/navbar.html

@@ -16,8 +16,9 @@
         <a class="nav-item nav-link active" href="{{site.url}}/session">セッション</a>
         <a class="nav-item nav-link active" href="{{site.url}}/event">イベント企画</a>
         <a class="nav-item nav-link active" href="{{site.url}}/contest">コンテスト</a>
-        <a class="nav-item nav-link active" href="{{site.url}}/workshop">ワークショップ</a> 
-        <a class="nav-item nav-link active" href="{{site.url}}#contactus">お問い合わせ</a>        
+        <a class="nav-item nav-link active" href="{{site.url}}/workshop">ワークショップ</a>
+        <a class="nav-item nav-link active" href="{{site.url}}/dojo-jiman">Dojo自慢</a>
+        <a class="nav-item nav-link active" href="{{site.url}}#contactus">お問い合わせ</a>
       </div>
     </div>
 

_layouts/jiman_media.html

@@ -0,0 +1,46 @@
+---
+layout: default
+---
+<div class="post-head">
+  <h2 class="font-weight-bold">Dojo自慢</h2>
+</div>
+
+<div class="post">
+  <h1 class="post-title font-weight-bold">{{ page.title }}</h1>
+
+  {% if page.categories[0] == "news" %}
+    <p class="post-date">{{ page.date | date:"%Y.%-m.%-d" }}</p>
+  {% elsif page.categories[0] == "workshop" or page.categories[0] == "session" %}
+    <div class="tags">
+      {% for tag in page.tags %}
+        <span class="tag-post">{{tag}}</span>
+      {% endfor %}
+    </div>
+    <p class="post-time">{{page.time}}</p>
+  {%endif%}
+
+
+  <div class='post-content mt-5'>
+    {{ content }}
+
+    <hr>
+    <div class="row">
+      <div class="col-2">
+        {% if page.dojo_icon %}
+          <img src="https://raw.githubusercontent.com/coderdojo-japan/coderdojo.jp/master/public/img/dojos/{{page.dojo_icon}}.png" />
+        {% else %}
+          <img src="https://coderdojo.jp/img/dojos/coderdojo.png" />
+        {% endif %}
+      </div>
+      <div class="col-10">
+        <p class="text-left font-weight-bold h4">{{ page.dojo_name }}</p>
+        <p class="text-left">{{ page.dojo_desciption }}</p>
+      </div>
+    </div>
+    <div id="spacer" style="height: 2em;"></div>
+    <a href="/dojo-jiman/" class="btn btn-red"><i class="fas fa-chevron-circle-left"></i> 一覧に戻る</a>
+    <br />
+    <a href="/" class="btn btn-red"><i class="fas fa-chevron-circle-left"></i> トップページに戻る</a>
+  </div>
+
+</div>

_layouts/jiman_text.html

@@ -0,0 +1,54 @@
+---
+layout: default
+---
+<div class="post-head">
+  <h2>Dojo自慢</h2>
+</div>
+
+<div class="post">
+  <h1 class="post-title">{{ page.title }}</h1>
+
+  {% if page.categories[0] == "news" %}
+    <p class="post-date">{{ page.date | date:"%Y.%-m.%-d" }}</p>
+  {% elsif page.categories[0] == "workshop" or page.categories[0] == "session" %}
+    <div class="tags">
+      {% for tag in page.tags %}
+        <span class="tag-post">{{tag}}</span>
+      {% endfor %}
+    </div>
+    <p class="post-time">{{page.time}}</p>
+  {%endif%}
+
+  <div class='post-content mt-5'>
+
+		{% if page.thumbnail %}
+		<img src="{{site.url}}/img/post/{{page.thumbnail}}" />
+		{% else %}
+		<img src="{{site.url}}/img/ogp_1.png" />
+    {% endif %}
+
+    {{ content }}
+    <div id="spacer" style="height: 2em;"></div>
+    <hr>
+    <div class="row">
+      <div class="col-2">
+          <div class="col">
+            {% if page.dojo_icon %}
+              <img src="https://raw.githubusercontent.com/coderdojo-japan/coderdojo.jp/master/public/img/dojos/{{page.dojo_icon}}.png" />
+            {% else %}
+              <img src="https://coderdojo.jp/img/dojos/coderdojo.png" />
+            {% endif %}
+          </div>
+      </div>
+      <div class="col-10">
+        <p class="text-left font-weight-bold h4">{{ page.dojo_name }}</p>
+        <p class="text-left">{{ page.dojo_desciption }}</p>
+      </div>
+    </div>
+    <div id="spacer" style="height: 2em;"></div>
+    <a href="/dojo-jiman/" class="btn btn-red"><i class="fas fa-chevron-circle-left"></i> 一覧に戻る</a>
+    <br />
+    <a href="/" class="btn btn-red"><i class="fas fa-chevron-circle-left"></i> トップページに戻る</a>
+  </div>
+
+</div>

_pages/dojo-jiman/README.md

@@ -0,0 +1,39 @@
+# Dojo自慢掲載マニュアル
+お世話になっております。Dojo自慢のデータ記入方法についてこちらでご案内いたします。
+
+## ページ上部の---の中身
+
+jekyllでは--- ---の中で変数とかを貯めておけます。
+
+```
+---
+layout: jiman_media
+title:  "タイトル〜サブタイトル〜（YouTube）"
+dojo_name:  "道場名"
+thumbnail: jiman/hoge1.png
+dojo_desciption: >
+  ああああああああああ
+dojo_icon:
+permalink: /dojo-jiman/fuga/
+---
+```
+
+1. Layout
+  ``jiman_text``と``jiman_media``の2種類をご用意しています。違いとしてはOGP・サムネイルとページ上部に出る画像が共通化されてるのが``jiman_text``，ページ上部に出ないのが``jiman_media``です。これ以外を選ぶとリストに表示されなくなります。
+2. Title
+  要するに上に出るタイトルです
+3. Thumbnail
+  ogpのための画像です。``jiman_text``の場合はページ上部に出る画像でもこれが使われます。選ばなかった場合はOGP用の画像が使われます。
+4. dojo_name
+  Dojoの名前です。ロゴ横に表示されます。
+5. dojo_description
+  ページ下部にある道場名の下に表示されるものです。
+6. dojo_icon
+  アイコンです。``coderdojo.jp``から吸いだしています。なお，岡南がOkayamaと指定されているように，道場名と異なるものが指定されている場合がありますので，[``coderdojo.jpレポジトリ/public/img/dojos``](https://github.com/coderdojo-japan/coderdojo.jp/tree/master/public/img/dojos)をご参照ください。
+7. permalink
+  ``/dojo-jiman/（名称とか番号とか）``と指定してください。
+
+という感じでお願いします。
+
+## ページ中身について
+私の環境だけかもしれないですが，HTMLのタグをmarkdownで使うとエラーが起きるので，YouTubeとかを埋め込む際はHTMLを書いてください。

_pages/dojo-jiman/index.html

@@ -0,0 +1,62 @@
+---
+layout: default
+title:  "Dojo自慢"
+copy: "- Beyond the distance(距離を超えて) -"
+permalink: /dojo-jiman/
+---
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-md-6 offset-md-3 col-12">
+            <h1>Dojo自慢</h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12 p-3" id="timetable">
+            <p>
+                DojoCon Japanでは<a href="{{site.url}}/posts/6/">Dojo自慢を募集</a>いたしました。
+            </p>
+            <p>
+                ご投稿につきましては、以下に掲載させていただきました。
+            </p>
+            {% for page in site.pages %}
+                {% if page.layout == "jiman_media" or page.layout == "jiman_text" %}
+                    <div class="page">
+                        <div class="row">
+                            <div class="col-6 col-md-2">
+                                <div class="row">
+                                    <div class="col-4 col-md-3 jiman1">
+                                    {% if page.dojo_icon %}
+                                        <img src="https://raw.githubusercontent.com/coderdojo-japan/coderdojo.jp/master/public/img/dojos/{{page.dojo_icon}}.png" width="100%"/>
+                                    {% else %}
+                                        <img src="https://coderdojo.jp/img/dojos/coderdojo.png" width="100%"/>
+                                    {% endif %}
+                                    </div>
+                                    <div class="col-8 col-md-9 jiman1">
+                                        <p class="text-left dojoname">{{ page.dojo_name }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-9 col-md-8">
+                                <span class="text-left h2">{{ page.title }}</span>
+                            </div>
+                            <div class="col-3 col-md-2 d-flex align-items-center">
+                                <a href="{{page.url}}" class="btn btn-main">もっと見る</a>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<style>
+    .dojoname{
+        text-align: center;
+        padding: 0.8em;
+    }
+    .jiman1{
+        padding-right: 0 !important;
+        padding-left: 0 !important;
+    }
+</style>

_pages/dojo-jiman/jiman-fuga.html

@@ -0,0 +1,18 @@
+---
+layout: jiman_media
+title:  "タイトル〜サブタイトル〜"
+dojo_name:  "道場名"
+thumbnail: jiman/hoge1.png
+dojo_desciption: >
+  この例は動画とか用です。
+dojo_icon:
+permalink: /dojo-jiman/fuga/
+---
+<p class="text-center h3">以下の動画をご覧ください！</p>
+<div class="text-center">
+  <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pQ6bVZfj4Ak?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<!--あるいは-->
+<p class="text-center h3">PDF資料を見る</p>
+<a class="button" href="hoge.pdf">ダウンロード</a>

_pages/dojo-jiman/jiman-hoge.md

@@ -0,0 +1,26 @@
+---
+layout: jiman_text
+title:  "タイトル〜サブタイトル〜"
+dojo_name:  "道場名"
+thumbnail: jiman/hoge1.png
+dojo_desciption: >
+  この例文は、インターネットの図書館、青空文庫（http://www.aozora.gr.jp/）で作られました。
+dojo_icon:
+permalink: /dojo-jiman/hoge/
+---
+
+## うちのDojoのここがすごいぞ!(1)
+
+　ちょうど初七日の夜のことでした。私は死んだ弟の書斎に入って、何かと彼の書き残したものなどを取出しては、ひとり物思いにふけっていました。
+　まだ、さして夜もふけていないのに、家中は涙にしめって、しんと鎮まり返っています。そこへ持って来て、何だか新派のお芝居めいていますけれど、遠くの方からは、物売りの呼声などが、さも悲しげな調子で響いて来るのです。私は長い間忘れていた、幼い、しみじみした気持になって、ふと、そこにあった弟の日記帳を繰ひろげて見ました。
+　この日記帳を見るにつけても、私は、恐らく恋も知らないでこの世を去った、はたちの弟をあわれに思わないではいられません。
+
+## うちのDojoのここがすごいぞ!(2)
+
+　内気者で、友達も少かった弟は、自然書斎に引こもっている時間が多いのでした。細いペンでこくめいに書かれた日記帳からだけでも、そうした彼の性質は十分うかがうことが出来ます。そこには、人生に対する疑いだとか、信仰に関する煩悶だとか、彼の年頃にはたれでもが経験するところの、いわゆる青春の悩みについて、幼稚ではありますけれど如何にも真摯な文章が書きつづってあるのです。
+
+## うちのDojoのここがすごいぞ!(3)
+
+　私は自分自身の過去の姿を眺めるような心持で、一枚一枚とペイジをはぐって行きました。それらのペイジには到るところに、そこに書かれた文章の奥から、あの弟の鳩のような臆病らしい目が、じっと私の方を見つめているのです。
+　そうして、三月九日のところまで読んで行った時に、感慨に沈んでいた私が、思わず軽い叫声を発した程も、私の目をひいたものがありました。それは、純潔なその日記の文章の中に、始めてポッツリと、はなやかな女の名前が現われたのです。そして「発信欄」と印刷した場所に「北川雪枝きたがわゆきえ（葉書）」と書かれた、その雪枝さんは、私もよく知っている、私達とは遠縁に当る家の、若い美しい娘だったのです。
+å