オリジナルテーマのアップデート:Googleカスタム検索やDisqus,google analyticsのコードの復活など

2015-05-06(Wed) Diary

早速アップデートしました

前回、オリジナルテーマを適応しましたが、早速色々と問題がわかったのでちょっと直したり追加したりしました。大体は入れ忘れていたものです。

Googleカスタム検索の追加

こちらは追加したものです。Googleカスタム検索を追加しました。ナビゲーションバーの中にあるものです。

Googleカスタム検索は、現在はJavascriptで動的に生成するコードが主流のようですが、Bootstrapとコンフリしてしまうらしいです。何度か適応させてみましたが見栄えが悪すぎたのでやめようか悩んでいました。

何とか出来なかなと調べていたところ、HTMLフォームとしての検索フォームの追加が出来ることが分かりました。

HTMLフォームを利用した埋め込みはサポート対象外の方法のようですが、まだ利用できるので手っ取り早くこちらを利用しています。

Bootstrapに馴染んた見え方に、かつナビゲーションバーに入れたかったので、以下の様なコードをナビゲーションバーのコードに入れています。

また、検索結果を別ウィンドウで出したり、inputタグでボタンを作っていたのをbuttonタグにしています。

<form class="navbar-form navbar-left"　id="cse-search-box" action="http://google.com/cse" target="_blank">
    <div class="form-group">
        <input type="hidden" name="cx" value="[ここはGoogleカスタム検索で生成したjavascriptコード内にあるcx IDを入れる]" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input class="form-control" type="text" name="q"  />
        <button class="btn btn-default" type="submit" name="sa" value="Search">
        <img alt="Googleカスタム検索" src="http://www.google.com/cse/images/google_custom_search_smwide.gif"></button>
    </div>
</form>

このHTMLフォームを利用する条件にGooglブランドの表示があって、Googleブランドのロゴがありますが、buttonタグ内に画像を入れることが出来るので、Bootstrapのデザインを崩さない形で入れることが出来ました。コードの改変は許されないとは書かれていなかったので問題無いと思います。

この方法がどのぐらい利用できるかわかりませんが、できなくなる時はもう少し使い勝手のいい埋め込みコードを作ってくださると助かるのですが。。

参考:
Google Custom Search Elementに対応したPelicanテーマ: jsliang/pelican-fresh
Fresh: a responsive Pelican theme that uses HTML5

Disqus, Google Analyticsのコードを復活

復活というか入れ忘れていただけでした。。

Disqusのコードはスクリプトとコメントのコードと2つに分けています。これはPelicanのnotmyideaテーマの内容をそのまま適応させています。Simpleテーマにはなかったらしくて、すっかり忘れていました。

同時に、Google Analyticsのコードも復活しました。こちらはnomyidiaテーマのanalytics.htmlと、のpelican-bootstrap3のga.htmlのコードを混ぜ込んでいます。pelican-bootstrap3のgoogle analytics universal用のコードが欲しかったので混ぜてしまっています。ライセンスの表記をどうすればいいのか調べておかないと行けませんね（汗）

その他細かい変更

richleland/pygments-css のCSSではPelicanのシンタックスハイライトの適応が出来なかったので、pelican-bootstrap3/static/css/pygments at master · DandyDev/pelican-bootstrap3 へ切り替えました
各アーティクルのSectionタグ内で、コメントのDisqusを一番下に配置しています
ナビゲーションバーのArticlesのナビゲーションにアイコンを付けました

今後の方針

マテリアルデザインについて調べていたのですが、BootswatchのPaperがまさにそれっぽいので、適応したら終わりになりそうです。。ちょっと改変するかもしれませんが。

その他にもPelicanの標準で対応している設定への対応や、pelican-bootstrap3で実現していたようなソーシャルリンクにfont-awesomeのソーシャルアイコンを自動的に適応するとかをやってみたいです。（そこまで言うならフォークしたほうが良かった気がしてきた ^^;）

あと、サイドバーの各項目は実は並べ替え出来るようにしてみたいです。
各ブロックをjinja2のincludeタグを使ってそれぞれ分けてあるので、pelicanconf.pyで並び替えできるようになると面白いかもしれません。多分リストでブロックごとのテンプレート名を順番に適応するだけで行けると考えてます。このあたりの自由度はPelican（と言うかjinja2）のいいところですね :-)