目次

次のトピックへ

テストページ

このページ

Sphinx公式テーマを使ってみる方法

概要

ここでは、Sphinx公式のテーマを使ってドキュメントを作成する方法を備忘録としてまとめてあります。
やり方は、以下の順番で説明していきます。

None

ここで構築した環境は以下の通りになっています。

環境
項目 バージョン
OS CentOS 6.5 64bit
Sphinx 1.2.1

この手順で作成したものが、本ページになります。

ノート

作業ディレクトリは、「/var/www/html/document」とします。

警告

ここでは、Sphinxがインストールされている前提で書いています。そのため、Sphinxのインストールやドキュメントの作成方法 やblockdiagについては割愛します。


テーマのダウンロード

テーマは以下からダウンロードできます。


上記サイトにある「sphinx13」を丸ごとコピーします。
ダウンロードした「sphinx13」を任意のディレクトリにコピーします。

ノート

ここでは、例として「/var/www/html/document/theme」に保存したことにします。


CSSを修正

表のデザインを修正します。
sphinx13.cssをエディタで開きます。
[root@localhost ~]# vi /var/www/html/document/theme/sphinx13/static/sphinx13.css

以下のように修正します。
(snip)
/*table {
    border-collapse: collapse;
    margin: 0 -0.5em 0 -0.5em;
}

table td, table th {
    padding: 0.2em 0.5em 0.2em 0.5em;
}*/ <- デフォルトの設定をコメントアウト

---以下を追加---

table.docutils {
        border-collapse: collapse;
        border-right: 1px solid #999;
        border-top: 1px solid #999;
}

table.docutils th {
        padding: 6px;
        text-align: left;
        vertical-align: top;
        color: #fff;
        background-color: #555;
        border-left: 5px solid #ff6633;
        border-top: 1px solid #fff;
}

table.docutils td {
        padding: 6px;
        background-color: #fff;
        border-bottom: 1px solid #999;
        border-left: 1px solid #999;
}

---ここまで---

(snip)

layout.html修正

layout.htmlをエディタで開きます。
[root@localhost ~]# vi /var/www/html/document/theme/sphinx13/layout.html
以下のように修正しています。
{#
    sphinxdoc/layout.html
    ~~~~~~~~~~~~~~~~~~~~~

    Sphinx layout template for the sphinxdoc theme.

    :copyright: Copyright 2007-2013 by the Sphinx team, see AUTHORS.
    :license: BSD, see LICENSE for details.
#}
{%- extends "basic/layout.html" %}

{# put the sidebar before the body #}
{% block sidebar1 %}{{ sidebar() }}{% endblock %}
{% block sidebar2 %}{% endblock %}

{% block extrahead %}
{{ super() }}
{%- if not embedded %}
    <style type="text/css">
      table.right { float: right; margin-left: 20px; }
      table.right td { border: 1px solid #ccc; }
      {% if pagename == 'index' %}
      .related { display: none; }
      {% endif %}
    </style>
{%- endif %}
{% endblock %}

{% block rootrellink %}
        <li><a href="{{ pathto('index') }}">home</a>&nbsp;|</li>
{% endblock %}

{% block header %}
<div class="pageheader">
  <ul>
    <li><a href="{{ pathto('index') }}">Home</a></li>
    <li><a href="{{ pathto('search') }}">Search</a></li>
  </ul>
  <div>
    <a href="{{ pathto('index') }}">
      <img src="{{ pathto('_static/sphinxheader.png', 1) }}" alt="SPHINX" />
    </a>
  </div>
</div>
{% endblock %}
ヘッダの画像は、自作のものに変更する場合は、ファイル名(sphinxheader.png)を変更してください。

conf.py修正

conf.pyをエディタで開きます。
[root@localhost ~]# vi /var/www/html/document/conf.py
以下のように修正しています。
(snip)
# -- Options for HTML output ----------------------------------------------

# The theme to use for HTML and HTML Help pages.  See the documentation for
# a list of builtin themes.
#html_theme = 'default'
html_theme = 'sphinx13'

# Theme options are theme-specific and customize the look and feel of a theme
# further.  For a list of options available for each theme, see the
# documentation.
#html_theme_options = {}

# Add any paths that contain custom themes here, relative to this directory.
#html_theme_path = []
html_theme_path = ['/var/www/html/document/theme']
(snip)
# Custom sidebar templates, maps document names to template names.
#html_sidebars = {}
html_sidebars = {'**': ['localtoc.html', 'relations.html', 'sourcelink.html']}
(snip)
#---最終行に追加---#
language = "ja"
html_search_language = "ja"

これで完成です:-)

色々な例

  • テーブル例 その1
テストテーブル
テスト ほげほげ
テストテスト ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ

  • テーブル例 その2
テストテーブル
テストテスト ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ

  • toctree例