Post を書く

Jekyll の最高の側面の一つは、それが “Blog のようである” ということです。 これはまさに何を意味するのでしょうか? まあ、簡単に言えば、それはブログは Jekyll の機能に焼成されることを意味しています。 もし、Post を書き、そしてそれらをオンラインで公開する場合、 これはあなたがブログの公開と維持をコンピュータ上のテキストファイルで フォルダ管理をすることによって単純にできることを意味します。 データベースの設定と管理の手間や Web ベースの CMS システムと比較して、 これは喜ばしい変化になります!

Post のフォルダ

ディレクトリ構成 ページで説明した通り、 _posts フォルダはあなたのブログの Post がある場所です。 これらのファイルは MarkdownTextile フォーマットのテキストファイルの どちらでも書くことができ、そしてそれらが YAML front-matter を持っている限り、 これらのソースフォーマットから静的サイトの一部として HTML ページに変換されます。

Post ファイルを作成する

新しい Post を作成するために、あなたが行う必要があることは、 _posts ディレクトリに新しいファイルを作成することです。 このフォルダ内のファイルにどのように名前をつけるかが重要になります。 Jekyll は以下のようなフォーマットによって命名されたブログの Post ファイルが必要です:

YEAR-MONTH-DAY-title.MARKUP

YEAR は 4 桁の数字、 MONTHDAY は両方とも 2 桁の数字、 そして MARKUP はファイルで使用されるフォーマットを表すファイル拡張子です。 例えば、以下は有効な Post のファイル名の例になります:

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.textile
ProTip™: 別のポストへのリンク

post_url タグを使って 別のポストにリンクをすることにより、サイトのパーマリンクの変更時のURL変更を 気にしなくて済みます。

コンテンツのフォーマット

すべてのブログ Post は YAML front-matter ではじまるべきです。 後は、あなたが好むフォーマットを決定するだけです。 Jekyll は 2 つの人気のあるマークアップフォーマットをサポートしています: MarkdownTextile です。 これらのフォーマットはそれぞれ Post のコンテンツの異なるタイプをマークアップする独自の方法を持っているため、 あなたは自分のニーズにもっとも適したものを決定し、それらのフォーマットに慣れるべきです。

文字セットに注意してください

コンテンツプロセッサは、それらをよりよく見せるために、 特定の文字を変更することができます。 例えば、 Redcarpet 内の smart 拡張子は ASCII のクォーテーション文字を Unicode のものに通常変換します。 ブラウザにそれらの文字を適切に表示するためには、 layout ファイルの <head> 内に <meta charset="utf-8"> を含むことによって 文字セットのメタ値を定義します。

画像やリソースを含める

あなたが画像、ダウンロードや他のデジタル資産を テキストのコンテンツに沿って含めるチャンスです。 これらのリソースにリンクするための構文は Markdown と Textile の間で異なり、 あなたのサイトにこれらのファイルを格納することの動作の問題は誰もが直面するものです。

なぜなら Jekyll の柔軟性は、これらを行うための方法に たくさんのソリューションがあるからです。 一つの一般的なソリューションは、任意の画像、 ダウンロードや他のリソースを配置した assetsdownloads のように 呼ばれるディレクトリをプロジェクトのルートに作成することです。 その後、任意の Post の中からそれらは資産を含めたパスとして サイトのルートを使用してリンクすることができます。 繰り返しますが、これはあなたのサイトの(サブ)ドメインとパスの設定方法に依存しますが、 ここであなたが Post の site.url 変数を使用してこれを行う方法の いくつかの(Markdown での)例を示します。

Post 内に画像資産を含めます:

… 以下にスクリーンショットが表示されます:
![私の有用なスクリーンショット]({{ site.url }}/assets/screenshot.jpg)

読者がダウンロードするための PDF へのリンクを貼ります:

… あなたはそのまま [PDFをダウンロードできます]({{ site.url }}/assets/mydoc.pdf) 。
ProTip™: 単にサイトのルート URL を使用してリンクする

もしあなたのサイトが今までドメインのルート URL で表示していたならば、 {{ site.url }} 変数をスキップすることができます。 この場合、あなたは単に /path/file.jpg とすれば、 資産を直接参照することができます。

Post の index を表示する

それは、フォルダ内で持っている Post がすべて順調でよいですが、 あなたがどこかで Post のリストを持っていない限りブログはそれを使用しません。 別のページ(またはテンプレート内)上の Post の index を作成するのは 簡単で、それは Liquid template language と そのタグのおかげと思っています。 これはあなたのブログの Post へのリンクのリストを作成する方法の基本的な例です:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

もちろん、あなたは Post を表示する方法(と場所)や、 サイトを構築する方法を完全に制御することができます。 もし、さらに知りたい場合は、 Jekyll とともに テンプレートがどのように働くかについて詳細を読むべきです。

Post の抜粋

各々の Post は自動的に excerpt_separator の最初に発生するコンテンツの先頭から 文書のはじめのブロックが取られ、そして post.excerpt として設定されます。 上記の Post の index の例です。 多分、あなたは各々の Post のはじめの段落を追加することよって Post の 内容について少しヒント含めたいのです:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

Jekyll はあなたのために既にはじめの段落を掴んでくれているので、 抜粋を p タグでラップする必要はありません。 あなたが好むなら、これらのタグは以下のように消すことができます:

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}

もし、あなたが自動的に生成された Post の抜粋を好まないなら、 Post の YAML front-matter に excerpt を追加することによって上書きすることができます。 excerpt_separator"" を設定することによって、完全にそれを無効にします。

また、 Liquid タグによって生成された任意の出力も同様に、任意の html タグを 出力の中から削除するために | strip_html フラグを渡すことができます。 これはもし、あなたが meta="description" タグを Post の head として Post の抜粋を 出力するか、またはどこか他の内容の html タグ に沿って持つことを希望するなら、 望ましくないが特に有効です。

コードスニペットのハイライト化

Jekyll もまた Pygments か Rouge を使用したコードスニペットの シンタックスハイライトサポートが組み込まれているため、 任意の Post 内にコードスニペットを含めることは簡単です。 ちょうど、次のように専用の Liquid タグを使用します。

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}

そして、出力はこのようになります:

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
ProTip™: 行番号を表示する

あなたは、このように highlight 開始タグの終端に linenos を 加えることによってコードスニペットに行番号を含めることができます: {% highlight ruby linenos %}

これらの基本情報は、あなたがはじめの Post を書き始めるのに十分でなければなりません。 あなたがそれ以外の情報を掘り下げる準備が可能になったとき、 あなたの Post やあなたのサイトの他の場所で Postのパーマリンクをカスタマイズすることや、 カスタム変数を使用するようなことに興味がわいているかもしれません。