flask-admin 快速打造博客 系列三 （後臺模板修改）

時間  2019-11-09
標籤 flask admin 快速 打造 博客 系列 後臺 模板 修改 欄目 Python 简体版
原文   原文鏈接

Flask-admin 自定義後臺模板

可能有些人不喜歡原始的管理後臺，雖然看起來還挺乾淨簡練的，不是我要的樣子，能夠自定義嗎？
答案固然是能夠的。
最好是本身經過github下載flask-admin源碼，而後本身查看一下後臺的源碼走向。javascript

clipboard.png

經過這張圖，咱們也能夠了解到模板中，最底層的admin/base.html,其餘模板都是經過繼承去根據宏去改寫具體的顯示的。
admin/master.html文件裏就是直接引用base.html 沒有其餘的東西：
{% extends admin_base_template %}css

若是咱們要改寫這個後臺的模板，是否是咱們只要拿到相應的標籤就能夠改造了，標籤主要就是組件及其數據的html，說白就是wTF在後臺生成的代碼嵌到模板上，固然，你也能夠徹底改寫了，那也就沒有必要用flask-admin的意義了。
咱們在base.html 裏面看到引入兩個其餘文件：html

{% import 'admin/layout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}

layout.html文件是最關鍵的佈局文件
layout.html 主要是定義了菜單的宏：菜單的icon，菜單的遍歷顯示，菜單的擴展連接，菜單的提示信息（增刪改後的提示信息）
還有一個重要的lib.html文件是一個庫文件，預約義一些樣式和組件，也是能夠直接拿來用的。java

在base.html 能夠看到：python

{% block main_menu %}
<ul class="nav navbar-nav">
  {{ layout.menu() }}
</ul>
{% endblock %}

就是菜單直接嵌入layout.html的菜單，因此咱們能夠直接改base.html 包括layout.html 也給修改爲咱們的就是實現後臺模板的總體修改。
能夠直接在
Template目錄創建目錄admin，建立mybase.html,mylayout.html
而後註冊模板到flask-admin：jquery

admin = Admin(app, name='cleanblog', template_mode='bootstrap3', base_template='admin/mybase.html')

只須要兩步就能解決問題，其實還有一步就是你要找到一個合適的模板：
咱們能夠去https://startbootstrap.com/te... 下載一套本身以爲還能夠的bootstrap樣式，最好是bootstrap樣式的，緣由是這樣能夠減小一些修改設置樣式衝突。git

咱們分幾步進行整合github

1）尋找模板，並把文件放到static靜態目錄下：

以startbootstrap-sb-admin-2-gh-pages模板爲例：(能夠直接百度搜到)
拷貝壓縮包的三個目錄到static下：dist,js,vendorchrome

2)在template目錄創建目錄admin並新建文件 mybase.html,和mylayout.html

1.1 mylayout.html
在複製原先的代碼進行修改：flask

{% macro menu(menu_root=None) %}
  {% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
  {%- for item in menu_root %}
    {%- if item.is_category() -%}
      {% set children = item.get_children() %}
      {%- if children %}
        {% set class_name = item.get_class_name() %}
        {%- if item.is_active(admin_view) %}
        <li class="active dropdown">
        {% else -%}
        <li class="dropdown">
        {%- endif %}
          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
            {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}{{ item.name }}<b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
          {%- for child in children -%}
            {% set class_name = child.get_class_name() %}
            {%- if child.is_active(admin_view) %}
            <li class="active{% if class_name %} {{class_name}}{% endif %}">
            {% else %}
            <li{% if class_name %} class="{{class_name}}"{% endif %}>
            {%- endif %}
              <a href="{{ child.get_url() }}"{% if child.target %} target="{{ child.target }}"{% endif %}>{{ menu_icon(child) }}{{ child.name }}</a>
            </li>
          {%- endfor %}
          </ul>
        </li>
      {% endif %}
    {%- else %}
      {%- if item.is_accessible() and item.is_visible() -%}
        {% set class_name = item.get_class_name() %}
        {%- if item.is_active(admin_view) %}
        <li class="active{% if class_name %} {{class_name}}{% endif %}">
        {%- else %}
        <li{% if class_name %} class="{{class_name}}"{% endif %}>
        {%- endif %}
          <a href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>{{ menu_icon(item) }}{{ item.name }}</a>
        </li>
      {%- endif -%}
    {% endif -%}
  {% endfor %}
{% endmacro %}

修改成：

{% macro menu(menu_root=None) %}
  {% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
  {%- for item in menu_root %}
    {%- if item.is_category() -%}
      {% set children = item.get_children() %}
      {%- if children %}
        {% set class_name = item.get_class_name() %}
        {%- if item.is_active(admin_view) %}
        <li class="active">
        {% else -%}
        <li>
        {%- endif %}
        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> {{ item.name }}<span class="fa arrow"></span></a>
        
        <ul class="nav nav-second-level">
          {%- for child in children -%}
            {% set class_name = child.get_class_name() %}
            {%- if child.is_active(admin_view) %}
            <li class="active">
            {% else %}
            <li>
            {%- endif %}
           <a href="{{ child.get_url() }}" {% if child.target %} target="{{ child.target }}"{% endif %}>{{ menu_icon(child) }}{{ child.name }}</a>
            </li>
          {%- endfor %}
          </ul>
        </li>
      {% endif %}
    {%- else %}
      {%- if item.is_accessible() and item.is_visible() -%}
        {% set class_name = item.get_class_name() %}
        {%- if item.is_active(admin_view) %}
        <li class="active{% if class_name %} {{class_name}}{% endif %}">
        {%- else %}
        <li{% if class_name %} class="{{class_name}}"{% endif %}>
        {%- endif %}
        <a href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}><i class="fa fa-dashboard fa-fw"></i> {{ menu_icon(item) }}{{ item.name }}</a>
        </li>
      {%- endif -%}
    {% endif -%}
  {% endfor %}
{% endmacro %}

主要是根據模板的菜單樣式進行修改。
修改以後修改
mybase.html 把全部應的base.html 拿過來修改：
{% block head_css %} {% endblock %}
增長

<!-- MetisMenu CSS -->
<link href="{{ url_for('static', filename='vendor/metisMenu/metisMenu.min.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ url_for('static',
filename='dist/css/sb-admin-2.css')}}" rel="stylesheet">
 <!-- Custom Fonts -->
