Tinkererのテーマを自作した話
せっかくの自分のブログなので、テーマはオリジナルがいい + Tinkererいいね->Sphinxいいねなのでやってみました。
Contents
Themeの作り方
Tinkererのルートディレクトリに_theme/my_themeを掘ります。
(my_themeはこれから自作するテーマ名なのでどんな名前でもいい)
あとは、conf.pyに
html_theme = "my_theme"
を書き込む。
my_themeの構成は
/my_theme
/static
*.css
*.js
layout.html
page.html
<sidebar_plugin>.html
theme.conf
layout.html => ブログのレイアウト全般
page.html => 各ページのレイアウト
<sidebar_plugin>.html => サイドバーに埋め込むモジュール
cssやjsなどはstatic以下に配置します。
レイアウトの変更
layout.htmlを編集していきますが、このHTMLファイルはJinja2で書かれています。
TinkererはJinja2テンプレートエンジンを多用してあるので、Jinja2を知らない場合は以下で少し勉強します。
Welcome to Jinja2 — Jinja2 2.7.2 documentation
Tinkererのテーマはブログ用にカスタムされたHTML5 Boilerplateを継承しています(Jinja2カスタム)
なので自作のテーマを作成する際も、このboilerplateを継承して作成していきます。
継承はこんな感じ。
{%- extends "boilerplate/layout.html" -%}
TinkererのboilerplateはGitHubで確認できます。
tinkerer/tinkerer/themes/boilerplate at master · vladris/tinkerer
この中のlayout.htmlを見ると、上のほうから
- 変数定義
- マクロ定義
- HTMLテンプレート
の構成になっています。
この中のHTMLテンプレートの部分にあるblockを選択して自分用にカスタマイズしていきます。 (詳しくはカスタマイズ例)
レイアウトを編集する前に、継承元やCSSの設定などをtheme.confに記述しておきます。
[theme]
inherit = boilerplate
stylesheet = my_theme.css
pygments_style = native
[options]
accent_color = #3C9EEA
Pygmentsの部分は、static内にpygments.cssがあればそちらが優先される設定です。
optionsはテンプレートエンジン内で使える変数を定義できます。
カスタマイズ例: Navigation
ブログのナビゲーション↓
を設定してみます。boilerplateの状態だと↓
HTMLファイルはあるのに、ナビゲーションがないSitemapやArchive、Searchを追加してみます。
boilerplate/layout.htmlを見ると、ナビゲーションは{%- block navigation -%}で定義されています。
GitHubの tinkerer/tinkerer/themes/boilerplate/layout.html の抜粋。
{%- block navigation -%}
<nav role="navigation">
<ul>
{%- block quicklinks -%}
{%- if rss_in_page_nav -%}
<li class="quicklink">{{ rss_link() }}</li>
{%- endif -%}
{%- endblock -%}
{% for page in pages -%}
<li class="main-nav">
<a href="{{ pathto(page[0]) }}">{{ page[1]|e }}</a>
</li>
{% endfor -%}
</ul>
</nav>
{%- endblock -%}
pagesでループしていますがデフォルトではHOMEのみが入っているようです。
pagesに今欲しい項目を入れれば良いのですがさっと調べた感じわからなかったので(知ってる方がいれば教えてください)、直書きしました。
my_theme/layout.htmlに以下の内容を追記します。
{%- block navigation -%}
<nav role="navigation">
<ul>
<li class="main-nav"><a class="fa fa-list fa-lg" href="{{ url_root }}master.html"></a>
<li class="main-nav"><a class="fa fa-search fa-lg" href="{{ url_root }}search.html"></a>
<li class="main-nav"><a class="fa fa-home fa-lg" href="{{ url_root }}index.html"></a>
<li class="main-nav"><a class="fa fa-archive fa-lg" href="{{ url_root }}archive.html"></a>
{%- block quicklinks -%}
{%- if rss_in_page_nav -%}
<li class="quicklink main-nav">{{ rss_link() }}</li>
{%- endif -%}
{%- endblock -%}
</ul>
</nav>
{%- endblock -%}
ポイントは存在するファイルへのパスを記述する際にはurl_root変数を使用すること。
あとは、Tinkerer 1.4からFont Awesomeをデフォルトで使用可能なのでいい感じです。サイズはRSSがfa-lgとなっているので統一します。
レイアウトはCSSを書いて調整します。
カスタマイズ例: Sidebar
ディレクトリ構成のところで<sidebar_plugin>.htmlと書いたファイルでカスタマイズしていきます。
この例ではTagCloudをくるくる回るやつにしてみます。
cloud_tags.htmlというファイルを作成します。
<div class="widget">
<h1>{{ text_tags_cloud }}</h1>
</div>
はじめからあったtags_cloud.htmlを参考に作っていきます。
そのまえに、conf.pyにcloud_tags.htmlを指定します。
html_sidebars = {
"**": ["recent.html", "searchbox.html", "cloud_tags.html"]
}
くるくる回るやつのいうのは、WordPressにあるくるくる回るFlashのプラグイン。
のJSの実装がGitHubに転がっていたので改造して使用してみます。
{%- set fontsize_min = 1 -%}
{%- set fontsize_max = 100 -%}
<div class="widget">
<h1>{{ text_tags_cloud }}</h1>
<script>
var tags = [];
{%- set count_min = 1 %}
{%- set count_max = tags.values()|sort|last %}
{%- for tag, x in tags|dictsort %}
{%- set size = (fontsize_max-fontsize_min)*(x-count_min)/(count_max-count_min or 1) + fontsize_min %}
tags.push(new Tag("{{ tag }}", {{ size|int }}, "{{ pathto('tags/' + taglinks[tag]) }}"));
{%- endfor %}
var tagCloud = new TagCloud(tags, 500, 500);
</script>
<div id="tagCloud"></div>
<script type="text/javascript">
tagCloud.Distribute(document.getElementById("tagCloud")).Animate();
</script>
</div>
かなり強引ですがこの際あまり気にしないでおきます。
ちなみにこのくるくる回るやつは下のほうで見れます。
Chromeだとスクロールが深いとでめっちゃぐるぐるまわります。
(Firefoxではとりあえず大丈夫)
Tinkererとあんまり関係ないこと
このブログテーマの自分なりのアレンジポイント。
Kudos
HackerNewsを眺めているとわりとよく見かける Svbtle 。
このブログにKudosボタンが設置されていて羨ましかった。
シンプルでフリーなKudosがGitHubにあったのでそちらを使えば自分専用Kudosを配置できる。
Codepenにサンプルが上がっているので参考して作ってみた。
CSSはGitHubにあるCSSを使用します。(ついでにJSも読み込みます)
<link rel="stylesheet" href="kudosplease-min.css">
<script src="kudosplease-min.js"></script>
<!-- 好きなところにKudosボタンを配置-->
<div class="kudos" data-amount="0" data-url="domain.tld/my-awesome-article"></div>
data-urlに指定したURLごとにKudosの数が保存されるので各ページに配置する場合にはページのURL等を使用するようにします。
Tinkerだと、domain.hoge/{{ pagename }}{{ file_suffix }}を使うといい。
あとは、JavascriptでKudosを作成します。
new KudosPlease({
el : '.kudos',
duration : 1500,
persistent : true,
status : {
alpha: '',
beta: '',
gamma: 'fontawesome-thumbs-up'
}
});
elにはHTMLで作成するdivのクラス名を、persistentにはkudosされた状態を保持するか否かを指定します。
statusにはアイコンを指定します。
- alpha, beta: Kudosされる前(同じのを指定する)
- gamma : Kudos後
デフォルトではFontAwesomeアイコンが使えません。
GitHubのscssのソースを参考に書けば良いのですが、TinkererにはデフォルトでFontAwesomeが読み込まれているのでコンフリクトします。
めんどうですが、直接使うアイコンだけ指定してあげます。
/*
* Use FontAwesome from Tinkerer
*/
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?#iefix') format('eot'),
url('fontawesome-webfont.woff') format('woff'),
url('fontawesome-webfont.ttf') format('truetype'),
url('fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
}
/* 使うアイコンだけここに書く */
.fontawesome-cloud:before{content:"\f0c2"}
.fontawesome-thumbs-up:before{content:"\f087"}
[class*="fontawesome-"]:before {
font-family: 'FontAwesome';
}
というわけでKudosください。
Admonition - reStructuredText
reStructuredTextにはAdmonitionというディレクティブがあります。
これのCSSが定義されてなくてかわいそうなケースが多いので定義してあげます。
Hint
Hint書く
Important
何か重要なコト書く
Note
Noteが一番使いやすい?
Attention
というかブログに使いづらい?(Admonition)
Caution
この中のフォントだけおかしい感じにした。
Error
Use a google font <Coming Soon>( Google Fonts ).
Warning
WarningとCaution似てる(同じ)
多分便利に使えると思う(きっと)
カスタマイズ例: Social Buttons
ソーシャルボタンをTinkererに追加する記事はたくさんあるので参考にさせていただきながら付けます。
ソーシャルボタンを付けたpage.htmlのサンプル。
{%- extends "layout.html" -%} {%- block body -%} {{ super() }} <div class="social-btn"> <div class="social-container"> <!-- Twitter button --> </div> <div class="social-container"> <!-- Hatena button --> </div> <div class="social-container"> <!-- Google+ button --> </div> <div class="social-container"> <!-- Facebook button --> </div> </div> {%- endblock -%}レイアウトを調整したかったのでそれぞれのアイコンをdivに入れています。(divの中身は参考記事を参照)
{{ super() }}はJinja2の関数で元々(boilerplate内に)書いてある内容をそこに展開する関数です。