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

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

参考サイト

• clean-blog
  テーマの流用元とした。Bootstrap のテーマになります。

• Configuration — Mezzanine 4.0.1 documentation
  Mezzanine の TEMPLATE_ACCESSIBLE_SETTINGS の説明へのリンクです。

• Unable to register setting with defaults.py in app, it will not override Mezzanine’s default setting
  defaults.py から、TEMPLATE_ACCESSIBLE_SETTINGS へ値を追加する方法が記載されています。

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

個人的なテーマ作成の背景は以下の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 ディレクトリ

補足

• base.html について
  pages 配下の richtextpage.html や、blog_post_list.html、 blog_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 ディレクトリ

補足

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 に以下のようなボタンが表示されます。
  
  Sign Up を押すと、アカウントの登録ができるのですが、このアカウントには、Blog の staff 権限は付与されません。
  コメントを付与、権限が必要なページを閲覧できるようになります。¹

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

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

1.1.2 clean_blog/templates ディレクトリ

補足

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

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

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

補足

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

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

補足

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

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

補足

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

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

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

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

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

補足

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

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

補足

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

• 参考画像
  

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_FILENAME = "jquery-1.12.4.min.js"
  

2.2 補足 (2017/12/12)

JQUERY_FILENAME = "jquery-1.12.4.min.js"

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_ID、CLEAN_BLOG_GOOGLE_ADS_SLOT_ID を追加すると、Blog に Google Adsense が表示されるようにしました。

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

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

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