site_logo
お問い合わせはこちら

ページのカスタマイズ方法

Sparrowではページ構造をカスタマイズすることができます。カスタマイズすることで、より自分が使いやすい編集画面にしたり、表示されるページの見た目を自分好みに上書きすることができます。

このページではページ構造のカスタマイズ方法を解説します。

カスタマイズ例

Sparrowのソースコードを上書きすることで多岐にわたるカスタマイズが可能です。以下がその一例です。

カスタマイズ例
  • ページを表示するときに使われるHTMLファイルを自分が作成したHTMLファイルに差し替える。
  • エディタで表示されるブロックの順番を入れ替える。
  • 独自に実装したブロックをエディタに加える。
  • 使用頻度の少ないブロックをエディタから削除する。
  • 不要なフィールドを削除する。(サムネイルを使用する予定がない場合はthumbnailフィールドを削除するなど。)
  • 「関連記事」の設定を必須にして、関連記事の登録漏れを防ぐ。
  • 編集画面のタブの順番を入れ替える。

カスタマイズできるページ

カスマイズできるページは以下の通りです。括弧内はそのページに対応するモデル名です。

カスタム可能なページ
  • トップページ(HomeIndexPage)
  • 固定ページ(HomeFixedPage)
  • 記事一覧ページ(ArticlesIndexPage)
  • 記事詳細ページ(ArticlesDetailPage)

基本構造について

記事詳細ページを例にして、Sparrowのページモデルの基本構造を説明します。

記事詳細ページに対応するモデルはArticlesDetailPageですが、このモデルは以下のように定義されています。

sparrow/articles/models.py
ArticlesDetail = import_model(
    getattr(settings, "SPARROW_ARTICLES_DETAIL_MODEL", AbstractArticlesDetail)
)

class ArticlesDetailPage(ArticlesDetail, Page):
    """記事詳細ページ."""

    template = ArticlesDetail.template

    class Meta:
        verbose_name = ArticlesDetail.verbose_name
        verbose_name_plural = ArticlesDetail.verbose_name_plural

ArticlesDetailPageAbstractArticlesDetail モデルを継承しており記事詳細ページの実態はAbstractArticlesDetailの中で定義されています。

カスタマイズしたい場合は、自分でAbstractArticlesDetailに対応するモデルを実装し、それを ArticlesDetailPage に継承させます。(カスタマイズ用のモデルはAbstractArticlesDetailを継承して作るのか、それとも完全にオリジナルで作るのかは自由に選択できます。)

カスタマイズ方法

カスタマイズする方法を具体的に説明します。

以下は AbstractArticlesDetail モデルのコードの一部です。

sparrow/articles/abstracts.py
class AbstractArticlesDetail(models.Model):
    """ArticlesDetailPage 抽象モデル."""

    # ページ設定
    template = "sparrowarticles/detail.html"
    parent_page_types = ["sparrowarticles.ArticlesIndexPage"]
    subpage_types = []

    # フィールド
    post_date = models.DateField("投稿日")
    ...

template = "sparrowarticles/detail.html" の部分で記事詳細ページを表示する際に使用するファイルを指定していたり、 post_date = ... の部分でこのページが持つフィールドを定義しています。

例えば、「テンプレートファイルは自分で作成したdetail.htmlを使用する」というカスタマイズをしたかったとします。

その場合、まずは AbstractArticlesDetail に対応するカスタマイズ用モデルを作成します。Djangoプロジェクト内に適当なアプリを作り、その中のmodels.pyに作成します。今回は sparrowoverrides というアプリを作ると仮定します。

sparrowoverrides/models.py
from sparrow.articles.abstracts import AbstractArticlesDetail


# AbstractArticlesDetailを継承してカスタムモデルを作る例
class CustomAbstractArticlesDetail(AbstractArticlesDetail):
    """記事詳細ページ用のカスタムモデル"""

    # 使用するテンプレートファイルの変更
    template = "sparrowoverrides/detail.html"

    class Meta:
        # abstract = True は必須
        abstract = True

上記のように template に使用するファイルを指定します。

続いて、Djangoプロジェクトの設定ファイルでカスタムモデルを登録します。

settings/base.py
# 記事詳細ページで使用するカスタムモデルを登録
SPARROW_ARTICLES_DETAIL_MODEL = "sparrowoverrides.models.CustomAbstractArticlesDetail"


# その他のページに対応する変数は以下の通り
SPARROW_HOME_INDEX_MODEL =  #  トップページ
SPARROW_HOME_FIXED_MODEL =  #  固定ページ
SPARROW_ARTICLES_INDEX_MODEL =  # 記事一覧ページ

また、設定ファイルに MIGRATION_MODULES の設定の追記します。これは、マイグレーションファイルの作成場所を定義するものです。

settings/base.py
MIGRATION_MODULES = {
    # 以下、必要なものを定義する
    'sparrowarticles': 'sparrowoverrides.migrations.articles',
    'sparrowsitesettings': 'sparrowoverrides.migrations.sitesettings',
    'sparrowhome': 'sparrowoverrides.migrations.home',
    'sparrowcommon': 'sparrowoverrides.migrations.common',
}

なお、マイグレーションファイルの格納先は自分で作成しておく必要があります。今回の場合は sparrowoverrides/migrations/articles フォルダを作成します。また、その中には __init__.py も作成する必要があります。

ここまで出来たら、マイグレーションファイルの作成とマイグレート処理を実行します。

$ python manage.py makemigrations
$ python manage.py migrate

マイグレートが実行完了したら、カスタムモデルの使用が開始されます。

おすすめ記事

thumbnail
2023/8/12

見た目のカスタマイズ

thumbnail
2023/8/4

記事の追加方法

thumbnail
2023/8/2

ブロックのカスタマイズ方法