母板base.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>运维管理系统</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header layui-bg-cyan">
<div class="layui-logo" style="color: white;font-size: 26px;font-weight: bold">运维管理系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="/static/images/用户.jpg" class="layui-nav-img">
{{ username }}
</a>
<dl class="layui-nav-child">
<dd><a href="">用户信息</a></dd>
<dd><a href=""><i class="layui-icon layui-icon-set"></i>设置</a></dd>
<dd><a href="{% url 'logout' %}"><i class="layui-icon layui-icon-logout"></i>退出</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black ">
<div class="layui-side-scroll layui-bg-cyan">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
<li class="layui-nav-item">
<a href="{% url 'index' %}"><i class="layui-icon layui-icon-home"></i> 首页</a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;"><i class="layui-icon layui-icon-template-1"></i> CICD</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">CI</a></dd>
<dd><a href="javascript:;">CD</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-component"></i> K8S</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">集群管理</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="{% url 'manage_users' %}"><i class="layui-icon layui-icon-user"></i> 用户管理</a>
</li>
<li class="layui-nav-item">
<a href="{% url 'upload' %}"><i class="layui-icon layui-icon-file"></i> 文件管理</a>
</li>
</ul>
</div>
</div>
<div class="layui-body" style="background: #eeeeee">
<!-- 内容主体区域 -->
<div style="padding: 15px;">{% block content %} {% endblock %}</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
Author:运维@小兵
</div>
</div>
<script src="/static/layui/layui.js"></script>
{% block js %} {% endblock %}
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>首页index.html
{% extends 'base.html' %}
{% block content %}
<h1>欢迎访问运维管理系统</h1>
{% endblock %}
{% block js %}
{% endblock %}
