Django管理者をBootstrapで再設計してカスタマイズする方法

django管理サイトは素晴らしいです - 完全に食べられる、使いやすく、デザインで安全で、堅実です...そしてややugいものです。あなたのウェブサイトの。それを並べ替えましょう。

キーテイクアウト

ブートストラップのデザインテンプレートとレスポンシブ機能を統合することにより、Bootstrapを利用してDjango管理者の視覚的魅力とユーザーエクスペリエンスを強化します。
• Djangoのデフォルト管理テンプレートをオーバーライドすると、メインサイトとのシームレスな統合が可能になり、一貫したブランディングとナビゲーションが維持されます。
カスタマイズプロセスでは、「myproject/settings.py」の設定を変更し、テンプレートディレクトリに新しいテンプレートファイルを作成して、ブートストラップスタイルとスクリプトを組み込むことを伴います。
• 共有ナビゲーションバーやその他の共通要素をメインサイトと管理者テンプレートの両方に追加して、プラットフォーム間で統一されたユーザーインターフェイスを宣伝できます。 クラス定義を慎重に管理し、ブラウザーデバッグツールを使用して機能性が損なわれないようにすることにより、CSSの重複に関する潜在的な問題に対処します。
• 壊れていない場合…
• デフォルトのdjango管理者。 （ソース）

djangoとvue.jsのWebアプリをプロトタイプしたばかりだとします幅広いケースでは、Djangoの管理者をそのままにするために使用し、適切に設定した後にクライアントに処理することは問題ありません。結局のところ、それは完全にうまく機能し、多くの状況をカバーするために組み込みのツールで大幅にカスタマイズできます。

それでは、なぜわざわざ？

管理者のルックアンドフィールをハッキングする理由

ただし、統合をさらに一歩進める正当な理由はいくつかあります：

• ブランディング：「Django Administration」の代わりに会社の名前と色を望むことには何の問題もありません（そして、記録のために、これはDjangoのBSDライセンスに準拠しています）。 メインサイトと管理者間のシームレスな統合：共通のナビゲーションバーを持つことにより、サイトをナビゲートしながらバックオフィスの機能間を移行できるようにすることができるかもしれません。
PRETTIFIITION：管理者は大丈夫そうに見え、V2（モバイルとデスクトップの両方でうまく機能する）以来、レスポンシブWebデザインの原則を実装していますが、
• バイパス機能：管理者向けにカスタムドロップダウンメニューを作成し、実際に使用するオプションを表示し、実際には必要のないユーザーインターフェイスから非表示にすることもできます。
実用的な例
• この例については、自分自身を繰り返さないために、Djangoとvue.jsの記事でWebアプリをプロトタイプするために開始した単純な公開Webアプリケーションを再開します。 一言で言えば 2つのモデルを備えたDjangoアプリ：

フィールド名著者（リンク）、コンテンツ、スラッグを備えた

記事

著者：フィールド名とスラッグ

両方のモデルのすべてのレジストリをクエリするFrontEndと呼ばれる単一ビュー。

テンプレートと呼ばれる単一のテンプレート。
• Vue.jsの実装VUEルーターとVuexを使用して、リアクティブなスケーラブルなインターフェイスを使用しています。
• この記事でのVue.jsの統合は特に気にしません。ここで変更することはありません。
基本的なテンプレート
ソース
• djangoテンプレートは非常に用途が広く強力であり、アプリレベル（djangoサイトのコンポーネント）またはサイトレベルで作成でき、djangoに付属するテンプレート（これは私たちです。ここでやる）。

ソース

BootstrapのJavaScriptとスタイルシートにリンクする基本的なテンプレート、およびそのコンパニオンツール、JQueryとPopper。 メインサイトに使用しているベーステンプレートは、他のdjangoサイトで通常使用するものとはまったく異なります。

次に、これを管理者に統合し、両端に共有ナビゲーションバーを追加します - メインサイトとバックオフィス！

メインUIテンプレートをAdmin

と統合します 前述のように、管理者のテンプレートを含むテンプレートをオーバーライドできます。ただし、Djangoのデザインと当然のことながら、メインサイトとバックオフィスは2つの異なるシステムであり、それぞれに独自のテンプレート、スタイルシート、およびコントリブパッケージがあります。したがって、それらがほぼ同じ

と同じであっても、2つの異なるテンプレートを維持する必要があります。1つはメインUI用、もう1つは管理者です。 一般的にテンプレートのディレクトリを有効にします

最初に、ハッキングされた管理者テンプレートをベースディレクトリに保存する場所をDjangoに伝える必要があります。 se myproject/settings.pyを編集する必要があります。まず、テンプレートを一定で見つけると、これはキーを監督します： このコードをこれに変更してください：

管理テンプレートのラッピング（管理者/ベースハック）

カスタムスタイルシートを管理者に渡すか、ヘッダーを削除/交換するなど、化粧品の変更を行いたい場合は、Admin/base_Siteテンプレートを編集してこの現在のステップを完全にスキップするだけで、それと仲良くすることができます。ただし、メインサイトに含まれているかのように管理セクションを「ラップ」したい場合は、共通のヘッダーとフッターを持っている可能性がある場合は、読み続けてください。

ラッパーを配置できるように、djangoのadmin/base.htmlをテンプレート/admin/base.htmlのテンプレートディレクトリにコピーする必要があります。

