ラベル Jekyll の投稿を表示しています。 すべての投稿を表示
ラベル Jekyll の投稿を表示しています。 すべての投稿を表示

Jekyllのタグクラウドプラグインを開発する

jekyll-taggingプラグインは十分なんだけど、
プラグイン作成のトライアルにタグクラウドが簡単そうなので作成してみる

タグページを生成する

ページ生成プログラム(tagpage.rb)

module Jekyll
    class TagPage < Page
        def initialize(site, base, dir, tag)
            @site = site
            @base = base
            @dir  = dir
            @name = 'index.html'
            
            self.process(name)
            
            self.read_yaml(File.join(base, '_layouts'), 'tag.html')
            self.data['title'] = "Entries of #{tag}"
            self.data['posts'] = site.tags[tag]
            self.data['tag'] = tag
        end
    end
    
    class TagPageGenerator < Generator
        
        safe true

        def generate(site)
            site.tags.each_key do |tag|
                site.pages << TagPage.new(site, site.source, File.join('tags', tag), tag)
            end
        end
    end
end

レイアウトファイル(tag.html)

{% raw %}---
layout: default
---
<h1>
    {{ page.tag }}
</h1>
<article class="post-content">
    <ul>
        {% for post in page.posts %}
            <li><a href="{{ post.url }}">{{ post.title }}</a></li>
        {% endfor %}
    </ul>
</article>{% endraw %}

タグクラウドを生成する

タグクラウド生成プログラム(tagcloud.rb)

module Jekyll
    class TagCloud < Liquid::Tag
        
        def initialize(tag_name, text, tokens)
            super
        end
        
        def render(context)
            tag_array = []
            site = context.registers[:site]
            site.tags.each do |tag, tag_pages|
                tag_array << tag
            end
            tag_array.sort!
            
            tagcloud = ""
            tag_array.each do |tag|
                tagcloud << "<span><a href='#{site.baseurl}/tags/#{tag}/index.html'>#{tag}</a></span>"
            end
            "#{tagcloud}"
        end
    end
end

Liquid::Template.register_tag('tag_cloud', Jekyll::TagCloud)

タグクラウド生成指定(sidebar.htmlなどへ)

{% raw %}<h1>TAG GLOUD</h1>
<div id="tag-cloud">
    {% tag_cloud %}
</div>{% endraw %}

Jekyllにタグクラウドプラグインを追加する

Jekyllで静的生成したサイトのサイト内検索性向上対策としてタグクラウドを追加する
jekyll-taggingプラグイン : https://github.com/pattex/jekyll-tagging
このページに書いてある通りでうまくいった

プラグインのインストール

gemを追加

$ gem install jekyll-tagging

Jekyllの依存gemとして指定

Gemfileに'jekyll-tagging'を追記する

$ vi /Users/user/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/jekyll-2.2.0/Gemfile
gem 'jekyll-tagging'

サイトのプラグイン設定を追加

$ mkdir sample.com/_plugins
$ vi _plugins/ext.rb
`````````````
```text
require 'jekyll/tagging'

タグページの設定

タグページに使用するレイアウト、タグページが生成されるディレクトリを指定する

$ vi sample.com/_config.yml
tag_page_layout: default
tag_page_dir: tag

HTMLの指定方法

件数に応じてクラス分けされているのでフォントサイズの変更も可能

<div id="tag-cloud">
    {% raw %}{{ site | tag_cloud }}{% endraw %}
</div>

Jekyllのページネーションを設定する

Jekyllに用意されているページネーション機能を利用する

ページネーション

Jekyllのコンフィグ(_config.yml)にページネーション時のアイテム数を設定する

paginate: 5

トップページに設定する

<article class="top-content">
    <ul class="posts">
        {% raw %}{% for post in paginator.posts %}{% endraw %}
        <li>
            <a class="post-title" href="{% raw %}{{ post.url | prepend: site.baseurl }}{% endraw %}">
                {% raw %}{{ post.title }}{% endraw %}
            </a>
            <p class="post-excerpt">
                {% raw %}{{ post.excerpt }}{% endraw %}
            </p>
        </li>
        {% raw %}{% endfor %}{% endraw %}
    </ul>
    {% raw %}{% if paginator.total_pages > 1 %}{% endraw %}
        <div class="pagenation">
            {% raw %}{% if paginator.previous_page %}{% endraw %}
                <a href="{% raw %}{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">&laquo; Prev</a>
            {% raw %}{% else %}{% endraw %}
                <span>&laquo; Prev</span>
            {% raw %}{% endif %}{% endraw %}
            {% raw %}{% for page in (1..paginator.total_pages) %}{% endraw %}
                {% raw %}{% if page == paginator.page %}{% endraw %}
                    <em>{% raw %}{{ page }}{% endraw %}</em>
                {% raw %}{% elsif page == 1 %}{% endraw %}
                    <a href="{% raw %}{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">{% raw %}{{ page }}{% endraw %}</a>
                {% raw %}{% else %}{% endraw %}
                    <a href="{% raw %}{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}{% endraw %}">{% raw %}{{ page }}{% endraw %}</a>
                {% raw %}{% endif %}{% endraw %}
            {% raw %}{% endfor %}{% endraw %}
            {% raw %}{% if paginator.next_page %}{% endraw %}
                <a href="{% raw %}{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">Next &raquo;</a>
            {% raw %}{% else %}{% endraw %}
                <span>Next &raquo;</span>
            {% raw %}{% endif %}{% endraw %}
        </div>
    {% raw %}{% endif %}{% endraw %}
