Mezzanineのテーマを作成してみました。


Mezzanine のテーマを作成してみました。実施したことを備忘として、メモします。


参考サイト


テーマを作成しようと思う背景

個人的なテーマ作成の背景は以下の2つです。

  • Mezzanine のデフォルトテンプレートが微妙
    プレーンだからこれがいい人もいると思います。

  • 無料のテーマが少なすぎ、且つ、有料テーマも存在するが、お金を払う気持ちにはなれない。
    Bootstrap 自体の無料テーマはたくさんあるので、それを元に作成したらいいのではないかと考えました。


テーマ作成の方針

テーマ作成の方針は以下の通りです。

  1. Mezzanine は Bootstrap を使用しているので、巷に転がる フリーテーマ が使える。それを拝借して作成する。

  2. 個人的に Blog 書くためのテンプレートがあればよい。ポートフィリオ 等は現状は不要なので、1. を前提に置きつつ、Blog の テンプレートのみ作成する。


テーマ作成の流れ

  1. Web 上で、流用元の BootStrap テーマを探す。
    私は、clean-blog を使用することにしました。

  2. ローカル PC で Mezzanine プロジェクトを作成。

  3. 既存のテーマを Mezzanine INSTALLED_APPS 配下に配置。
    既存のテーマを雛形として使用します。
    私は、mezzanine-themes/flat/をクローンして、INSTALLED_APPS 配下にコピーして雛形としました。

  4. がりがり修正して、動作確認。

  5. INSTALLED_APPS 配下の修正したテーマを構成管理にチェックイン。


作成してわかったこと

1. テンプレートの構成

わかった範囲のみですが、clean_blog/templates 配下のファイルについて、説明を記載します。


1.1 clean_blog/templates ディレクトリ

NOファイル&ディレクトリ名説明
1accountsアカウント関連テンプレート
2base.htmlテーマの規定テンプレートHTML
3blogブログ関連のテンプレートディレクトリ
4genericコメント関連のテンプレートディレクトリ
5includesbase.htmlから使用されるパーツ類の格納ディレクトリ
6index.htmlデフォルト設定時のHOME画面テンプレート
7pagesブログ以外のページ類のテンプレートディレクトリ
8search_results.html検索機能の検索結果表示テンプレート

補足

  • base.html について
    pages 配下の richtextpage.html や、blog_post_list.htmlblog_post_detail.html 等のページの規定テンプレート HTML になります。
    テーマ作成時は必ず、編集を加えるファイルになるかと思います。

  • index.html について
    デフォルト設定でホーム画面として使用されるテンプレートです。
    自分は、Mezzanine - プロジェクトの新規作成 | にゃんだふる日記改に記載の方法で、Blog テンプレートを HOME としているため、編集しておりません。
    リンク先のページが 404 となっているため、Blog テンプレートを HOME にする方法を記載します。
    mezzanine/urls.py at master · stephenmcd/mezzanine を確認すると、デフォルトでは、index.html が HOME として使用される設定になっています。

      url("^$", direct_to_template, {"template": "index.html"}, name="home"),
    
    上記記述をコメントアウトして、下部にある
    # url("^$", blog_views.blog_post_list, name="home"),
    
    のコメントアウトを解除すると、Blog テンプレート を HOME に設定できます。
    NOTE: Don't forget to import the view function too! と記載があり、import 文を忘れるとエラーになります。


1.1.1 clean_blog/templates/accounts ディレクトリ

NOファイル&ディレクトリ名説明
1account_form.htmlアカウント 関連画面の規定テンプレート
2account_login.htmlログイン画面 テンプレート
3account_password_reset.htmlパスワード再設定画面 テンプレート
4account_profile.htmlプロフィール レンプレート
5account_profile_update.htmlプロフィール変更 レンプレート
6account_signup.htmlアカウント登録テンプレート
7includes他の画面に表示するアカウント関連画面へのリンク部品

補足