コンテナセクションの周りのコードを編集します。これは、次のようになります。

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span>

これへ：

<span>'DIRS': [],
</span>

そしてそれだけです！ BodyheaderとBodyfooterブロックタグを作成しただけで、次のステップで管理者をラップするコードを挿入できるようにします。 カスタム管理テンプレート（admin/base_site hack）

をコーディングします

次に、実際のテンプレートをテンプレート/admin/base_site.htmlでコーディングします（プロジェクトのルートでディレクトリを作成する必要があります）：

内訳

ここで私たちがしていることを説明してみましょう：

<span>'DIRS': [os.path.join(BASE_DIR, 'templates')],
</span>

1. テンプレートエンジンに、admin/base_site.htmlテンプレートを「拡張」していることを伝え、その定義の一部を効果的にオーバーライドします。
タイトルブロックを利用して、ブラウジングされている管理ページのタイトルをカスタマイズします。
2. ブランディングとパン粉のコンテンツを空にします。実際には必要ないので。
フロントエンドテンプレートで行ったように、ボディクラスブロックを使用してBootstrapのBG-lightを設定します。
3. extrastyleブロックを使用してブートストラップを埋め込み、一部のCSSコードを使用します。 a。さて、#header、.breadcrumbs {display：none; } 3番の修正のようなものです。しかし、ブランドとパン粉のセクションを両方の方法で無効にすることができることを知っておくと便利です。 b。管理者のDjangoのCSSとBootstrapが重複する場合、いくつかの問題が発生する可能性があるため、これらはいくつかの修正です。
ボディーヘッダーとボディフッターブロックを使用して、管理コンテンツをラップします。
管理テンプレートにアクセスできるようになったので、そのスタイルシートを促進するか、メインUIと共有スタイルでそれを残すことができます。
5. 警告
6. 2つの異なるテンプレート（メインUIと管理者）を維持して、基本的に同じプレゼンテーションを行います。確かに、これは理想的ではありません。ソフトウェア開発の格言の1つを明示的に破壊しているためです。自分を繰り返さないでください（ドライ）。 コメントしたように、これは、Django管理者がメインUIから切り離されるように設計されているためです。そして、箱から出して考えることに何の問題もないのと同じように、それは何も悪いことではありません。しかし、はい、それは私たちにほぼ同じコンテンツを持つ2つのテンプレートを使用することを余儀なくされます。

実際には、原則として、メインUIおよび管理者からのNavbarやその他の共通要素を含むテンプレートパターンを設計し、その単一のソースからそれらを再利用できます。しかし、この時点で、そしてこの記事の目的のために、そのアプローチは少し過剰になります。とにかく、私はあなたのために植えられたアイデアを残します。 ？

共有ナビゲーションバーを作成

メインUIと管理サイトがほぼ同じように見えるので、統合をさらに進めて共通のナビゲーションエクスペリエンスを作成できます。

これがNavbarのスニペットです：

管理メニューを提示するドロップダウンメニューセクションに注目してください（詳細については、BootstrapのNavbarコンポーネントを参照してください）。 また、{user.is_authenticated％} /{％endif％}の場合は{％の場合は条件付きチェックを行い、管理メニューを表示するかどうかを決定します。

最後に、2つの異なるメインテンプレートを維持しているため、navbarのHTMLコードを両方に追加する必要があることを忘れないでください。MyApp/Templates/myApp/tempalte.html

および Templates/admin/base_site.html。

追加：管理者ログイン画面

管理サイトはこのようなものを回すことができます：

ソース

…このようなものに：

テンプルト/admin/login.htmlで次のテンプレートを作成することで、それに近い何かを達成できます。

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span>

内訳

ここで何をしているのか：

{{block.super}}タグは、テンプレートエンジンに、extrastyleのコンテンツを無効にしていないことを伝えるためにあります（テンプレート/admin/base_site.htmlテンプレートで定義したが）それにコンテンツを追加します（詳細については、テンプレート継承を参照してください）。
1. ブランディングブロックにより、「Django Administry」ヘッダーをもっと興味深いものに変更できます。
空の定義を設定することにより、head_titleブロックを取り除きます。
content_titleブロックを使用して、追加の情報を追加します。
いくつかの考慮事項

ソース

Bootstrapと同じように、Django管理サイトは独自のjQueryの束も出荷しますが、幸いなことに、Djangoの開発者はこれを考え、ユーザーがサプライされたスクリプトやライブラリとの競合を避けるために、DjangoのjQueryはDjango.jqueryと名付けられています。だから私たちはあなた自身のコピーを（私たちがやったように）安全に含めることができます。 メインスタイルのシートのクラス定義に夢中になるときは

注意してください。これは、管理サイトにも影響を与え、予期しない方法で機能に影響を与えます。そのイベントでは、Chrome Devtools、Firefox開発者ツール（特にページインスペクター）、Safari開発者ツールなど、ブラウザのデバッグツールで何が起こっているのかをいつでも確認できます。

デモとフルコード

ここで説明したこの実装は、次のようになります：

私のgithubリポジトリ、luzdealba / djangovuejsのすべてのプロジェクトコードをナビゲートできます。

wlap up

一部の人は、Djangoの管理者の外観を変更する必要はあまりないと主張するかもしれませんが、サイトのさまざまなエンドポイントをスムーズに統合することは、UX

以上がDjango管理者をBootstrapで再設計してカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。