Google Analyticsのタグを埋め込む¶

Sphinxユーザー会のページではfooterにAnalyticsのタグを埋め込むようにしていますが、Googleのページではヘッダの最後（</head>の直前）にタグを埋め込むことを推奨しているようです。

そこで、ヘッダの最後にAnalyticsのタグを埋め込んでみます。

layout.htmlを拡張する¶

SphinxはJinja2というテンプレートエンジンを使ってHTMLを出力しています。

ヘッダ情報が入っているテンプレートファイルはlayout.htmlです。このテンプレートは、元になっているテーマのlayout.htmlを継承するようになっています。例えば、defaultテーマのlayout.htmlはbasicテーマのlayout.htmlを継承しています。

そこで、イチからlayout.htmlを作るのではなく、元のテーマのlayout.htmlを継承して拡張するようにしたいと思います。

拡張用layout.htmlの作成¶

defaultテーマのlayout.htmlには、ヘッダの情報はありませんでした。そこで、basicテーマのlayout.htmlを開いてみると、</head>の直前にextraheadという空のブロックがあるじゃないですか。

そこで、extraheadブロックにタグを埋め込みたいと思います。

ドキュメントルートフォルダの下の_templateフォルダに、layout.htmlというファイルを作って、下記のように記載します。

{%- extends "!layout.html" %}
{{ super() }}
{%- block extrahead %}
<script>
<!-- ここにanalyticsタグ -->
</script>
{% endblock %}

そしてHTMLに変換すると、ヘッダに_template/layout.htmlで追加した文言が追加されます。 defaultテーマで実行してみた結果から、ヘッダ部分だけ引用すると下記のようになります。

 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>Welcome to test’s documentation! &mdash; test 0 documentation</title>

   <link rel="stylesheet" href="_static/default.css" type="text/css" />
   <link rel="stylesheet" href="_static/pygments.css" type="text/css" />

   <script type="text/javascript">
     var DOCUMENTATION_OPTIONS = {
       URL_ROOT:    './',
       VERSION:     '0',
       COLLAPSE_INDEX: false,
       FILE_SUFFIX: '.html',
       HAS_SOURCE:  true
     };
   </script>
   <script type="text/javascript" src="_static/jquery.js"></script>
   <script type="text/javascript" src="_static/underscore.js"></script>
   <script type="text/javascript" src="_static/doctools.js"></script>
   <link rel="top" title="test 0 documentation" href="#" />
<script>
<!-- ここにanalyticsタグ -->
</script>

 </head>

ヘッダの最後にスクリプトタグが書かれてますね。