Public User Accounts — Mezzanine 4.2.3 documentation に記載がある mezzanine.accounts で使用するテンプレートになります。デフォルトでは OFF になっており、使用するには、settings.py の INSTALL_APPS の コメントを解除する必要があります。

  • settings.py
    INSTALLED_APPS = (
        ...
        "mezzanine.accounts",
        # "mezzanine.mobile",
    )
    
    mezzanine.accounts を 使用すると、index.html に以下のようなボタンが表示されます。
    "Login or Sign Up"
    Sign Up を押すと、アカウントの登録ができるのですが、このアカウントには、Blog の staff 権限は付与されません。
    コメントを付与、権限が必要なページを閲覧できるようになります。1

1.1.1.1 clean_blog/templates/accounts/includes ディレクトリ

NOファイル&ディレクトリ名説明
1user_panel.htmlmezzanine/user_panel.html で使われています。
2user_panel_nav.htmlこちらは参照箇所を見つけられませんでした。用途不明

他の画面に表示するアカウント関連画面へのリンク部品 かと思います。自分は上層ディレクトリごと削除しました。


1.1.2 clean_blog/templates ディレクトリ

NOファイル&ディレクトリ名説明
1blog_post_detail.htmlブログ記事詳細ページテンプレート
2blog_post_list.htmlブログ記事一覧ページテンプレート
3includesブログページの部品類のディレクトリ

補足

  • Blog ページは使用するため、このあたりページは編集を行いました。

  • デフォルトだと、blog_post_detail.htmlblog_post_list.html を継承していますが、base.html を継承するように修正しました。2


1.1.2.1 clean_blog/templates/blog/includes ディレクトリ

NOファイル&ディレクトリ名説明
1filter_panel.htmlブログ記事ページ右側バナー

補足

ブログページ右側の[最近の投稿]、[カテゴリ表示]部の部品になります。


1.1.3 clean_blog/templates/generic ディレクトリ

NOファイル&ディレクトリ名説明
1comments.htmlコメント部品テンプレート
2includescomments.htmlから呼び出される部品類

補足

コメント関連の部品類は、comments.html から includes ディレクトリ内の部品が呼び出される作りになっています。


1.1.3.1 clean_blog/templates/generic/includes ディレクトリ

NOファイル&ディレクトリ名説明
1comment.html通常のコメントを表示する部品
2comment_form.htmlMezzanine 4.2.3 では削除されていました。
3comments.htmlスレッドコメントを表示する部品
4disqus_comments.htmldisqus のコメントを表示する部品
5disqus_counts.htmldiscus のコメント数を表示する部品
6disqus_sso.htmldisqus_comments.html で呼び出されている disqus_sso_script タグで使用している HTML
7rating.html評価入力欄を表示する部品

補足

  1. テーマ適用後に comment 送信時のボタンが大きくなったので、ボタン部の大きさを小さくしました。
    現在 discus を使用しているため使っておりません。

  2. comment_form.html は Mezzanine 4.2.3 では削除されていました。
    このあたりの作りは Mezzanine 3 から Mezzanine4 で多少変わっているかもしれません。


1.1.4 clean_blog/templates/includes ディレクトリ

NOファイル&ディレクトリ名説明
1editable_form.html投稿権限のあるユーザーがログイン状態でブログ詳細を表示すると出てくる編集リンクです。
2editable_toolbar.html投稿権限のあるユーザーがログイン状態でブログ詳細を表示すると出てくる左上のツールバーです。
3form_errors.htmlForm 検証でエラー時に表示されるメッセージ表示用のテンプレートです。
4pagination.htmlブログリストページのページ送りリンクです。
5user_panel.html右メニューのユーザー情報表示をしている部品です。
6footer_scripts.htmlフッター部のJavascript の読み込み部品です。Google Analytics タグが記載されています。
7form_fields.html問い合わせページの各inputフィールド出力テンプレート
8search_form.html検索フォームテンプレート

