コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
キーテイクアウト
記事
ソース
複雑なデータベースモデルにDjango Adminを使用できますか？
ホームページ テクノロジー周辺機器 IT業界 Django管理者をBootstrapで再設計してカスタマイズする方法

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

Lisa Kudrow
Lisa Kudrow
Feb 14, 2025 am 08:52 AM

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

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

キーテイクアウト

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

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

それでは、なぜわざわざ？
管理者のルックアンドフィールをハッキングする理由Django管理者をBootstrapで再設計してカスタマイズする方法
ただし、統合をさらに一歩進める正当な理由はいくつかあります：
  • ブランディング：「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管理者をBootstrapで再設計してカスタマイズする方法メインサイトに使用しているベーステンプレートは、他の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><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> 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</span> 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</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</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. タイトルブロックを利用して、ブラウジングされている管理ページのタイトルをカスタマイズします。
  2. ブランディングとパン粉のコンテンツを空にします。実際には必要ないので。
    3. フロントエンドテンプレートで行ったように、ボディクラスブロックを使用してBootstrapのBG-lightを設定します。
  3. extrastyleブロックを使用してブートストラップを埋め込み、一部のCSSコードを使用します。 a。さて、#header、.breadcrumbs {display：none; } 3番の修正のようなものです。しかし、ブランドとパン粉のセクションを両方の方法で無効にすることができることを知っておくと便利です。 b。管理者のDjangoのCSSとBootstrapが重複する場合、いくつかの問題が発生する可能性があるため、これらはいくつかの修正です。
    4. ボディーヘッダーとボディフッターブロックを使用して、管理コンテンツをラップします。
    5. 管理テンプレートにアクセスできるようになったので、そのスタイルシートを促進するか、メイン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。

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

管理サイトはこのようなものを回すことができます：
Django管理者をBootstrapで再設計してカスタマイズする方法
ソース

…このようなものに：

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

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

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> 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</span> 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</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
ログイン後にコピー
ログイン後にコピー
内訳

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

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

ソース

Django管理者をBootstrapで再設計してカスタマイズする方法 Bootstrapと同じように、Django管理サイトは独自のjQueryの束も出荷しますが、幸いなことに、Djangoの開発者はこれを考え、ユーザーがサプライされたスクリプトやライブラリとの競合を避けるために、DjangoのjQueryはDjango.jqueryと名付けられています。だから私たちはあなた自身のコピーを（私たちがやったように）安全に含めることができます。 メインスタイルのシートのクラス定義に夢中になるときは
注意してください。これは、管理サイトにも影響を与え、予期しない方法で機能に影響を与えます。そのイベントでは、Chrome Devtools、Firefox開発者ツール（特にページインスペクター）、Safari開発者ツールなど、ブラウザのデバッグツールで何が起こっているのかをいつでも確認できます。
デモとフルコード

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

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

wlap up

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7545
15
CakePHP チュートリアル
1381
52
Steamのアカウント名の形式は何ですか
83
11
Win11 Activation Key Permanent
57
19
NYTの接続はヒントと回答です
21
87
もっと見る
Related knowledge
2025年のトップ10のベスト無料バックリンクチェッカーツール 2025年のトップ10のベスト無料バックリンクチェッカーツール Mar 21, 2025 am 08:28 AM

ウェブサイトの構築は最初のステップに過ぎません：SEOとバックリンクの重要性 ウェブサイトを構築することは、それを貴重なマーケティング資産に変換するための最初のステップにすぎません。検索エンジンでのWebサイトの可視性を向上させ、潜在的な顧客を引き付けるために、SEO最適化を行う必要があります。バックリンクは、ウェブサイトのランキングを改善するための鍵であり、Googleや他の検索エンジンにWebサイトの権限と信頼性を示しています。 すべてのバックリンクが有益であるわけではありません：有害なリンクを特定して回避する すべてのバックリンクが有益であるわけではありません。有害なリンクはあなたのランキングに害を及ぼす可能性があります。優れた無料のバックリンクチェックツールは、ウェブサイトへのリンクのソースを監視し、有害なリンクを思い出させます。さらに、競合他社のリンク戦略を分析し、それらから学ぶこともできます。 無料のバックリンクチェックツール：SEOインテリジェンスオフィサー

GOでネットワークの脆弱性スキャナーを構築します GOでネットワークの脆弱性スキャナーを構築します Apr 01, 2025 am 08:27 AM

このGOベースのネットワーク脆弱性スキャナーは、潜在的なセキュリティの弱点を効率的に識別します。 Goの同時機能機能を速度で活用し、サービスの検出と脆弱性のマッチングが含まれます。その能力と倫理を探りましょう

CNCF ARM64パイロット：インパクトと洞察 CNCF ARM64パイロット：インパクトと洞察 Apr 15, 2025 am 08:27 AM

このパイロットプログラム、CNCF（クラウドネイティブコンピューティングファンデーション）、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。 このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します

See all articles