Mezzanine の
[TOC]
参考サイト
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
へ値を追加する 方法が 記載されています。
テーマを 作成しようと 思う 背景
個人的な
Mezzanine の
デフォルトテンプレートが 微妙
プレーンだからこれが いい 人も いると 思います。 無料の
テーマが 少なすぎ、 且つ、 有料テーマも 存在するが、 お金を 払う 気持ちには なれない。
Bootstrap 自体の無料テーマは たくさんあるので、 それを 元に 作成したらいいのではないかと 考えました。
テーマ作成の 方針
テーマ作成の
Mezzanine は
Bootstrap を 使用しているので、 巷に 転がる フリーテーマ が 使える。 それを 拝借して 作成する。 個人的に
Blog 書く ための テンプレートが あればよい。 ポートフィリオ 等は 現状は 不要なので、 1.
を前提に 置きつつ、 Blog の テンプレートのみ 作成する。
テーマ作成の 流れ
Web 上で、
流用元の BootStrap テーマを 探す。
私は、clean-blog を 使用する ことにしました。 ローカル PC で
Mezzanine プロジェクトを 作成。 既存の
テーマを Mezzanine INSTALLED_APPS 配下に 配置。
既存のテーマを 雛形と して 使用します。
私は、mezzanine-themes/flat/を クローンして、 INSTALLED_APPS 配下に コピーして 雛形と しました。 がりがり
修正して、 動作確認。 INSTALLED_APPS 配下の
修正した テーマを 構成管理に チェックイン。
作成して わかった こと
1. テンプレートの 構成
わかったclean_blog/templates
配下の
1.1 clean_blog/templates ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | accounts | アカウント関連テンプレート |
2 | base.html | テーマの規定テンプレートHTML |
3 | blog | ブログ関連のテンプレートディレクトリ |
4 | generic | コメント関連のテンプレートディレクトリ |
5 | includes | base.htmlから使用されるパーツ類の格納ディレクトリ |
6 | index.html | デフォルト設定時のHOME画面テンプレート |
7 | pages | ブログ以外のページ類のテンプレートディレクトリ |
8 | search_results.html | 検索機能の検索結果表示テンプレート |
補足
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 ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | account_form.html | アカウント 関連画面の規定テンプレート |
2 | account_login.html | ログイン画面 テンプレート |
3 | account_password_reset.html | パスワード再設定画面 テンプレート |
4 | account_profile.html | プロフィール レンプレート |
5 | account_profile_update.html | プロフィール変更 レンプレート |
6 | account_signup.html | アカウント登録テンプレート |
7 | includes | 他の画面に表示するアカウント関連画面へのリンク部品 |
補足
Public User Accounts — Mezzanine 4.2.3 documentation にmezzanine.accounts
で
- settings.py
INSTALLED_APPS = ( ... "mezzanine.accounts", # "mezzanine.mobile", )
mezzanine.accounts
を使用すると、 index.html に 以下のような ボタンが 表示されます。
Sign Up
を押すと、 アカウントの 登録が できるのですが、 この アカウントには、 Blog の staff 権限は 付与されません。
コメントを付与、 権限が 必要な ページを 閲覧できるようになります。 1
1.1.1.1 clean_blog/templates/accounts/includes ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | user_panel.html | mezzanine/user_panel.html で使われています。 |
2 | user_panel_nav.html | こちらは参照箇所を見つけられませんでした。用途不明 |
他の画面に
1.1.2 clean_blog/templates ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | blog_post_detail.html | ブログ記事詳細ページテンプレート |
2 | blog_post_list.html | ブログ記事一覧ページテンプレート |
3 | includes | ブログページの部品類のディレクトリ |
補足
Blog ページは
使用する ため、 この あたり ページは 編集を 行いました。 デフォルトだと、
blog_post_detail.html
はblog_post_list.html
を継承していますが、 base.html
を継承するように 修正しました。 2
1.1.2.1 clean_blog/templates/blog/includes ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | filter_panel.html | ブログ記事ページ右側バナー |
補足
ブログページ右側の
1.1.3 clean_blog/templates/generic ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | comments.html | コメント部品テンプレート |
2 | includes | comments.htmlから呼び出される部品類 |
補足
コメント関連のcomments.html
から
1.1.3.1 clean_blog/templates/generic/includes ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | comment.html | 通常のコメントを表示する部品 |
2 | comment_form.html | Mezzanine 4.2.3 では削除されていました。 |
3 | comments.html | スレッドコメントを表示する部品 |
4 | disqus_comments.html | disqus のコメントを表示する部品 |
5 | disqus_counts.html | discus のコメント数を表示する部品 |
6 | disqus_sso.html | disqus_comments.html で呼び出されている disqus_sso_script タグで使用している HTML |
7 | rating.html | 評価入力欄を表示する部品 |
補足
テーマ適用後に
comment 送信時の ボタンが 大きくなったので、 ボタン部の 大きさを 小さくしました。
現在 discus を使用している ため 使って おりません。 comment_form.html は
Mezzanine 4.2.3 では 削除されていました。
このあたりの 作りは Mezzanine 3 から Mezzanine4 で 多少変わっているかもしれません。
1.1.4 clean_blog/templates/includes ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | editable_form.html | 投稿権限のあるユーザーがログイン状態でブログ詳細を表示すると出てくる編集リンクです。 |
2 | editable_toolbar.html | 投稿権限のあるユーザーがログイン状態でブログ詳細を表示すると出てくる左上のツールバーです。 |
3 | form_errors.html | Form 検証でエラー時に表示されるメッセージ表示用のテンプレートです。 |
4 | pagination.html | ブログリストページのページ送りリンクです。 |
5 | user_panel.html | 右メニューのユーザー情報表示をしている部品です。 |
6 | footer_scripts.html | フッター部のJavascript の読み込み部品です。Google Analytics タグが記載されています。 |
7 | form_fields.html | 問い合わせページの各inputフィールド出力テンプレート |
8 | search_form.html | 検索フォームテンプレート |
Page で
テンプレート内で、
1.1.5 clean_blog/templates/pages ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | form.html | 問い合わせフォームテンプレート(form_fields.htmlを使用してます。) |
2 | gallery.html | ポートフィリオページのテンプレート |
3 | index.html | Page を HOME として割り当てた場合使用されるテンプレートです。 |
4 | menus | 画面右上のメニュー部の部品類が格納されています。 |
5 | page.html | 各ページ の規定テンプレートです。 |
6 | richtextpage.html | Aboutページ等のテンプレート |
補足
Blog 以外の
gallery.html
は
この
1.1.5.1 clean_blog/templates/pages/menus ディレクトリ
NO | ファイル&ディレクトリ名 | 説明 |
---|---|---|
1 | admin.html | .... |
2 | breadcrumb.html | パンくずリストのテンプレート |
3 | dropdown.html | ヘッダー部の子ページ表示用のdropdownリスト部品 |
4 | footer.html | 画面下の最近の投稿欄の部品 |
5 | footer_sns_link.html | 新規作成 |
6 | footer_tree.html | … |
7 | mobile.html | … |
8 | primary.html | … |
9 | tree.html | … |
補足
Page で
footer_sns_link.html
は
- 参考画像
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 だと、'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 部の
原因
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
と
description="Twitter account name SNS link of footer", editable=True,
テーマ作成当時の 課題と 思っていた こと と 現時点での 状況 (2017/12/13)
Google Adsense が消えたので 追加する。
settings.py にCLEAN_BLOG_GOOGLE_ADS_CLIENT_ID
、CLEAN_BLOG_GOOGLE_ADS_SLOT_ID
を追加すると、 Blog に Google Adsense が 表示されるようにしました。 Github 上でのフォルダ構成 と して Mezzanine 含みで 作成した ほうが よいのか、 theme ディレクトリのみが よいのかわからない。
Mezzanine を含まない、 通常の django application と して 作成して 問題ありません。
普通にpipy
のライブラリと して 登録が できます。 3 使うかもしれないページを きちんと 実装する。
不要なページを 削除しました。 index.html
は設定変更すると 表示されますが、 基本的に 使っていないので、 そのまま 未修正で 放置しています。 ADMIN で投稿後の、 確認時に やたら、 JavaScript エラーが 発生する。
これは、clean blog の Bootstrap が 求める JQuery の version が Mezzanine が 使用する JQeury の version と 互換性が ないため 発生していました。 ADMIN 画面側は エラーは 出るが 使える 状態 なので、 割り 切って 使用しています。
テーマ作成後に テンプレートに 追加した 機能 (2017/12/13)
JSON-LD 形式の
構造化データを 埋め 込んだ
以下の記事に 記載の 内容を 実施して、 JSON-LD 形式の 構造化データを 埋め込みました。
Mezzanine にJSON-LD 形式の 構造化データ を 埋め込む | Monotalk 検索ボックス表示用の
構造化データを 埋め 込んだ
現在、一度も 表示された ところを 見たことが ありませんが、 検索ボックス表示用の 構造化データを 埋め込みました。
Mezzanine schema.org を使って Google の 検索結果に サイトリンク検索ボックスを 表示させようとする | Monotalk critical CSS を
出力する ライブラリを 組み込んだ
Django-critical という critical CSS を 出力する ライブラリを 組み込みました。
テーマがDjango-critical に 依存してしまいましたが、 Page Speed Insights の スコアは 向上しました。
Django/Mezzanine Template にcritical CSS 組み 込む 思索と 施作 2 | Monotalk
長くなりました。
以上です。
コメント