Page で使用している parts 類の格納ディレクトリになります。
テンプレート内で、カスタムタグが幾つか呼び出されていますが、カスタムタグのテンプレート類がこのディレクトリに格納されています。


1.1.5 clean_blog/templates/pages ディレクトリ

NOファイル&ディレクトリ名説明
1form.html問い合わせフォームテンプレート(form_fields.htmlを使用してます。)
2gallery.htmlポートフィリオページのテンプレート
3index.htmlPage を HOME として割り当てた場合使用されるテンプレートです。
4menus画面右上のメニュー部の部品類が格納されています。
5page.html各ページ の規定テンプレートです。
6richtextpage.htmlAboutページ等のテンプレート

補足

Blog 以外のページのテンプレートが格納されています。
gallery.html は flat テーマに含まれるテンプレートで、Mezzanine デフォルトテンプレートには含まれていません。
このあたりは Blog ページ以外のページを作成する際は修正する必要があります。


1.1.5.1 clean_blog/templates/pages/menus ディレクトリ

NOファイル&ディレクトリ名説明
1admin.html....
2breadcrumb.htmlパンくずリストのテンプレート
3dropdown.htmlヘッダー部の子ページ表示用のdropdownリスト部品
4footer.html画面下の最近の投稿欄の部品
5footer_sns_link.html新規作成
6footer_tree.html
7mobile.html
8primary.html
9tree.html

補足

Page で使用している parts 類の格納ディレクトリになります。
footer_sns_link.html は clean_blog の footer 部の sns リンク出力用に作成しました。

  • 参考画像
    Footer SNS Link

2. MezzanineのjQueryのVersionでエラーが発生する

clean_blog のテンプレートをコピーして、画面表示をしたところ、以下のエラーが発生しました。

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

  • エラー原因
    Bootstrapの JavaScript に対して JQuery の Version が古い場合出力されるエラーになります。
    base.html 内に 以下の記述がありますが、これで読み込まれる JQuery の Version が Bootstrap と互換性がないようです。
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>

Configuration — Mezzanine 4.0.1 documentationには、
Default: 'jquery-1.7.2.min.js' だという記載があり、これだと確かに 古すぎるということになります。

  • 対処
    デフォルトの読み込み記述を以下の記述に変更し、clean_blog の jquery を使用するようにしました。
    <script src="{% static "js/jquery.js" %}"></script>
    
2.1 補足 (2017/07/17)

Mezzanine 4.2.3 だと、Default: 'jquery-1.8.3.min.js' になっています。
Configuration — Mezzanine 4.2.3 documentation
管理画面では、以下記載を別途しているところがあります。

<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>

そちらにも、

<script src="{% static "js/jquery.js" %}"></script>
を書くかどうか悩みましたが、settings.py で、読み込むjquery の version を指定することで、対処しました。

  • settings.py
    JQUERY_FILENAME = "jquery-1.12.4.min.js"
    
2.2 補足 (2017/12/12)

JQUERY_FILENAME = "jquery-1.12.4.min.js"
の記載だと、Site側からの投稿時に、エディターウィンドウが出力されずの記述に戻しました。
デフォルトでも、JavaScript でエラーはでるのですが、オペレーションはできる状態になります。


3. テーマ側で設定値を追加したが、template HTML から参照できなかった。

footer 部の sns リンクをアカウント設定した場合のみ表示するようにしたかったのですが、新しく設定した設定値が template HTML から参照できませんでした。

  • 原因
    TEMPLATE_ACCESSIBLE_SETTINGSに設定値を登録しないと、template HTML からは参照できないようです。
    以下、ドキュメントが参考になりました。
    Configuration — Mezzanine 4.0.1 documentation

  • 対処方法
    テーマの defaults.py 内 に TEMPLATE_ACCESSIBLE_SETTINGS を追加し、templateで使用したいキー値を設定しました。
    以下、ソースコードを添付します。

from mezzanine.conf import register_setting

