上級者編¶
テーマを自分で作ってみたいけど、
どういう作りなの？
HTML テーマの構造
pyconjp
+ theme.conf
+ layout.html
:
+ static
+ pyconjp.css_t
+ pyconjp_2012_logo.png
- theme.conf ファイル
- テンプレートファイル
- 静的ファイル
- スタイルシート
- 画像
theme.conf
[theme]
inherit = basic
stylesheet = pyconjp.css_t
pygments_style = friendly
[options]
rightsidebar = false
[theme] セクション
- inherit
- stylesheet
- pygments_style
[theme] セクション - inherit
- 継承元テーマを指定します
- 継承しない場合は none を指定
- 組み込みテーマを部分的に変更したい場合に便利
[theme] セクション - stylesheet
- 適用するスタイルシート名を指定
- “静的テンプレート” ファイル名でもOK
- conf.py の html_style オプション (文字列) で上書き可能
[theme] セクション - pygments_style
- Code Block のスタイル
- Pygments のスタイル名を指定
- conf.py の pygments_style オプション (文字列) で上書き可能
[options] セクション
- テーマ固有のオプションを記述
- 「オプション名 = 値」
- conf.py の html_theme_options オプション (辞書) で上書き可能
テンプレートファイル
{#
default/layout.html
~~~~~~~~~~~~~~~~~~~
Sphinx layout template for the default theme.
:copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
:license: BSD, see LICENSE for details.
#}
{% extends "basic/layout.html" %}
{% if theme_collapsiblesidebar|tobool %}
{% set script_files = script_files + ['static/sidebar.js'] %}
{% endif %}
テンプレートファイル
- Jinja2 のテンプレート
- テンプレートを指定しない場合は、 継承元のテンプレートをそのまま利用します
静的ファイル
- スタイルシート
- 画像ファイル (.jpg, .png 等)
スタイルシート
- static template を使えます
static template って何？
- 静的ファイルのテンプレート化
- make html する時に、値を埋め込めます
Example
pyconjp.css_t
:
div.sphinxsidebar {
margin: 0;
padding: 0.5em 15px 15px 0;
width: {{ theme_sidebarwidth|toint - 20 }}px
float: right;
font-size: 1em;
text-align: left;
}
:
書き方:
* オプション名に theme_ プレフィクスを付ける
* 置換したい箇所に {{ , }} を使って埋め込む
theme.conf
[theme]
inherit = basic
stylesheet = pyconjp.css_t
pygments_style = sphinx
[options]
sidebarwidth = 170
pyconjp.css
:
div.sphinxsidebar {
margin: 0;
padding: 0.5em 15px 15px 0;
width: 150px
float: right;
font-size: 1em;
text-align: left;
}
:
* 数値だけではなく、文字列も OK
* HTML テンプレートと同様にフィルタも使えます
これらを一つのディレクトリに入れます
pyconjp
+ theme.conf
+ layout.html
:
+ static
+ pyconjp.css_t
+ pyconjp_2012_logo.png
このディレクトリを Sphinx の
ドキュメントルートに置きます。
some_document
+ static
+ _templates
+ conf.py
+ index.rst
+ pyconjp <-- New!
conf.py でテーマのパスを指定します。これで make html すると。。。
# Add any paths that contain custom themes here, relative to
# this directory.
html_theme_path = ["."]
- conf.py からの相対パスで指定できます。
自作テーマのドキュメントが！！
（下の画像はイメージです）