<link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">

對於body標籤下面的代碼，所有黏貼來之模板的內容，
在菜單地方黏貼：
{% block menu_links %}
   {{ layout.menu_links() }}
{% endblock %}

在容器的地方黏貼：

<div id="page-wrapper">
 <!--
            <div class="row">
                <div class="col-lg-12">
                  <h1 class="page-header">Dashboard</h1>
                </div>
            </div>
-->
         <div class="row">
          {% block access_control %}
            {% endblock %}
         {% block messages %}
           {{ layout.messages() }}
          {% endblock %}
          {# store the jinja2 context for form_rules rendering logic #}
         {% set render_ctx = h.resolve_ctx() %}
         </div>
         <div class="row">
         {% block body %}{% endblock %}
         </div>
        </div>

最後的代碼就以下：

{% import 'admin/mylayout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}
<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}{% if admin_view.category %}{{ admin_view.category }} - {% endif %}{{ admin_view.name }} - {{ admin_view.admin.name }}{% endblock %}</title>
    {% block head_meta %}
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="AI在線 - 博客體">
        <meta name="author" content="ouyangm">
        <link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
        <link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
    {% endblock %}
    {% block head_css %}
        <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='3.3.5') }}" rel="stylesheet">
        {%if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
        <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css', v='3.3.5') }}" rel="stylesheet">
        {%endif%}
        <link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css', v='1.1.1') }}" rel="stylesheet">
          <!-- MetisMenu CSS -->
      <link href="{{ url_for('static', filename='vendor/metisMenu/metisMenu.min.css')}}" rel="stylesheet">
      <!-- Custom CSS -->
      <link href="{{ url_for('static',
      filename='dist/css/sb-admin-2.css')}}" rel="stylesheet">
       <!-- Custom Fonts -->
      <link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
        {% if admin_view.extra_css %}
          {% for css_url in admin_view.extra_css %}
            <link href="{{ css_url }}" rel="stylesheet">
          {% endfor %}
        {% endif %}
        <style>
        body {
            padding-top: 4px;
        }
        </style>
    {% endblock %}
    {% block head %}
    {% endblock %}
    {% block head_tail %}
    {% endblock %}
  </head>
  <body>
    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/index.html"> AI在線 - 博客體 </a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"> 擴展功能 </i>
                    </a>
                    <!--
                     <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    -->
                     {% block menu_links %}
                        {{ layout.menu_links() }}
                     {% endblock %}
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"> </i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">40% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Tasks</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="/admin/loginout"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                        </li>

                  {% block main_menu %}
                   {{ layout.menu() }}
                   {% endblock %}
                   <!-- /.nav-second-level
                        <li>
                            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="flot.html">Flot Charts</a>
                                </li>
                                <li>
                                    <a href="morris.html">Morris.js Charts</a>
                                </li>
                            </ul>

                        </li>
                  -->
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>






        <div id="page-wrapper">
 <!--
            <div class="row">
                <div class="col-lg-12">
                  <h1 class="page-header">Dashboard</h1>
                </div>
            </div>
-->
         <div class="row">
          {% block access_control %}
            {% endblock %}
         {% block messages %}
           {{ layout.messages() }}
          {% endblock %}
          {# store the jinja2 context for form_rules rendering logic #}
         {% set render_ctx = h.resolve_ctx() %}
         </div>
         <div class="row">
         {% block body %}{% endblock %}
         </div>
        </div>
        <!-- /#page-wrapper -->

    </div>





   {% block tail_js %}
    <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='2.1.4') }}" type="text/javascript"></script>
    <script src="{{ admin_static.url(filename='bootstrap/bootstrap3/js/bootstrap.min.js', v='3.3.5') }}" type="text/javascript"></script>
    <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.9.0') }}" type="text/javascript"></script>
    <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script>
    <!-- sb-admin-theme  -->
    <script src="{{ url_for('static', filename='vendor/metisMenu/metisMenu.min.js') }}"></script>
   <script src="{{ url_for('static', filename='dist/js/sb-admin-2.js') }}"></script>
    <!-- Metis Menu Plugin JavaScript -->
    {% if admin_view.extra_js %}
      {% for js_url in admin_view.extra_js %}
        <script src="{{ js_url }}" type="text/javascript"></script>
      {% endfor %}
    {% endif %}
    {% endblock %}

    {% block tail %}
    {% endblock %}
  </body>
</html>

展現出來的樣式：

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程