###########################
# FOR CLEAN_BLOG SETTINGS #
###########################
register_setting(
    name="TEMPLATE_ACCESSIBLE_SETTINGS",
    description=("Sequence of setting names available within templates."),
    editable=False,
    default=("TWITTER_ACCOUNT_NAME",
             "FACEBOOK_USER_NAME",
             "GITHUB_USER_NAME",
             ),
    append=True,
)

register_setting(
    name="TWITTER_ACCOUNT_NAME",
    description="Twitter account name SNS link of footer",
    editable=True,
    default="",
)

register_setting(
    name="FACEBOOK_USER_NAME",
    description="Facebook user name SNS link of footer",
    editable=True,
    default="",
)

register_setting(
    name="GITHUB_USER_NAME",
    description="Github user name SNS link of footer",
    editable=True,
    default="",
)
  • 補足
    コード抜粋です。以下、append=True の記載がありますが、これを記述しないと、デフォルト設定の上書きになります。
    editable=False,
    default=("TWITTER_ACCOUNT_NAME",
             "FACEBOOK_USER_NAME",
             "GITHUB_USER_NAME",
             ),
    append=True,

また、各設定値に対して、editable=True とすることで、ADMIN 画面からの編集が可能になります。

    description="Twitter account name SNS link of footer",
    editable=True,

テーマ作成当時の課題と思っていたこと と 現時点での状況 (2017/12/13)

  1. Google Adsense が消えたので追加する。
    settings.py に CLEAN_BLOG_GOOGLE_ADS_CLIENT_IDCLEAN_BLOG_GOOGLE_ADS_SLOT_ID を追加すると、Blog に Google Adsense が表示されるようにしました。

  2. Github 上でのフォルダ構成 として Mezzanine 含みで作成したほうがよいのか、theme ディレクトリのみがよいのかわからない。
    Mezzanine を含まない、通常の django application として作成して問題ありません。
    普通に pipy のライブラリとして登録ができます。3

  3. 使うかもしれないページをきちんと実装する。
    不要なページを削除しました。index.html は設定変更すると表示されますが、基本的に使っていないので、そのまま未修正で放置しています。

  4. ADMIN で投稿後の、確認時にやたら、JavaScript エラーが発生する。
    これは、clean blog の Bootstrap が 求める JQuery の version が Mezzanine が使用する JQeury の version と 互換性がないため発生していました。ADMIN 画面側はエラーは出るが使える状態 なので、割り切って使用しています。

テーマ作成後にテンプレートに追加した機能 (2017/12/13)

  1. JSON-LD 形式の構造化データを埋め込んだ
    以下の記事に記載の内容を実施して、JSON-LD 形式の構造化データを埋め込みました。
    Mezzanine に JSON-LD 形式の構造化データ を埋め込む | Monotalk

  2. 検索ボックス表示用の構造化データを埋め込んだ
    現在、一度も表示されたところを見たことがありませんが、検索ボックス表示用の構造化データを埋め込みました。
    Mezzanine schema.org を使って Google の検索結果にサイトリンク検索ボックスを表示させようとする | Monotalk

  3. critical CSS を 出力する ライブラリを組み込んだ
    Django-critical という critical CSS を出力する ライブラリを組み込みました。
    テーマが Django-critical に依存してしまいましたが、Page Speed Insights のスコアは向上しました。
    Django/Mezzanine Template に critical CSS 組み込む思索と施作 2 | Monotalk

長くなりました。
以上です。


  1. COMMENTS_ACCOUNT_REQUIRED を True にすると、コメントを投稿するのにログインが必須となります。
    自分は特にこの機能は使用しないため、accounts ディレクトリごと削除しました。 

  2. flat テーマの blog_post_detail.html が修正当時 少しバグっていたようで表示が変になっていためです。デフォルトテンプレートを元に編集したほうが、このあたりはわかりやすいかもしれません。 

  3. 個人で使っているだけなのですることはないと思います。 

コメント