Flask 页面布局layout_main.html

2023-12-29 17:29:41

Flask 页面布局layout_main.html? 【源码来自编程浪子的flask点餐小程序】

web/templates/common/layout_main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <link href="{{ buildStaticUrl('/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/css/style.css') }}" rel="stylesheet">
    {%block css %}{% endblock %}
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="profile-element text-center">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                        <p class="text-muted">编程浪子</p>
                    </div>
                    <div class="logo-element">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                    </div>
                </li>
                <li class="default">
                    <a href="{{ buildUrl('/') }}"><i class="fa fa-dashboard fa-lg"></i>
                        <span class="nav-label">仪表盘</span></a>
                </li>
                <li class="account">
                    <a href="{{ buildUrl('/account/index') }}"><i class="fa fa-user fa-lg"></i> <span
                            class="nav-label">账号管理</span></a>
                </li>
                <li class="food">
                    <a href="{{ buildUrl('/food/index') }}"><i class="fa fa-book fa-lg"></i> <span
                            class="nav-label">美餐管理</span></a>
                </li>
                <li class="member">
                    <a href="{{ buildUrl('/member/index') }}"><i class="fa fa-group fa-lg"></i> <span
                            class="nav-label">会员列表</span></a>
                </li>
                <li class="finance">
                    <a href="{{ buildUrl('/finance/index') }}"><i class="fa fa-rmb fa-lg"></i> <span
                            class="nav-label">财务管理</span></a>
                </li>
                <li class="stat">
                    <a href="{{ buildUrl('/stat/index') }}"><i class="fa fa-bar-chart fa-lg"></i> <span
                            class="nav-label">统计管理</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
						<span class="m-r-sm text-muted welcome-message">
                            欢迎使用编程浪子订餐管理管理后台
                        </span>
                    </li>
                    <li class="dropdown user_info">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                            <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}"/>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    姓名：{{ current_user.nickname }} <a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    手机号码: {{ current_user.mobile }}
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="link-block text-center">
                                    <a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">
                                        <i class="fa fa-lock"></i> 修改密码
                                    </a>
                                    <a class="pull-right" href="{{ buildUrl('/user/logout') }}">
                                        <i class="fa fa-sign-out"></i> 退出
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>

            </nav>
        </div>
        {% block content %}{% endblock %}
    </div>
</div>

<script src="{{ buildStaticUrl('/plugins/jquery-2.1.1.js') }}"></script>
<script src="{{ buildStaticUrl('/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/layer/layer.js') }}"></script>
<script src="{{ buildStaticUrl('/js/common.js') }}"></script>
{%block js %}{% endblock %}
</body>
</html>

这段代码是一个HTML页面的代码，用于构建一个管理后台的界面。下面是对代码中各个部分的详细介绍：

  1. <!DOCTYPE html>：声明文档类型为HTML5。
  2. <html>：HTML文档的根元素。
  3. <head>：包含了一些关于文档的元数据，如字符编码、视口设置等。
  4. <meta charset="utf-8">：指定文档的字符编码为UTF-8。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置文档的视口，使其在移动设备上能够正确显示。
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">：指定IE浏览器使用最新的渲染模式。
  7. <title>管理后台</title>：设置文档的标题为"管理后台"。
  8. <link>：引入外部样式表文件，用于设置页面的样式。
  9. <body>：HTML文档的主体部分。
  10. <div id="wrapper">：页面的主要内容区域。
  11. <nav class="navbar-default navbar-static-side" role="navigation">：导航栏部分。
  12. <div class="sidebar-collapse">：导航栏的折叠部分。
  13. <ul class="nav metismenu" id="side-menu">：导航栏的菜单列表。
  14. <li>：菜单项。
  15. <a href="{{ buildUrl('/') }}">：菜单项的链接地址。
  16. <i class="fa fa-dashboard fa-lg"></i>：菜单项的图标。
  17. <span class="nav-label">仪表盘</span>：菜单项的文本标签。
  18. {% block css %}{% endblock %}：用于在此处插入自定义的CSS样式。
  19. <div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">：页面的内容区域。
  20. <div class="row border-bottom">：页面顶部的边框行。
  21. <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">：顶部导航栏。
  22. <div class="navbar-header">：导航栏的头部。
  23. <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>：用于折叠导航栏的按钮。
  24. <ul class="nav navbar-top-links navbar-right">：导航栏右侧的链接列表。
  25. <li>：链接项。
  26. <span class="m-r-sm text-muted welcome-message">欢迎使用编程浪子订餐管理管理后台</span>：欢迎消息。
  27. <li class="dropdown user_info">：用户信息下拉菜单。
  28. <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">：用户信息下拉菜单的触发按钮。
  29. <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}">：用户头像。
  30. <ul class="dropdown-menu dropdown-messages">：用户信息下拉菜单的内容。
  31. <li>：菜单项。
  32. <div class="dropdown-messages-box">：菜单项的内容。
  33. <a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>：编辑链接。
  34. <div class="link-block text-center">：链接块。
  35. <a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">：修改密码链接。
  36. <a class="pull-right" href="{{ buildUrl('/user/logout') }}">：退出链接。
  37. <div class="hidden hidden_layout_wrap">：隐藏的布局包装器。
  38. <input name="domain" value="{{ config.APP.domain }}">：域名输入框。
  39. <input name="prefix_url" value="{{ config.UPLOAD.prefix_url }}">：URL前缀输入框。
  40. <script>：引入外部JavaScript文件，用于设置页面的行为和交互。
  41. {% block js %}{% endblock %}：用于在此处插入自定义的JavaScript代码。

文章来源:https://blog.csdn.net/xinzhengLUCK/article/details/135180063
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。