はじめに

Sphinx の使い勝手がなかなか良いので Blogger の原稿を Sphinx で作成し、テーマも Sphinx にあわせてみました。

この投稿も Sphinx を使用して作成しています。

レイアウトやスタイルシートを大胆に編集しているので何か不具合あるかもしれませんが、とりあえず今のところうまくいってます。

Blogger 用の Sphinx テンプレート等を準備

今回使用した Sphinx のバージョンは 1.1.3 です

プロジェクト用のディレクトリを適当に作成してそこに移動

$ mkdir /some/where/TestProject
$ cd /some/where/TestProject/

プロジェクト作成

sphinx-quickstart 実行

$ sphinx-quickstart

以下を適当に入力

> Project name: TestProject
> Author name(s): Fishrimper
> Project version: 0.0

これら以外はデフォルト値にしました

なお、「Project version」は入力必須のためとりあえず入力しましたが、後のカスタマイズでドキュメントにはバージョン番号が出てこないようにします

HTML テンプレート準備

basic テーマの layout.html をコピー

$ cp /usr/share/sphinx/themes/basic/layout.html /some/where/TestProject/_templates/

コピーした layout.html から Blogger には不要 (と思われるもの) をバッサリ削除 & 適当に編集

編集後の layout.html はこんな感じになりました

$ cat /some/where/TestProject/_templates/layout.html
{#
    layout.html
    ~~~~~~~~~~~~~~~~~

    Sphinx layout template.

    :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
    :copyright: Copyright 2014 by Fishrimper.
    :license: BSD, see LICENSE for details.
#}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset={{ encoding }}" />
    <title>{{ project|striptags|e }}</title>
    <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
    <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
  </head>
  <body>
    <div class="body">
      {% block body %} {% endblock %}
    </div>
    <hr />
    <div class="footer">
      Created using Sphinx {{ sphinx_version }}.
    </div>
  </body>
</html>

conf.py 編集

フッターの文字を黒色に、パーマリンクをオフにしてます

$ cd /some/where/TestProject/

$ diff -u conf.py.Org conf.py
--- conf.py.Org 2014-01-13 19:45:00.916223250 +0900
+++ conf.py     2014-01-13 19:46:47.956234740 +0900
@@ -96,7 +96,9 @@
 # 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 = {}
+html_theme_options = {'footertextcolor': '#000000'}
+
+html_add_permalinks = False

 # Add any paths that contain custom themes here, relative to this directory.
 #html_theme_path = []

CSS テンプレート準備

basic.css_t を準備

basic テーマの basic.css_t をコピー

$ cp /usr/share/sphinx/themes/basic/static/basic.css_t /some/where/TestProject/_static/

コピーした basic.css_t も layout.html と同様に不要 (と思われるもの) をバッサリ削除

こんな感じになりました。テーブル関連のものだけ残してます。

$ cat /some/where/TestProject/_static/basic.css_t
/*
 * basic.css
 * ~~~~~~~~~
 *
 * Sphinx stylesheet.
 *
 * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
 * :copyright: Copyright 2014 by Fishrimper.
 * :license: BSD, see LICENSE for details.
 *
 */

/* -- tables ---------------------------------------------------------------- */

table.docutils {
    border: 0;
    border-collapse: collapse;
}

table.docutils td, table.docutils th {
    padding: 1px 8px 1px 5px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #aaa;
}

table.field-list td, table.field-list th {
    border: 0 !important;
}

table.footnote td, table.footnote th {
    border: 0 !important;
}

th {
    text-align: left;
    padding-right: 5px;
}

table.citation {
    border-left: solid 1px gray;
    margin-left: 1px;
}

table.citation td {
    border-bottom: none;
}

default.css_t を準備

default テーマの default.css_t をコピー

$ cp /usr/share/sphinx/themes/default/static/default.css_t /some/where/TestProject/_static/

コピーした default.css_t も同様にバッサリ削除し、div.body に font-family を追加

こんな感じになりました。

$ cat /some/where/TestProject/_static/default.css_t
/*
 * default.css_t
 * ~~~~~~~~~~~~~
 *
 * Sphinx stylesheet.
 *
 * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
 * :copyright: Copyright 2014 by Fishrimper.
 * :license: BSD, see LICENSE for details.
 *
 */

@import url("basic.css");

/* -- page layout ----------------------------------------------------------- */

div.body {
    font-family: {{ theme_bodyfont }};
    background-color: {{ theme_bgcolor }};
    color: {{ theme_textcolor }};
    padding: 0 20px 30px 20px;
}

div.footer {
    color: {{ theme_footertextcolor }};
    width: 100%;
    padding: 9px 0 9px 0;
    text-align: center;
    font-size: 75%;
}

/* -- body styles ----------------------------------------------------------- */

div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
    font-family: {{ theme_headfont }};
    background-color: {{ theme_headbgcolor }};
    font-weight: normal;
    color: {{ theme_headtextcolor }};
    border-bottom: 1px solid #ccc;
    margin: 20px -20px 10px -20px;
    padding: 3px 0 3px 10px;
}