</article>

Jekyllの初期設定をする

Jekyllのコンフィグ(_config.yml)を好みに変更する

Markdownパーサーの変更

kramdownに馴染めなかったのでMarkdownパーサーをredcarpetに変更する

markdown: redcarpet

https://github.com/vmg/redcarpet を参考にパーサーの設定

  • nointraemphasis :単語中は強調しない
  • tables :テーブルパースを有効化する
  • fencedcodeblocks :```でシンタックスハイライト
  • autolink :URLをリンクにする
redcarpet: 
  extensions: ["no_intra_emphasis", "tables", "fenced_code_blocks", "autolink"]

パーマリンク形式の変更

URLに日付が出ないようにパーマリンク形式を変更する

permalink: none

シンタックスハイライト

Pygmentsのインストールに割と手こずって結局Rougeを使用する

highlighter: rouge

JekyllをMacにインストールする

JekyllカスタマイズをするのはVPS上のCodeboxでも可能だけど
やっぱり手元のMacにもインストール

Jekyllのインストール

下記を参考にインストール

JekyllをMacで試す(クイックスタート)

インストール

$ gem install jekyll
$ rbenv rehash
$ jekyll -v
Notice: for 10x faster LSI support, please install http://rb-gsl.rubyforge.org/
jekyll 2.2.0

サイト作成、ローカルサーバでサイト起動

--watch 付きで起動してページの追加のされようを確認する

$ jekyll new sample.com
$ cd sample.com/
$ jekyll serve --watch
...
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.

ブラウザでアクセス

ローカルホスト、ポート4000で起動するのでブラウザでアクセスする
http://locahost:4000/

ページを追加する

ルートディレクトリに追加する

$ vi sample.com/root.md
---
layout: page
title: Root
permalink: /root/
---
Root directory.
  • ./_site/root/index.html が生成される
  • サイトヘッダーにリンクが追加される

サブディレクトリに追加する(その1)

$ mkdir sub1
$ vi sample.com/sub1/sub1.md
---
layout: page
title: Sub1
permalink: /sub1/
---
Sub1 directory.
  • ./_site/sub1/index.html が生成される
  • サイトヘッダーにリンクが追加される(site.pagesで引っ張っている)

サブディレクトリに追加する(その2)

$ vi sample.com/sub2.md
---
layout: page
title: Sub1
permalink: /sub/sub2
---
Sub2 directory.
  • ./_site/sub/sub2/index.html が生成される
    • つまり、生成前の構造は関係なく、Front Matterの指定に従ってディレクトリ構造が出来上がる
  • サイトヘッダーにリンクが追加される(site.pagesで引っ張っている)

_postディレクトリに追加する

$ vi sample.com/_posts/2014-09-01-sample-post.md
---
layout: post
title:  "Sample Post"
date:   2014-09-01 12:34:56
categories: post sample
---
Sample Post
  • _postディレクトリにはYEAR-MONTH-DAY-title.MARKUP形式のファイル名で追加する
  • ./_site/post/sample/2014/09/01/sample-post/index.html が生成される
  • インテックスページのコンテンツにリンクが追加される(site.postsで引っ張っている)

サイト終了

ctrl-c

ページタイトルを変える

_config.ymlのtitleを変更するだけだが、 _config.ymlの変更は --watch では反映されない、再起動が必要

$ vi sample.com/_config.yml
$ jekyll serve

JekyllをCentOS6.5にインストールする

tags: CentOS Jekyll

WordPressも利用しているが、
カスタマイズが大変、、、 カスタマイズしてしまうと、またすると大変、、、なのでJekyllを試してみる 折角なのでJekyllもVPSのCentOS6.5にインストールする

Jekyllのインストール

下記を参考にインストールする

インストール

$ gem install jekyll

サンプルサイト生成

$ jekyll new sample.com
$ cd sample.com
$ jekyll serve

Macのターミナルでポートフォワードを実施

ssh -fNL 12345:localhost:4000 ssh user@vpshost -p 54321

ブラウザでアクセス

http://locahost:12345

メモ

Cloud IDE(Cloud9、Codebox)もインストールして開発環境もVPS上にしようとしたが、やっぱりMacで開発する方が快適