Lokkaプラグイン作ってみた

Standard
Lokkaプラグイン作ってみた

打倒WordPressを目指すLokkaがおもしろそう。なんといってもherokuですぐ動くっていうのがいい。Lokkaはgithubにのってるので本体の更新も楽。Lokkaをgithubからcloneして使ってれば

  • git pull origin master
  • git push heroku master

で完了する。なんか知らんけどherokuにアクセスできなくなることがしょっちゅーなので、GAEがgitでデプロイできるようになることを切望しとります。そしたらそっちにのせよ。herokuにのせたのはこれ

 
http://bugcloudisco.heroku.com/
 
 
せっかくなので簡単なプラグインを作ってみる。
投稿のなかでwebフォントを使えるようにしてみる。[wf][/wf]で囲まれた部分に適用させる。
 

module Webfont
  def self.registered(app)
    app.after do
        p 'insert stylesheet.'
        p 'modify body.'
    end
  end
end

っていう感じで、htmlを書き出す直前にheadとかbodyを書き換えれると思ったけど、うまいことやる方法がわからなくて、Helperにした。
 
LOKKAROOT/public/plugin/lokka-webfont/lib/lokka/webfont.rb

module Lokka
  module Helpers
    def webfont(str)
      str = str.gsub('[wf]','<span class="using-webfont">').gsub('[/wf]','</span>')
      return str
    end
  end
end

 
LOKKAROOT/public/plugin/lokka-webfont/lib/lokka/css/style.css

.using-webfont {
  font-family: 'Lobster', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 2px 2px 2px #aaa;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.056em;
  word-spacing: 0.106em;
  line-height: 1.06em;
}

 
テンプレートの修正。jarviを使ってるなら
 
LOKKAROOT/public/public/theme/jarvi/layout.erb
内に追加

<link href="//fonts.googleapis.com/css?family=Lobster:regular&subset=latin" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="/plugin/lokka-webfont/lib/lokka/css/style.css">

 
LOKKAROOT/public/public/theme/jarvi/entries.erb
記事を出力するところでHelperを呼ぶ

<div class="body">
  <%= webfont post.body %>
</div>

 
こんな感じになる。
 screenshot

screenshot

 
 
webフォントはgoogleでホストされてるやつ。http://code.google.com/webfonts
layout.erbをいじらないでstylesheetのリンクを追加したかったけど、よくわからなかった。もうちょっとやってみよ

Facebook comments:

4 thoughts on “Lokkaプラグイン作ってみた

  1. bugcloud

    あざっす。
    「プラグインがロードされたら、ヘッダでスタイルシート読み込みを追加」みたいのが書き方わかりません :<

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>