div.body h1 { margin-top: 0; font-size: 200%; }
div.body h2 { font-size: 160%; }
div.body h3 { font-size: 140%; }
div.body h4 { font-size: 120%; }
div.body h5 { font-size: 110%; }
div.body h6 { font-size: 100%; }

pre {
    padding: 5px;
    background-color: {{ theme_codebgcolor }};
    color: {{ theme_codetextcolor }};
    line-height: 120%;
    border: 1px solid #ac9;
    border-left: none;
    border-right: none;
}

tt {
    background-color: #ecf0f3;
    padding: 0 1px 0 1px;
    font-size: 0.95em;
}

th {
    background-color: #ede;
}

ブログの原稿を書く

ファイルは /some/where/TestProject/index.rst です

原稿を make

ターゲットは singlehtml です

$ cd /some/where/TestProject/
$ make singlehtml

/some/where/TestProject/_build/singlehtml/ に index.html に html ファイルができてるので、ブラウザで開いて確認できます

Blogger 用のスタイルシート作成

$ cd /some/where/TestProject/_build/singlehtml/_static/

$ cat basic.css                     >  ForBlogger.css; \
  echo                              >> ForBlogger.css; \
  echo                              >> ForBlogger.css; \
  cat default.css | grep -v @import >> ForBlogger.css; \
  echo                              >> ForBlogger.css; \
  cat pygments.css                  >> ForBlogger.css; \
  echo                              >> ForBlogger.css; \
  echo                              >> ForBlogger.css; \
  echo 'dt{font-weight:normal}'     >> ForBlogger.css

このスタイルシート ForBlogger.css を後で Blogger に適用します

Blogger でブログを新規作成

とりあえず新規作成の場合の手順を書いてます。

ブログ作成

Blogger の管理ページで「新しいブログを作成」をクリック

タイトルとアドレスを適切に入力

テンプレートはデフォルトの「シンプル」を選択

テンプレートカスタママイズ

作成したブログのテンプレート設定画面で使用中のテンプレートの「カスタマイズ」をクリック

「上級者向け」をクリック

「CSS を追加」をクリック

先ほど作成した ForBlogger.css の内容を全て貼り付けて保存

Sphinx で作成した原稿の html を投稿として貼り付け

/some/where/TestProject/_build/singlehtml/index.html の中身の <body> 〜 </body> に囲まれた部分を貼り付けます。 (<body>, </body> タグ自身は貼り付けません)

私の場合は以上の手順で割とうまくいっています。

IT とかその他もろもろ

2014年1月15日水曜日

Blogger の原稿を Sphinx で作成

はじめに

Blogger 用の Sphinx テンプレート等を準備

Blogger でブログを新規作成

0 件のコメント:

コメントを投稿