変数に何が入っているか調べたい

参考

Jekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。 siteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。

---
layout: default
title: Oh! My JK
---
#Welcome to my JK Home Page!

{{ site }}  <!-- ここを追加 -->

これが動かなかったので、変数をDumpする方法を調べた

inspectフィルタ

Inspect
Convert an object into its String representation for debugging.
{{ some_var | inspect }}

とのことで、inspectフィルタで表示されるらしい。

{{ page | inspect }}

実行してみる

{ "content": "## 変数に何が入っているか調べたい\n\n参考\n\n* Jekyllいつやるの?ジキやルの?今でしょ!\n* Templates - Jekyll\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }} &lt;!-- ここを追加 --&gt;\n\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source=’\nJekyllいつやるの?ジキやルの?今でしょ!\n’ | markdownify | remove: ‘<p>’ | remove: ‘</p>’ %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: {{ some_var | inspect }}\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source=’\nTemplates - Jekyll\n’ | markdownify | remove: ‘<p>’ | remove: ‘</p>’ %}\n{% include cite.html text=text source=source %}\n\nとのことで、inspectフィルタで表示されるらしい。\n\n{% raw %}\nliquid\n{{ page | inspect }}\n\n{% endraw %}\n\n実行してみる\n\n> {{ page | inspect }}\n", "output": null, "excerpt": "<h2 id=\"変数に何が入っているか調べたい\">変数に何が入っているか調べたい</h2>\n\n", "previous": { "content": "<h2 id=\"jekyllのヘッダ部分どうしよう\">Jekyllのヘッダ部分どうしよう</h2>\n\n<p>ってなり、bootstrapやらHTML5やらの書き方を色々調べた。</p>\n\n<p>参考:</p>\n\n<ul>\n <li><a href=\"https://web60.co.jp/landing-page.html\">ランディングページとは何か、これで分かる! | Web集客の開花塾</a></li>\n <li><a href=\"http://9-bb.com/?p=8782\">Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」</a></li>\n <li><a href=\"http://mizukazu.minibird.jp/bootstrap-jumbotron/\">Bootstrapを使ってみる。ヘッダー編(Jumbotron)| みずかず</a></li>\n <li><a href=\"http://bootstrap3.cyberlab.info/components/jumbotron.html\">ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス</a></li>\n <li><a href=\"https://v4-alpha.getbootstrap.com/components/jumbotron/\">Jumbotron - Bootstrap</a></li>\n <li><a href=\"http://hateda.hatenadiary.jp/entry/2013/05/09/000124\">HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ</a></li>\n <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n</ul>\n\n<h2 id=\"結果としてこうなった\">結果としてこうなった</h2>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"jumbotron\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Page Title<span class=\"nt\">&lt;/h1&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>subtitle<span class=\"nt\">&lt;/p&gt;</span>\n <span class=\"nt\">&lt;/header&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>description<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<p>こうなった理由は以下。</p>\n\n<h2 id=\"大きなヘッダをきれいに簡単に作りたい\">大きなヘッダをきれいに簡単に作りたい</h2>\n\n<p>ブログのヘッダや最近のWebページのトップみたいに、大きいヘッダを簡単に作ることはできないかと調べた。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>ランディングページ(landing page)とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。</p>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"https://web60.co.jp/landing-page.html\">ランディングページとは何か、これで分かる! | Web集客の開花塾</a>\n</cite></footer>\n</blockquote>\n\n<p>最近はトップページのことをランディングページと言うらしい。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>bootstrap3からはjumbotronっていうのが実装されて、以前はhero-unitと呼ばれてたものが置き換わったようです。\nこのjumbotronっていうのを使うと、簡単にヘッダー部分が出来上がります</p>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://9-bb.com/?p=8782\">Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」</a>\n</cite></footer>\n</blockquote>\n\n<p><strong>jumbotron</strong> というものを使えば大きなスペースを持つヘッダが簡単にできるようだ。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>ソースコード</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"jumbotron\"</span><span class=\"nt\">&gt;</span>\n\t<span class=\"nt\">&lt;h1&gt;</span>ジャンボトロン<span class=\"nt\">&lt;/h1&gt;</span>\n\t<span class=\"nt\">&lt;p&gt;</span>WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。<span class=\"nt\">&lt;/p&gt;</span>\n\t<span class=\"nt\">&lt;p&gt;&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-primary btn-lg\"</span> <span class=\"na\">href=</span><span class=\"s\">\"./jumbotron.html\"</span> <span class=\"na\">role=</span><span class=\"s\">\"button\"</span><span class=\"nt\">&gt;</span>もっと詳しく<span class=\"nt\">&lt;/a&gt;&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://bootstrap3.cyberlab.info/components/jumbotron.html\">ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス</a>\n</cite></footer>\n</blockquote>\n\n<p>なるほど。</p>\n\n<p>サブタイトルはどうやって書こうか。</p>\n\n<blockquote class=\"blockquote\">\n \n<h5 id=\"タイトルとタグラインを-header-要素でグループ化した例\">タイトルとタグラインを header 要素でグループ化した例</h5>\n\n<p>タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。\n(引用元 <a href=\"https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96!\">Wikipedia</a>)</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;h2&gt;</span>ラブライブ! School idol project<span class=\"nt\">&lt;/h2&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>雑誌『電撃G’s magazine』(アスキー・メディアワークス)・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n</code></pre></div></div>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>section\n| + header title\n| | + h1 main title\n| | + p subtitle\n| + <span class=\"o\">[</span>contents]\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://hateda.hatenadiary.jp/entry/2013/05/09/000124\">HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ</a>\n</cite></footer>\n</blockquote>\n\n<p>他にも例はいくつか載っているがこれがいい気がする。</p>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n <h1>Example page header <small>Subtext for header</small></h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Example page header <span class=\"nt\">&lt;small&gt;</span>Subtext for header<span class=\"nt\">&lt;/small&gt;&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n</cite></footer>\n</blockquote>\n\n<p>bootstrapはこうしている。</p>\n\n", "output": "<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <meta name=\"keywords\" content=\"bootstrap,jumbotron,landing page,toppage,header\">\n\n\n <title>bootstrap:ランディングページ(トップページ)のヘッダについて考える</title>\n\n <!– bootstrap and jQuery include –>\n <link rel=\"stylesheet\" href=\"https://leico.github.io/TechnicalNote/css/style.css\">\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\"></script>\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\"></script>\n <!– bootstrap and jQuery include –>\n\n <!– MathJax include –>\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\"></script>\n\n <!– Google Analytics –>\n <script>\n (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){\n (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1new Date();a=s.createElement(o),\n m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n })(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);\n \n ga(‘create’, ‘UA-100782315-1’, ‘auto’);\n ga(‘send’, ‘pageview’);\n </script>\n\n <!– Atom feed –>\n <link type=\"application/atom+xml\" rel=\"alternate\" href=\"https://leico.github.io/TechnicalNote/atom.xml\" title=\"TechnicalNote\" />\n</head>\n\n\n <body>\n <div class=\"container\">\n <div class=\"row\">\n\n\n <div class=\"col-md-8\">\n\n <header class=\"page-header\">\n <h1>bootstrap:ランディングページ(トップページ)のヘッダについて考える</h1>\n <div class=\"row\">\n\n <div class=\"col-6\">\n <dl class=\"dl-horizontal\">\n <dt>created</dt>\n <dd>2017-02-12</dd>\n <dt>last change</dt>\n <dd>2017-08-13 15:41:29 +0000</dd>\n </dl>\n </div>\n\n <div class=\"col-6 text-right\">\n <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>\n </div>\n\n </div>\n </header>\n\n <div class=\"row\">\n\n <div class=\"col-12\">\n <h2 id=\"jekyllのヘッダ部分どうしよう\">Jekyllのヘッダ部分どうしよう</h2>\n\n<p>ってなり、bootstrapやらHTML5やらの書き方を色々調べた。</p>\n\n<p>参考:</p>\n\n<ul>\n <li><a href=\"https://web60.co.jp/landing-page.html\">ランディングページとは何か、これで分かる! | Web集客の開花塾</a></li>\n <li><a href=\"http://9-bb.com/?p=8782\">Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」</a></li>\n <li><a href=\"http://mizukazu.minibird.jp/bootstrap-jumbotron/\">Bootstrapを使ってみる。ヘッダー編(Jumbotron)| みずかず</a></li>\n <li><a href=\"http://bootstrap3.cyberlab.info/components/jumbotron.html\">ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス</a></li>\n <li><a href=\"https://v4-alpha.getbootstrap.com/components/jumbotron/\">Jumbotron - Bootstrap</a></li>\n <li><a href=\"http://hateda.hatenadiary.jp/entry/2013/05/09/000124\">HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ</a></li>\n <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n</ul>\n\n<h2 id=\"結果としてこうなった\">結果としてこうなった</h2>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"jumbotron\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Page Title<span class=\"nt\">&lt;/h1&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>subtitle<span class=\"nt\">&lt;/p&gt;</span>\n <span class=\"nt\">&lt;/header&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>description<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<p>こうなった理由は以下。</p>\n\n<h2 id=\"大きなヘッダをきれいに簡単に作りたい\">大きなヘッダをきれいに簡単に作りたい</h2>\n\n<p>ブログのヘッダや最近のWebページのトップみたいに、大きいヘッダを簡単に作ることはできないかと調べた。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>ランディングページ(landing page)とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。</p>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"https://web60.co.jp/landing-page.html\">ランディングページとは何か、これで分かる! | Web集客の開花塾</a>\n</cite></footer>\n</blockquote>\n\n<p>最近はトップページのことをランディングページと言うらしい。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>bootstrap3からはjumbotronっていうのが実装されて、以前はhero-unitと呼ばれてたものが置き換わったようです。\nこのjumbotronっていうのを使うと、簡単にヘッダー部分が出来上がります</p>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://9-bb.com/?p=8782\">Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」</a>\n</cite></footer>\n</blockquote>\n\n<p><strong>jumbotron</strong> というものを使えば大きなスペースを持つヘッダが簡単にできるようだ。</p>\n\n<blockquote class=\"blockquote\">\n \n<p>ソースコード</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"jumbotron\"</span><span class=\"nt\">&gt;</span>\n\t<span class=\"nt\">&lt;h1&gt;</span>ジャンボトロン<span class=\"nt\">&lt;/h1&gt;</span>\n\t<span class=\"nt\">&lt;p&gt;</span>WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。<span class=\"nt\">&lt;/p&gt;</span>\n\t<span class=\"nt\">&lt;p&gt;&lt;a</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-primary btn-lg\"</span> <span class=\"na\">href=</span><span class=\"s\">\"./jumbotron.html\"</span> <span class=\"na\">role=</span><span class=\"s\">\"button\"</span><span class=\"nt\">&gt;</span>もっと詳しく<span class=\"nt\">&lt;/a&gt;&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://bootstrap3.cyberlab.info/components/jumbotron.html\">ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス</a>\n</cite></footer>\n</blockquote>\n\n<p>なるほど。</p>\n\n<p>サブタイトルはどうやって書こうか。</p>\n\n<blockquote class=\"blockquote\">\n \n<h5 id=\"タイトルとタグラインを-header-要素でグループ化した例\">タイトルとタグラインを header 要素でグループ化した例</h5>\n\n<p>タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。\n(引用元 <a href=\"https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96!\">Wikipedia</a>)</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;h2&gt;</span>ラブライブ! School idol project<span class=\"nt\">&lt;/h2&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>雑誌『電撃G’s magazine』(アスキー・メディアワークス)・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n</code></pre></div></div>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>section\n| + header title\n| | + h1 main title\n| | + p subtitle\n| + <span class=\"o\">[</span>contents]\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://hateda.hatenadiary.jp/entry/2013/05/09/000124\">HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ</a>\n</cite></footer>\n</blockquote>\n\n<p>他にも例はいくつか載っているがこれがいい気がする。</p>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n <h1>Example page header <small>Subtext for header</small>\n</h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Example page header <span class=\"nt\">&lt;small&gt;</span>Subtext for header<span class=\"nt\">&lt;/small&gt;&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n</cite></footer>\n</blockquote>\n\n<p>bootstrapはこうしている。</p>\n\n\n </div>\n\n <div class=\"col-12\">\n <hr>\n <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>\n </div>\n\n </div>\n\n </div>\n \n <div class=\"col-md-4\">\n <h2>\n <a href=\"https://leico.github.io/TechnicalNote/\">\n Technical Note\n </a>\n </h2>\n\n \n\n \n\n <h3>\n <a href=\"https://leico.github.io/TechnicalNote/Bootstrap\">bootstrap Top</a>\n </h3>\n\n \n <h3>Tips</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Bootstrap/sass-customize\">Bootstrap sassをカスタマイズする</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Bootstrap/bootstrap-landing-page-header\">bootstrap:ランディングページ(トップページ)のヘッダについて考える</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Bootstrap/panel-collapse\">Panelを使ったCollapseやAccordionメニュー</a>\n </li>\n\n \n </ul>\n \n <h3>関連記事</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/cite-include\">Jekyll &amp; Bootstrapで引用の書きかた</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\">Github Pagesにbootstrap sassをインストールする</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\">Github Pagesにsubmoduleとしてbootstrapを入れる</a>\n </li>\n\n \n </ul>\n \n </div>\n \n\n</div>\n\n </div>\n <footer class=\"container\">\n <hr>\n <div class=\"row\">\n <div class=\"col\">\n <p class=\"text-right\">\n <a href=\"https://leico.github.io/TechnicalNote/atom.xml\">Atom</a>\n </p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-8\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <figure class=\"figure\">\n <img src=\"https://leico.github.io/TechnicalNote/image/logo.png\" class=\"figure-img rounded\" width=\"200px\" height=\"auto\" alt=\"\">\n </figure>\n </div>\n <div class=\"col-md-4\">\n <h5>contact</h5>\n <ul class=\"list-unstyled\">\n <li> <a href=\"https://github.com/leico\" class=\"user-mention\">@leico</a> </li>\n <li> <a href=\"https://www.twitter.com/1_0101\">twitter</a>\n</li>\n <li> <a href=\"https://leico.github.io\">web</a>\n </li>\n</ul>\n </div>\n </div>\n </div>\n <div class=\"col-md-4\">\n <h5>Merchandise/Schwags</h5>\n <p><small class=\"text-muted\">支援してくれるとうれしい</small></p>\n <iframe frameborder=\"0\" height=\"220\" width=\"160\" src=\"https://leico.official.ec/items/6694858/widget/small\"></iframe>\n </div>\n </div>\n <p class=\"text-right\">\n <small class=\"text-muted\">© 2017 leico.</small>\n </p>\n\n</footer>\n\n </body>\n</html>\n", "excerpt": "<h2 id=\"jekyllのヘッダ部分どうしよう\">Jekyllのヘッダ部分どうしよう</h2>\n\n", "previous": { "content": "<h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n<p>post用のレイアウトを作ってなかったがさすがにみづらいので仮で作った。</p>\n\n<p>参考:</p>\n\n<ul>\n <li><a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの?ジキやルの?今でしょ!</a></li>\n <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n <li><a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a></li>\n <li><a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a></li>\n</ul>\n\n<p>結果として今はこんな感じ</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>—\nlayout : default\n—\n\n<span class=\"nt\">&lt;header</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>{{page.title}}<span class=\"nt\">&lt;/h1&gt;</span>\n <span class=\"nt\">&lt;dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>created<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>{{page.date | date : \"%F\"}}<span class=\"nt\">&lt;/dd&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>last change<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>{{page.lastchange}}<span class=\"nt\">&lt;/dd&gt;</span>\n <span class=\"nt\">&lt;/dl&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n\n<span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"row\"</span><span class=\"nt\">&gt;</span>\n {{ content }}\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<p>過程は以下</p>\n\n<h2 id=\"jekyllでpost用のレイアウトを作る\">Jekyllでpost用のレイアウトを作る</h2>\n\n<blockquote class=\"blockquote\">\n \n<h3 id=\"postのレイアウト\">Postのレイアウト</h3>\n\n<p>次に記事にも専用のレイアウトを用意します。_layoutsディレクトリ以下に<code class=\"highlighter-rouge\">post.html</code>を作って、次のような内容にします。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>% touch _layouts/post.html\n</code></pre></div></div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>—\nlayout: default\n—\n<span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;div&gt;</span>{{ page.date | date_to_string }}<span class=\"nt\">&lt;/div&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>{{ page.title }}<span class=\"nt\">&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n\n<span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">‘main’</span><span class=\"nt\">&gt;</span>\n {{ content }}\n<span class=\"nt\">&lt;/div&gt;</span>\n\n<span class=\"nt\">&lt;footer&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>- rendered with post template -<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/footer&gt;</span>\n</code></pre></div></div>\n\n<p>Front-Matterでdefault.htmlを読み込むようにします。これによりpost.htmlはdefault.htmlのサブテンプレートになります。header部分に投稿日とタイトルを表示するようLiquidで指定します。</p>\n\n<p>なお、<code class=\"highlighter-rouge\">{{ page.date | date_to_string }}</code>はJekyllで拡張されたLiquidのフィルターという機能を使って、\n出力の整形を行なっています(<a href=\"http://jekyllrb.com/docs/templates/\">Templates</a>)。\ndefault.htmlと同様に、このテンプレートが読み込まれたことを見るために <strong>rendered with post template</strong> を追加しておきます。</p>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの?ジキやルの?今でしょ!</a>\n</cite></footer>\n</blockquote>\n\n<p>これを参考にbootstrap風味にする。</p>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n <h1>Example page header <small>Subtext for header</small></h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Example page header <span class=\"nt\">&lt;small&gt;</span>Subtext for header<span class=\"nt\">&lt;/small&gt;&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n</cite></footer>\n</blockquote>\n\n<p><strong>page-header</strong> クラスがあるので利用する。</p>\n\n<p>他に作成日時と、変更日時を独自に仕込んでいるので入れたい。</p>\n\n<blockquote class=\"blockquote\">\n \n<h4 id=\"horizontal-description\">Horizontal description</h4>\n\n<p>Make terms and descriptions in <code class=\"highlighter-rouge\">&lt;dl&gt;</code> line up side-by-side.\nStarts off stacked like default <code class=\"highlighter-rouge\">&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>\n\n<dl class=\"dl-horizontal\">\n <dt>Description lists</dt>\n <dd>A description list is perfect for defining terms.</dd>\n <dt>Euismod</dt>\n <dd>\n Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.\n Donec id elit non mi porta gravida at eget metus.\n </dd>\n <dt>Malesuada porta</dt>\n <dd>Etiam porta sem malesuada magna mollis euismod.</dd>\n <dt>Felis euismod semper eget lacinia</dt>\n <dd>\n Fusce dapibus, tellus ac cursus commodo,\n tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n </dd>\n</dl>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>…<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>…<span class=\"nt\">&lt;/dd&gt;</span>\n<span class=\"nt\">&lt;/dl&gt;</span>\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a>\n</cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"date\">date</h1>\n\n<p>Converts a timestamp into another date format.\nThe format for this syntax is the same as <a href=\"http://strftime.net/\">strftime</a>.</p>\n\n<h3 id=\"input\">Input</h3>\n\n<div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>{{ article.published_at | date: \"%a, %b %d, %y\" }}\n</code></pre></div></div>\n\n<h3 id=\"output\">Output</h3>\n\n<div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Fri, Jul 17, 15\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a>\n</cite></footer>\n</blockquote>\n\n<p>定義リストとこの書式制御を利用することにした。</p>\n", "output": "<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \n <meta name=\"keywords\" content=\"bootstrap,jekyll\">\n\n\n <title>Jekyll:postsのレイアウトについて考える</title>\n\n <!– bootstrap and jQuery include –>\n <link rel=\"stylesheet\" href=\"https://leico.github.io/TechnicalNote/css/style.css\">\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\"></script>\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\"></script>\n <!– bootstrap and jQuery include –>\n\n <!– MathJax include –>\n <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\"></script>\n\n <!– Google Analytics –>\n <script>\n (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){\n (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1new Date();a=s.createElement(o),\n m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n })(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);\n \n ga(‘create’, ‘UA-100782315-1’, ‘auto’);\n ga(‘send’, ‘pageview’);\n </script>\n\n <!– Atom feed –>\n <link type=\"application/atom+xml\" rel=\"alternate\" href=\"https://leico.github.io/TechnicalNote/atom.xml\" title=\"TechnicalNote\" />\n</head>\n\n\n <body>\n <div class=\"container\">\n <div class=\"row\">\n\n\n <div class=\"col-md-8\">\n\n <header class=\"page-header\">\n <h1>Jekyll:postsのレイアウトについて考える</h1>\n <div class=\"row\">\n\n <div class=\"col-6\">\n <dl class=\"dl-horizontal\">\n <dt>created</dt>\n <dd>2017-02-03</dd>\n <dt>last change</dt>\n <dd>2017-06-16 23:05:15 +0000</dd>\n </dl>\n </div>\n\n <div class=\"col-6 text-right\">\n <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>\n </div>\n\n </div>\n </header>\n\n <div class=\"row\">\n\n <div class=\"col-12\">\n <h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n<p>post用のレイアウトを作ってなかったがさすがにみづらいので仮で作った。</p>\n\n<p>参考:</p>\n\n<ul>\n <li><a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの?ジキやルの?今でしょ!</a></li>\n <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n <li><a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a></li>\n <li><a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a></li>\n</ul>\n\n<p>結果として今はこんな感じ</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>—\nlayout : default\n—\n\n<span class=\"nt\">&lt;header</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>{{page.title}}<span class=\"nt\">&lt;/h1&gt;</span>\n <span class=\"nt\">&lt;dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>created<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>{{page.date | date : \"%F\"}}<span class=\"nt\">&lt;/dd&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>last change<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>{{page.lastchange}}<span class=\"nt\">&lt;/dd&gt;</span>\n <span class=\"nt\">&lt;/dl&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n\n<span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"row\"</span><span class=\"nt\">&gt;</span>\n {{ content }}\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n<p>過程は以下</p>\n\n<h2 id=\"jekyllでpost用のレイアウトを作る\">Jekyllでpost用のレイアウトを作る</h2>\n\n<blockquote class=\"blockquote\">\n \n<h3 id=\"postのレイアウト\">Postのレイアウト</h3>\n\n<p>次に記事にも専用のレイアウトを用意します。_layoutsディレクトリ以下に<code class=\"highlighter-rouge\">post.html</code>を作って、次のような内容にします。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>% touch _layouts/post.html\n</code></pre></div></div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>—\nlayout: default\n—\n<span class=\"nt\">&lt;header&gt;</span>\n <span class=\"nt\">&lt;div&gt;</span>{{ page.date | date_to_string }}<span class=\"nt\">&lt;/div&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>{{ page.title }}<span class=\"nt\">&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/header&gt;</span>\n\n<span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">‘main’</span><span class=\"nt\">&gt;</span>\n {{ content }}\n<span class=\"nt\">&lt;/div&gt;</span>\n\n<span class=\"nt\">&lt;footer&gt;</span>\n <span class=\"nt\">&lt;p&gt;</span>- rendered with post template -<span class=\"nt\">&lt;/p&gt;</span>\n<span class=\"nt\">&lt;/footer&gt;</span>\n</code></pre></div></div>\n\n<p>Front-Matterでdefault.htmlを読み込むようにします。これによりpost.htmlはdefault.htmlのサブテンプレートになります。header部分に投稿日とタイトルを表示するようLiquidで指定します。</p>\n\n<p>なお、<code class=\"highlighter-rouge\">{{ page.date | date_to_string }}</code>はJekyllで拡張されたLiquidのフィルターという機能を使って、\n出力の整形を行なっています(<a href=\"http://jekyllrb.com/docs/templates/\">Templates</a>)。\ndefault.htmlと同様に、このテンプレートが読み込まれたことを見るために <strong>rendered with post template</strong> を追加しておきます。</p>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの?ジキやルの?今でしょ!</a>\n</cite></footer>\n</blockquote>\n\n<p>これを参考にbootstrap風味にする。</p>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n <h1>Example page header <small>Subtext for header</small>\n</h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;h1&gt;</span>Example page header <span class=\"nt\">&lt;small&gt;</span>Subtext for header<span class=\"nt\">&lt;/small&gt;&lt;/h1&gt;</span>\n<span class=\"nt\">&lt;/div&gt;</span>\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n</cite></footer>\n</blockquote>\n\n<p><strong>page-header</strong> クラスがあるので利用する。</p>\n\n<p>他に作成日時と、変更日時を独自に仕込んでいるので入れたい。</p>\n\n<blockquote class=\"blockquote\">\n \n<h4 id=\"horizontal-description\">Horizontal description</h4>\n\n<p>Make terms and descriptions in <code class=\"highlighter-rouge\">&lt;dl&gt;</code> line up side-by-side.\nStarts off stacked like default <code class=\"highlighter-rouge\">&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>\n\n<dl class=\"dl-horizontal\">\n <dt>Description lists</dt>\n <dd>A description list is perfect for defining terms.</dd>\n <dt>Euismod</dt>\n <dd>\n Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.\n Donec id elit non mi porta gravida at eget metus.\n </dd>\n <dt>Malesuada porta</dt>\n <dd>Etiam porta sem malesuada magna mollis euismod.</dd>\n <dt>Felis euismod semper eget lacinia</dt>\n <dd>\n Fusce dapibus, tellus ac cursus commodo,\n tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n </dd>\n</dl>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">&lt;dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">&gt;</span>\n <span class=\"nt\">&lt;dt&gt;</span>…<span class=\"nt\">&lt;/dt&gt;</span>\n <span class=\"nt\">&lt;dd&gt;</span>…<span class=\"nt\">&lt;/dd&gt;</span>\n<span class=\"nt\">&lt;/dl&gt;</span>\n</code></pre></div></div>\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a>\n</cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n \n<h1 id=\"date\">date</h1>\n\n<p>Converts a timestamp into another date format.\nThe format for this syntax is the same as <a href=\"http://strftime.net/\">strftime</a>.</p>\n\n<h3 id=\"input\">Input</h3>\n\n<div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>{{ article.published_at | date: \"%a, %b %d, %y\" }}\n</code></pre></div></div>\n\n<h3 id=\"output\">Output</h3>\n\n<div class=\"highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Fri, Jul 17, 15\n</code></pre></div></div>\n\n\n <footer class=\"blockquote-footer\"><cite>\n<a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a>\n</cite></footer>\n</blockquote>\n\n<p>定義リストとこの書式制御を利用することにした。</p>\n\n </div>\n\n <div class=\"col-12\">\n <hr>\n <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>\n </div>\n\n </div>\n\n </div>\n \n <div class=\"col-md-4\">\n <h2>\n <a href=\"https://leico.github.io/TechnicalNote/\">\n Technical Note\n </a>\n </h2>\n\n \n\n \n\n <h3>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll\">github pages &amp; Jekyll Top</a>\n </h3>\n\n \n <h3>github pagesの管理</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/update-github-page\">github-pages環境のアップデート</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/fix-3.4.3\">github-pages jekyll 3.4.3不具合の対処法</a>\n </li>\n\n \n </ul>\n \n <h3>Jekyllの導入</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-homebrew\">rbenvをHomebrewからインストールする</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/Ruby-research\">Ruby開発環境についての調査</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-install\">rbenvをアプリケーションフォルダにインストールする</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-usage\">rbenvコマンドの利用方法</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/bundle-usage\">bundlerの利用方法</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-usage\">jekyllの利用方法</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-debug\">Github Pagesのデバッグ環境を整える</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-generator\">Github Pages Gemを、複数のプロジェクトからエイリアスで参照する</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/worth-bundle-install\">gemを間違えてグローバルにインストールしてしまった場合</a>\n </li>\n\n \n </ul>\n \n <h3>Install frameworks</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\">Github Pagesにsubmoduleとしてbootstrapを入れる</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/mathjax-install\">MathJaxをインストールする</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\">Github Pagesにbootstrap sassをインストールする</a>\n </li>\n\n \n </ul>\n \n <h3>Jekyll variables</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/collection-variable\">Collection変数を調査する</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/site-variables\">site変数の内容調査</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/display-value\">変数の中身をページに表示する</a>\n </li>\n\n \n </ul>\n \n <h3>Tips</h3>\n <ul>\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-syntaxhighlight\">Jekyllのシンタックスハイライトのテーマを作って変更する</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/cite-include\">Jekyll &amp; Bootstrapで引用の書きかた</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-atom\">Collectiosの変更に追従するAtomフィードを設置する</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/liquid-raw\">liquidのソースコードを表示する</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/page-menu\">ページメニューの作り方</a>\n </li>\n\n \n\n \n\n \n \n\n <li>\n <a href=\"https://leico.github.io/TechnicalNote/Jekyll/post-layout\">Jekyll:postsのレイアウトについて考える</a>\n </li>\n\n \n </ul>\n \n </div>\n \n\n</div>\n\n </div>\n <footer class=\"container\">\n <hr>\n <div class=\"row\">\n <div class=\"col\">\n <p class=\"text-right\">\n <a href=\"https://leico.github.io/TechnicalNote/atom.xml\">Atom</a>\n </p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-8\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <figure class=\"figure\">\n <img src=\"https://leico.github.io/TechnicalNote/image/logo.png\" class=\"figure-img rounded\" width=\"200px\" height=\"auto\" alt=\"\">\n </figure>\n </div>\n <div class=\"col-md-4\">\n <h5>contact</h5>\n <ul class=\"list-unstyled\">\n <li> <a href=\"https://github.com/leico\" class=\"user-mention\">@leico</a> </li>\n <li> <a href=\"https://www.twitter.com/1_0101\">twitter</a>\n</li>\n <li> <a href=\"https://leico.github.io\">web</a>\n </li>\n</ul>\n </div>\n </div>\n </div>\n <div class=\"col-md-4\">\n <h5>Merchandise/Schwags</h5>\n <p><small class=\"text-muted\">支援してくれるとうれしい</small></p>\n <iframe frameborder=\"0\" height=\"220\" width=\"160\" src=\"https://leico.official.ec/items/6694858/widget/small\"></iframe>\n </div>\n </div>\n <p class=\"text-right\">\n <small class=\"text-muted\">© 2017 leico.</small>\n </p>\n\n</footer>\n\n </body>\n</html>\n", "excerpt": "<h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n", "previous": { "id": "/RaspberryPi/RaspberryPi-Recover", "url": "/RaspberryPi/RaspberryPi-Recover", "relative_path": "_docs/RaspberryPi/RaspberryPi-Recover.md", "path": "_docs/RaspberryPi/RaspberryPi-Recover.md", "collection": "docs", "draft": false, "categories": [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;Raspberry Pi:VirtualBoxを使って死んだSDカードからリカバリー&quot;,
    &quot;date&quot;: &quot;2017-02-02 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-17 01:19:04 +0000&quot;,
    &quot;tags&quot;: [
      &quot;Raspberry Pi&quot;,
      &quot;VirtualBox&quot;,
      &quot;debian&quot;,
      &quot;gparted&quot;
    ],
    &quot;slug&quot;: &quot;RaspberryPi-Recover&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;id&quot;: &quot;/Jekyll/post-layout&quot;,
  &quot;url&quot;: &quot;/Jekyll/post-layout&quot;,
  &quot;relative_path&quot;: &quot;_docs/Jekyll/post-layout.md&quot;,
  &quot;next&quot;: {
    &quot;id&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;url&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;bootstrap:ランディングページ(トップページ)のヘッダについて考える&quot;,
    &quot;date&quot;: &quot;2017-02-12 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-08-13 15:41:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;bootstrap&quot;,
      &quot;jumbotron&quot;,
      &quot;landing page&quot;,
      &quot;toppage&quot;,
      &quot;header&quot;
    ],
    &quot;slug&quot;: &quot;bootstrap-landing-page-header&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/post-layout.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;Jekyll:postsのレイアウトについて考える&quot;,
  &quot;date&quot;: &quot;2017-02-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-16 23:05:15 +0000&quot;,
  &quot;tags&quot;: [
    &quot;bootstrap&quot;,
    &quot;jekyll&quot;
  ],
  &quot;slug&quot;: &quot;post-layout&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;id&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
&quot;url&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
&quot;relative_path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
&quot;next&quot;: {
  &quot;content&quot;: &quot;## 変数に何が入っているか調べたい\n\n参考\n\n* [Jekyllいつやるの?ジキやルの?今でしょ!](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n* [Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n```\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }}  &lt;!-- ここを追加 --&gt;\n```\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllいつやるの?ジキやルの?今でしょ!](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: `{{ some_var | inspect }}`\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\nとのことで、`inspect`フィルタで表示されるらしい。\n\n{% raw %}\n```liquid\n{{ page | inspect }}\n```\n{% endraw %}\n\n実行してみる\n\n&gt; {{ page | inspect }}\n&quot;,
  &quot;output&quot;: null,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;変数に何が入っているか調べたい\&quot;&gt;変数に何が入っているか調べたい&lt;/h2&gt;\n\n&quot;,
  &quot;previous&quot;: {
    &quot;id&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;url&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;bootstrap:ランディングページ(トップページ)のヘッダについて考える&quot;,
    &quot;date&quot;: &quot;2017-02-12 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-08-13 15:41:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;bootstrap&quot;,
      &quot;jumbotron&quot;,
      &quot;landing page&quot;,
      &quot;toppage&quot;,
      &quot;header&quot;
    ],
    &quot;slug&quot;: &quot;bootstrap-landing-page-header&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;id&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;url&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;next&quot;: {
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
    &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;liquid-raw&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;変数の中身をページに表示する&quot;,
  &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-15 21:23:57 +0000&quot;,
  &quot;tags&quot;: [
    &quot;jekyll&quot;,
    &quot;liquid&quot;,
    &quot;github&quot;,
    &quot;pages&quot;
  ],
  &quot;slug&quot;: &quot;display-value&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
&quot;collection&quot;: &quot;docs&quot;,
&quot;draft&quot;: false,
&quot;categories&quot;: [

],
&quot;layout&quot;: &quot;post&quot;,
&quot;title&quot;: &quot;bootstrap:ランディングページ(トップページ)のヘッダについて考える&quot;,
&quot;date&quot;: &quot;2017-02-12 00:00:00 +0900&quot;,
&quot;lastchange&quot;: &quot;2017-08-13 15:41:29 +0000&quot;,
&quot;tags&quot;: [
  &quot;bootstrap&quot;,
  &quot;jumbotron&quot;,
  &quot;landing page&quot;,
  &quot;toppage&quot;,
  &quot;header&quot;
],
&quot;slug&quot;: &quot;bootstrap-landing-page-header&quot;,
&quot;ext&quot;: &quot;.md&quot;   },   &quot;id&quot;: &quot;/Jekyll/display-value&quot;,   &quot;url&quot;: &quot;/Jekyll/display-value&quot;,   &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,   &quot;next&quot;: {
&quot;content&quot;: &quot;## liquidのソースがJekyllでコンパイルされ、表示されない\n\nliquidのソースコードを載っけようとしたところ、\nJekyllでコンパイルする際に展開されてしまい、\n表示されず、意図しないものが出力されてしまう。\n\n参考\n\n* [How to escape liquid template tags? - Stack Overflow](http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags)\n\n## liquidのソースコードをエスケープする方法\n\n{% capture text %}\nit is possible to disable liquid processing engine using the raw tag:\n\n```liquid\n{{ \&quot;{% raw \&quot; }} %}\n{% raw %}\n{% this %}\n{% endraw %}\n{{ \&quot;{% endraw \&quot; }} %}\n```\n\nwill display \n{% raw %}\n```liquid\n{% this %}\n```\n{% endraw %} \nby [Etienne](http://stackoverflow.com/users/406458/etienne)\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[How to escape liquid template tags? - Stack Overflow](http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\n\nということで`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`で挟んだ間は展開されない。\n\n## `{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`をエスケープする\n\nだがしかし、`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`を表示させることはこれではできない。\nそこで、上記の文はこのようになっている。\n\n{% raw %}\n```liquid\nということで`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`で挟んだ間は展開されない。\n```\n{% endraw  %}\n&quot;,
&quot;output&quot;: null,
&quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;liquidのソースがjekyllでコンパイルされ表示されない\&quot;&gt;liquidのソースがJekyllでコンパイルされ、表示されない&lt;/h2&gt;\n\n&quot;,
&quot;previous&quot;: {
  &quot;content&quot;: &quot;## 変数に何が入っているか調べたい\n\n参考\n\n* [Jekyllいつやるの?ジキやルの?今でしょ!](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n* [Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n```\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }}  &lt;!-- ここを追加 --&gt;\n```\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllいつやるの?ジキやルの?今でしょ!](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: `{{ some_var | inspect }}`\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\nとのことで、`inspect`フィルタで表示されるらしい。\n\n{% raw %}\n```liquid\n{{ page | inspect }}\n```\n{% endraw %}\n\n実行してみる\n\n&gt; {{ page | inspect }}\n&quot;,
  &quot;output&quot;: null,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;変数に何が入っているか調べたい\&quot;&gt;変数に何が入っているか調べたい&lt;/h2&gt;\n\n&quot;,
  &quot;previous&quot;: {
    &quot;id&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;url&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;bootstrap:ランディングページ(トップページ)のヘッダについて考える&quot;,
    &quot;date&quot;: &quot;2017-02-12 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-08-13 15:41:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;bootstrap&quot;,
      &quot;jumbotron&quot;,
      &quot;landing page&quot;,
      &quot;toppage&quot;,
      &quot;header&quot;
    ],
    &quot;slug&quot;: &quot;bootstrap-landing-page-header&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;id&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;url&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;next&quot;: {
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
    &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;liquid-raw&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;変数の中身をページに表示する&quot;,
  &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-15 21:23:57 +0000&quot;,
  &quot;tags&quot;: [
    &quot;jekyll&quot;,
    &quot;liquid&quot;,
    &quot;github&quot;,
    &quot;pages&quot;
  ],
  &quot;slug&quot;: &quot;display-value&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
&quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
&quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
&quot;next&quot;: {
  &quot;content&quot;: &quot;## `site.*`内の変数についての調査\n\nJekyllの変数に格納されているものがよくわからないので調べた。\n\n参考\n\n* [Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n* [Jekyllで簡易タグ一覧ページを作る(2013年12月8日追記)](http://genjiapp.com/blog/2013/11/21/simple-tags-page-for-jekyll.html)\n\n## `site.posts`変数の中身\n\n\n{% capture text %}\n`site.posts`\n: A reverse chronological list of all Posts.\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nということなので、**\\_post** 以下のものが日付が新しい順に表示されるはずだ。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for post in site.posts %}\n  &lt;li&gt;\n    {{post.date | date: \&quot;%F\&quot; }}:&lt;a href=\&quot;{{site.github.url}}{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;\n  &lt;/li&gt;\n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\nこれを実行してみる。\n\n&gt; \n&gt; &lt;ul&gt;\n&gt;   {% for post in site.posts %}\n&gt;   &lt;li&gt;\n&gt;     {{post.date | date: \&quot;%F\&quot; }}:&lt;a href=\&quot;{{site.github.url}}{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;\n&gt;   &lt;/li&gt;\n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\n&gt;\n\n## `site.pages`変数の中身\n\n{% capture text %}\n`site.pages`\n: A list of all Pages. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n全てのページが出力されるらしい。先程と同じようなコードを実行してみる。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for page in site.pages %}\n  &lt;li&gt;\n    {{ page.url }}\n  &lt;/li&gt;\n  \n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; &lt;ul&gt;\n&gt;   {% for page in site.pages %}\n&gt;   &lt;li&gt;\n&gt;     {{ page.url }}\n&gt;   &lt;/li&gt;\n&gt;   \n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\n\ncssやxmlなど、必要そうな不要そうなものまで出力される。\n\n## `site.html_pages`変数の中身\n\n\n{% capture text %}\n`site.html_pages`\n: A subset of `site.pages` listing those which end in `.html`. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nどうやら同じような考えだったらしく、**html** だけ格納されている変数があった。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for page in site.html_pages %}\n  &lt;li&gt;\n    {{page.date | date: \&quot;%F\&quot;}}:&lt;a href=\&quot;{{site.github.url}}{{ page.url }}\&quot;&gt;{{ page.title }}&lt;/a&gt;\n  &lt;/li&gt;\n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; &lt;ul&gt;\n&gt;   {% for page in site.html_pages %}\n&gt;   &lt;li&gt;\n&gt;     {{page.date | date: \&quot;%F\&quot;}}:&lt;a href=\&quot;{{site.github.url}}{{ page.url }}\&quot;&gt;{{ page.title }}&lt;/a&gt;\n&gt;   &lt;/li&gt;\n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\n\nトップページまで出力されるのか・・・。\n\n\n\n## 記事のタグ一覧と、タグ付けされているページの一覧を取得する。\n\n{% capture text %}\n`site.tags.TAG`\n: The list of all Posts with tag TAG. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n{% capture text %}\n\n{% raw %}\n```liquid\n{% for tag in site.tags %}\n&lt;article&gt;\n  &lt;h1 id=\&quot;tag_{{ tag[0] }}\&quot;&gt;{{ tag[0] }}&lt;/h1&gt;\n  &lt;ul&gt;\n    {% for post in tag[1] %}\n    &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n&lt;/article&gt;\n{% endfor %}\n```\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllで簡易タグ一覧ページを作る(2013年12月8日追記)](http://genjiapp.com/blog/2013/11/21/simple-tags-page-for-jekyll.html)\n' | markdownify | remove: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n上記ソースでは`tag[0]`がタグ名、`tag[1]`がタグを含むページの配列になっているらしい。\n少し変更して実行してみる。\n\n{% raw %}\n```liquid\n{% for tag in site.tags %}\n&lt;article&gt;\n  &lt;h3&gt;{{ tag[0] }}&lt;/h3&gt;\n  &lt;ul&gt;\n    {% for post in tag[1] %}\n    &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n&lt;/article&gt;\n{% endfor %}\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; {% for tag in site.tags %}\n&gt; &lt;article&gt;\n&gt;   &lt;h3&gt;{{ tag[0] }}&lt;/h3&gt;\n&gt;   &lt;ul&gt;\n&gt;     {% for post in tag[1] %}\n&gt;     &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n&gt;     {% endfor %}\n&gt;   &lt;/ul&gt;\n&gt; &lt;/article&gt;\n&gt; {% endfor %}\n\n**{{ page.lastchange }} 現在、固定ページのタグは取得できない** ことがわかった。\n\n&quot;,
  &quot;output&quot;: null,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;site内の変数についての調査\&quot;&gt;&lt;code class=\&quot;highlighter-rouge\&quot;&gt;site.*&lt;/code&gt;内の変数についての調査&lt;/h2&gt;\n\n&quot;,
  &quot;previous&quot;: {
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
    &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;liquid-raw&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;id&quot;: &quot;/Jekyll/site-variables&quot;,
  &quot;url&quot;: &quot;/Jekyll/site-variables&quot;,
  &quot;relative_path&quot;: &quot;_docs/Jekyll/site-variables.md&quot;,
  &quot;next&quot;: {
    &quot;id&quot;: &quot;/Jekyll/page-menu&quot;,
    &quot;url&quot;: &quot;/Jekyll/page-menu&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/page-menu.md&quot;,
    &quot;path&quot;: &quot;_docs/Jekyll/page-menu.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;ページメニューの作り方&quot;,
    &quot;date&quot;: &quot;2017-03-04 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-16 22:55:31 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;page-menu&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/site-variables.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;site変数の内容調査&quot;,
  &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-16 23:13:15 +0000&quot;,
  &quot;tags&quot;: [
    &quot;jekyll&quot;,
    &quot;liquid&quot;,
    &quot;github&quot;,
    &quot;pages&quot;
  ],
  &quot;slug&quot;: &quot;site-variables&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
&quot;collection&quot;: &quot;docs&quot;,
&quot;draft&quot;: false,
&quot;categories&quot;: [

],
&quot;layout&quot;: &quot;post&quot;,
&quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
&quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
&quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
&quot;tags&quot;: [
  &quot;jekyll&quot;,
  &quot;liquid&quot;,
  &quot;github&quot;,
  &quot;pages&quot;
],
&quot;slug&quot;: &quot;liquid-raw&quot;,
&quot;ext&quot;: &quot;.md&quot;   },   &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,   &quot;collection&quot;: &quot;docs&quot;,   &quot;draft&quot;: false,   &quot;categories&quot;: [

], "layout": "post", "title": "変数の中身をページに表示する", "date": "2017-03-03 00:00:00 +0900", "lastchange": "2017-06-15 21:23:57 +0000", "tags": [ "jekyll", "liquid", "github", "pages" ], "slug": "display-value", "ext": ".md" }