flask

Flask轻博客系统实战开发(9) 一后台基础模板设计

发表于 2020年04月11日阅读 4170 评论 0

flask默认的模板引擎是jinja2，jinja2模板引擎在python界还是比较有名气的，类似与java中的velocity模板引擎，jinja2模板的设计思想与djiango中的模板引擎很像，在此基础上融入了很多扩展功能，并且自己可以定义过滤器，来增强模板引擎的功能。

flask博客后台模板目录

templates/
└── admin
    ├── access_log.html
    ├── add_admin.html
    ├── articles.html
    ├── category.html
    ├── categorys.html
    ├── common
    │   ├── alert.html
    │   ├── base.html
    │   ├── footer.html
    │   ├── header.html
    │   └── sidebar.html
    ├── edit_article.html
    ├── edit_user.html
    ├── errors
    │   ├── 403.html
    │   ├── 404.html
    │   └── 500.html
    ├── image_hosting.html
    ├── index.html
    ├── invit_codes.html
    ├── login.html
    ├── macros
    │   └── _patination.html
    ├── online_tool.html
    ├── online_tools.html
    ├── password.html
    ├── recommend.html
    ├── recommends.html
    ├── settings.html
    ├── tags.html
    ├── users.html
    └── write.html

common 定义了公共的基础模板
macros 定义了模板宏定义
errors 定义了错误处理页面

common目录下base.html

基础模板，在制作单页的时候继承自该模板

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="{{ url_for('.static', filename='img/favicon.ico')}}">

        <title>{% block title %}何三笔记{% endblock %}</title>
        {% block css %}
            <!-- Bootstrap 4.4.1 core CSS -->
            <link href="{{ url_for('.static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
            <!-- font-awesome 主题文件 -->
            <link href="{{url_for('.static',filename='css/font-awesome.min.css')}}"
                  rel="stylesheet">
            <meta name="theme-color" content="#563d7c">
            <!-- 个性化主题文件 -->
            <link href="{{ url_for('admin.static', filename='css/admin.css')}}" rel="stylesheet">
            <link href="{{ url_for('admin.static',filename='css/toastr.min.css')}}" rel="stylesheet">
        {% endblock %}

    </head>

    <body class="layout-boxed">
        {% block body %}
        <div class="wrapper">
            {% include 'admin/common/header.html' %}
            <div class="container-fluid">
                <div class="row">
                    {% include 'admin/common/sidebar.html' %}
                    <main role="main" class="col-lg-10 ml-sm-auto px-4 bg-light">
                        {% block content %}{% endblock %}
                    </main><!--/main-->
                </div><!--/row-->
            </div><!--/.container-->
        </div>
        {% endblock %}
        <!--js合集-->
        {% block js %}
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="{{ url_for('admin.static',filename='js/jquery.min.js') }}"></script>
            <script src="{{ url_for('admin.static',filename='js/popper.min.js') }}"></script>
            <script src="{{ url_for('admin.static',filename='js/bootstrap.min.js') }}"></script>
            <script src="{{ url_for('admin.static',filename='js/toastr.min.js')}}"></script>
            <script src="{{ url_for('admin.static',filename='layer/layer.js')}}"></script>
            <!-- 个性化 js 文件 -->
            <script src="{{ url_for('admin.static', filename='js/admin.js')}}"></script>
            {% include 'admin/common/alert.html' %}
        {% endblock %}
    </body>
</html>

common目录下alert.html模板

flask 中flash消息提示

<!-- flash提示 -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
                {% if message['success'] %}
                    <script>toastr.success("{{ message['success'] }}");</script>
                {% elif message['error'] %}
                    <script>toastr.error("{{ message['error'] }}");</script>
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endwith %}
<!-- flash提示 end -->

common目录下header.html

头部共用模板，包含了基础css样式的引入

<nav class="navbar p-0 border-bottom">
    <span class="navbar-brand col-sm-3 col-md-2 mr-0 text-center ">H3BLOG</span>
    <a class="navbar-inline" href="{{url_for('main.index')}}" target="_blank">首页</a>
    <ul class="navbar-nav px-3 border-left">
      <li class="nav-item text-nowrap">
        <a class="nav-link " href="{{url_for('admin.logout')}}">退出</a>
      </li>
    </ul>
  </nav>

common目录下footer.html

页面底部共用模板

<hr>

<footer>
    <p class="pull-right"><a href="#">回到顶部</a></p>
    <p>Powered by <a href="http://www.os373.cn">Pyblog</a></p>
</footer>

common目录下sidebar.html

后台侧边栏菜单

<nav id="sidebar" class="col-lg-2 d-md-block sidebar">
    <div class="sidebar-sticky">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link font-weight-bold active" href="{{url_for('admin.index')}}">
            面板 
          </a>
        </li>
      </ul>

      <h6 class="sidebar-heading d-flex px-3 pt-2  mt-1 mb-1 text-muted">
        <span>文章管理</span>
      </h6>
      <ul class="nav flex-column ml-1">
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{ url_for('admin.write') }}">
            撰写文章
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.articles')}}">
            文章列表
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.categorys')}}">
            分类列表
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.tags')}}">
            标签管理
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.recommends')}}">
            文章推荐
          </a>
        </li>
      </ul>

      <h6 class="sidebar-heading d-flex px-3 pt-2  mt-1 mb-1 text-muted ">
        <span>设置</span>
      </h6>
      <ul class="nav flex-column mb-2">
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.settings')}}">
            网站设置
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.users')}}">
            用户管理
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.online_tools')}}">
            在线工具
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.invit_codes')}}">
            邀请码
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link font-weight-bold" href="{{url_for('admin.access_logs')}}">
            抓取日志
          </a>
        </li>
      </ul>
    </div>
  </nav>

macros目录下_patination.html

分页宏定义

{% macro pagination_widget(pagination, endpoint) %}
<!-- pagination 分页 -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
            <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.page - 1, **kwargs) }}{% else %}#{% endif %}" class="page-link" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% for p in pagination.iter_pages() %}
            {% if p %}
                {% if p == pagination.page %}
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}<span class="sr-only">(current)</span></a>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>
                </li>
                {% endif %}
            {% else %}
            <li class="disabled"><a href="#">&hellip;</a></li>
            {% endif %}
        {% endfor %}
        <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
            <a class="page-link" href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.page + 1, **kwargs) }}{% else %}#{% endif %}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
<!-- end pagination 分页 -->
{% endmacro %}

版权声明：如无特殊说明，文章均为何三笔记原创，转载请注明出处

本文链接：http://www.h3blog.com/article/flask-h3blog-base-template/

flask博客后台模板目录
common目录下base.html
common目录下alert.html模板
common目录下header.html
common目录下footer.html
common目录下sidebar.html
macros目录下_patination.html

Flask轻博客系统实战开发(9) 一 后台基础模板设计