# article_notice

title: pip 源切换
created_at: 2026-03-24 11:19:43.447755
updated_at: 2026-03-24 11:19:43.447768
content:
  <h2>pip 源切换</h2>

  <p>pip 默认的源服务器在国外，安装速度较慢，推荐使用国内的源。</p>

  <h3>源列表</h3>

  <ul>
  	<li>豆瓣：<a href="http://pypi.douban.com/simple/" rel="noreferrer" target="_blank">http://pypi.douban.com/simple/</a></li>
  	<li>中科大：<a href="https://pypi.mirrors.ustc.edu.cn/simple/" rel="noreferrer" target="_blank">https://pypi.mirrors.ustc.edu.cn/simple/</a></li>
  	<li>清华：<a href="https://pypi.tuna.tsinghua.edu.cn/simple" rel="noreferrer" target="_blank">https://pypi.tuna.tsinghua.edu.cn/simple</a></li>
  </ul>

  <h3>一次性使用</h3>

  <p>可以在使用 pip 的时候加参数 - i&nbsp;<a href="https://pypi.tuna.tsinghua.edu.cn/simple" rel="noreferrer" target="_blank">https://pypi.tuna.tsinghua.edu.cn/simple</a></p>

  <p>例如：</p>

  <p>shell</p>

  <pre>
  <code>pip install django-simpleui -i https://pypi.tuna.tsinghua.edu.cn/simple</code></pre>

  <h3>永久修改</h3>

  <h4>Linux &amp; MacOS</h4>

  <p>linux 下，修改 ~/.pip/pip.conf (没有就创建一个)， 修改 index-url 为国内镜像地址，内容如下：</p>

  <p>&nbsp;</p>

  <pre>
  <code>[global]
  index-url = https://pypi.tuna.tsinghua.edu.cn/simple</code></pre>

  <h4>Windows</h4>

  <p>windows 下，直接在 user 目录中创建一个 pip 目录，如：C:\Users\xx\pip，新建文件 pip.ini，内容如下</p>

  <p>&nbsp;</p>

  <pre>
  <code>[global]
  index-url = https://pypi.tuna.tsinghua.edu.cn/simple</code></pre>

  <hr />
  <h2>安装</h2>

  <h3>pip 安装</h3>

  <p>shell</p>

  <pre>
  <code>pip3 install django-simpleui</code></pre>

  <h3>源码安装</h3>

  <ul>
  	<li>克隆源码本地安装</li>
  </ul>

  <p>shell</p>

  <pre>
  <code>git clone https://github.com/newpanjing/simpleui
  cd simpleui
  python setup.py sdist install</code></pre>

  <p>后续步骤请参考<a href="https://newpanjing.github.io/simpleui_docs/config.html#%E4%BF%AE%E6%94%B9%E9%BB%98%E8%AE%A4%E5%90%8E%E5%8F%B0%E6%A8%A1%E6%9D%BF%E4%B8%BAsimpleui">修改默认后台模板为 simpleui</a></p>

  <h3>创建一个 django 项目</h3>

  <p>django 官方中文教程&nbsp;<a href="https://docs.djangoproject.com/zh-hans/2.0/intro/tutorial01/" rel="noreferrer" target="_blank">https://docs.djangoproject.com/zh-hans/2.0/intro/tutorial01/</a></p>

  <p>如果您已经有存在的项目，可以忽略这一步。</p>

  <h3>修改默认后台模板为 simpleui</h3>

  <p>我们只需要在项目中的 settings.py 文件中加入一行 simpleui 即可。</p>

  <p>举个例子🌰：</p>

  <p>python</p>

  <pre>
  <code># Application definition

    INSTALLED_APPS = [
        &#39;simpleui&#39;,
        &#39;django.contrib.admin&#39;,
        &#39;django.contrib.auth&#39;,
        &#39;django.contrib.contenttypes&#39;,
        &#39;django.contrib.sessions&#39;,
        &#39;django.contrib.messages&#39;,
        &#39;django.contrib.staticfiles&#39;,
        ...
    ]</code></pre>

  <p>如果关闭 debug 模式后, 会出现静态资源无法访问，请查看<a href="https://newpanjing.github.io/simpleui_docs/config.html#%E5%85%8B%E9%9A%86%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E5%88%B0%E6%A0%B9%E7%9B%AE%E5%BD%95">克隆静态文件到根目录</a></p>

  <h3>克隆静态文件</h3>

  <p>熟悉 django 的同学会了解，django 有个神奇的模式叫做 debug 模式，默认是开启的，在 settings.py 中</p>

  <p>python</p>

  <pre>
  <code># SECURITY WARNING: don&#39;t run with debug turned on in production!
  DEBUG = True</code></pre>

  <p>关闭后可以有两种办法解决静态资源无法访问的情况</p>

  <ol>
  	<li>在 settings.py 中加入：</li>
  </ol>

  <p>python</p>

  <pre>
  <code>STATICFILES_DIRS = [
       os.path.join(BASE_DIR, &quot;static&quot;),
   ]</code></pre>

  <ol start="2">
  	<li>克隆静态资源到项目的静态目录，然后交由 nginx 处理</li>
  </ol>

  <p>shell</p>

  <pre>
  <code>python3 manage.py collectstatic</code></pre>

  <p>如果克隆报错提示找不到静态目录，请先在 settings.py 指定静态目录</p>

  <p>python</p>

  <pre>
  <code>STATIC_ROOT = os.path.join(BASE_DIR, &quot;static&quot;)</code></pre>

  <h3>启动项目</h3>

  <p>在 settings.py 中成功加入 simpleui 后，运行命令：</p>

  <p>shell</p>

  <pre>
  <code>python manage.py runserver 8000</code></pre>

  <p>浏览器中输入：<a href="http://127.0.0.1:8000/admin" rel="noreferrer" target="_blank">http://127.0.0.1:8000/admin</a>&nbsp;如果发现登录页和之前有所不同，那么就可以恭喜你，成功安装 simpleui！接下来开始享受 simpleui 吧。</p>

  <h2>主题</h2>

  <h3>默认主题</h3>

  <p>默认主题在 settings.py 中进行配置</p>

  <p>python</p>

  <pre>
  <code># 指定simpleui默认的主题,指定一个文件名，相对路径就从simpleui的theme目录读取
  SIMPLEUI_DEFAULT_THEME = &#39;admin.lte.css&#39;</code></pre>

  <h3>切换主题</h3>

  <p>目前 simpleui 内置 28 个流行样式风格的主题。后续随着版本的更新，会加入更多的主题。</p>

  <h3>主题列表</h3>

  <blockquote>
  <p>取对应的 file 即可设置成默认主题</p>
  </blockquote>

  <p>javascript</p>

  <pre>
  <code>var SimpleuiThemes = [
      {
          text: &quot;Default&quot;,
          menu: &#39;rgb(48, 65, 86)&#39;,
          logo: &#39;rgb(48, 65, 86)&#39;,
          top: &#39;#FFF&#39;
      },
      {
          text: &quot;Simpleui-x&quot;,
          menu: &#39;#2c2e39&#39;,
          logo: &#39;#2c2e39&#39;,
          top: &#39;#FFF&#39;,
          file: &quot;simpleui.css&quot;
      },
      {
          text: &quot;Element-UI&quot;,
          file: &quot;element.css&quot;,
          top: &#39;#447eff&#39;,
          menu: &#39;#FFf&#39;,
          logo: &#39;#FFF&#39;
      },
      {
          text: &quot;layui&quot;,
          file: &quot;layui.css&quot;,
          menu: &#39;#393D49&#39;,
          logo: &#39;#23262E&#39;,
          top: &#39;#23262E&#39;
      }, {
          text: &quot;Ant Design Pro&quot;,
          file: &quot;ant.design.css&quot;,
          menu: &#39;#000b16&#39;,
          logo: &#39;#002140&#39;,
          top: &#39;#FFF&#39;
      }, {
          text: &quot;Admin LTE&quot;,
          file: &quot;admin.lte.css&quot;,
          top: &#39;#3c8dbc&#39;,
          logo: &#39;#3c8dbc&#39;,
          menu: &#39;#2b3539&#39;
      }, {
          text: &quot;Highdmin&quot;,
          file: &quot;highdmin.css&quot;,
          top: &#39;#02c0ce&#39;,
          menu: &#39;#e0e0e0&#39;,
          logo: &#39;#02c0ce&#39;
      }, {
          text: &quot;Aircraft&quot;,
          file: &quot;aircraft.css&quot;,
          top: &#39;-webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6f80a1)) !important&#39;,
          menu: &#39;#e0e0e0&#39;,
          logo: &#39;-webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6f80a1)) !important&#39;
      }, {
          text: &quot;Purple&quot;,
          file: &quot;purple.css&quot;,
          top: &#39;#FFF&#39;,
          logo: &#39;#FFF&#39;,
          menu: &#39;#3e4295&#39;
      }, {
          text: &quot;Gray&quot;,
          file: &quot;gray.css&quot;,
          top: &#39;#213a53&#39;,
          logo: &#39;#213a53&#39;,
          menu: &#39;#e0e0e0&#39;
      },
      {
          text: &quot;Dark green&quot;,
          file: &quot;dark.green.css&quot;,
          top: &#39;#f3f3f4&#39;,
          menu: &#39;#283846&#39;,
          logo: &#39;#283846&#39;
      },
      {
          text: &quot;Orange&quot;,
          file: &quot;orange.css&quot;,
          top: &#39;linear-gradient(to right bottom, #da8342, #e45131)&#39;,
          logo: &#39;linear-gradient(to right bottom, #da8342, #e45131)&#39;,
          menu: &#39;#FFF&#39;
      },
      {
          text: &quot;Black&quot;,
          file: &quot;black.css&quot;,
          top: &quot;#333&quot;,
          logo: &quot;#333&quot;,
          menu: &#39;#FFF&#39;
      },
      {
          text: &quot;Green&quot;,
          file: &quot;green.css&quot;,
          top: &#39;#19a97b&#39;,
          logo: &#39;#FFF&#39;,
          menu: &#39;#FFF&#39;
      },
      {
          text: &quot;Light&quot;,
          file: &quot;light.css&quot;,
          top: &quot;#ebf1f5&quot;,
          logo: &quot;#ebf1f5&quot;,
          menu: &quot;#ebf1f5&quot;
      }, {
          text: &#39;Enterprise blue&#39;,
          file: &#39;e-blue.css&#39;,
          top: &#39;#3ba1df&#39;,
          logo: &#39;#3ba1df&#39;,
          menu: &#39;#FFF&#39;
      }, {
          text: &#39;Enterprise blue pro&#39;,
          file: &#39;e-blue-pro.css&#39;,
          top: &#39;#3ba1df&#39;,
          logo: &#39;#3ba1df&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;Enterprise green&#39;,
          file: &#39;e-green.css&#39;,
          top: &#39;#27ad60&#39;,
          logo: &#39;#27ad60&#39;,
          menu: &#39;#FFF&#39;
      }, {
          text: &#39;Enterprise green pro&#39;,
          file: &#39;e-green-pro.css&#39;,
          top: &#39;#27ad60&#39;,
          logo: &#39;#27ad60&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;Enterprise red&#39;,
          file: &#39;e-red.css&#39;,
          top: &#39;#c9333e&#39;,
          logo: &#39;#c9333e&#39;,
          menu: &#39;#FFF&#39;
      }, {
          text: &#39;Enterprise red pro&#39;,
          file: &#39;e-red-pro.css&#39;,
          top: &#39;#c9333e&#39;,
          logo: &#39;#c9333e&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;Enterprise purple&#39;,
          file: &#39;e-purple.css&#39;,
          top: &#39;#8263b1&#39;,
          logo: &#39;#8263b1&#39;,
          menu: &#39;#FFF&#39;
      }, {
          text: &#39;Enterprise purple pro&#39;,
          file: &#39;e-purple-pro.css&#39;,
          top: &#39;#8263b1&#39;,
          logo: &#39;#8263b1&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;Enterprise black&#39;,
          file: &#39;e-black.css&#39;,
          top: &#39;#1f2c39&#39;,
          logo: &#39;#1f2c39&#39;,
          menu: &#39;#FFF&#39;
      }, {
          text: &#39;Enterprise black pro&#39;,
          file: &#39;e-black-pro.css&#39;,
          top: &#39;#1f2c39&#39;,
          logo: &#39;#1f2c39&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;x-green&#39;,
          file: &#39;x-green.css&#39;,
          top: &#39;#2F9688&#39;,
          logo: &#39;#2F9688&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;x-red&#39;,
          file: &#39;x-red.css&#39;,
          top: &#39;#AA3130&#39;,
          logo: &#39;rgb(38, 50, 56)&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }, {
          text: &#39;x-blue&#39;,
          file: &#39;x-blue.css&#39;,
          top: &#39;#FFF&#39;,
          logo: &#39;#1E9FFF&#39;,
          menu: &#39;rgb(38, 50, 56)&#39;
      }
  ]</code></pre>

  <h3>自定义主题</h3>

  <p>在自定义主题之前，请先把 simpleui 的静态资源克隆到根目录。然后找到 theme theme.js 就是用于配置主题列表</p>

  <p>按该文件中的格式配置即可</p>

  <p>javascript</p>

  <pre>
  <code>var SimpleuiThemes = [
      {
          &quot;text&quot;: &quot;Default&quot;
      },
      {
          &quot;text&quot;: &quot;Simpleui-x&quot;,
          &quot;file&quot;: &quot;simpleui.css&quot;
      },
      .....
  ]</code></pre>

  <p>在增加你的样式之前，请先了解 less 如何使用。</p>

  <p>这是 admin.lte.less 的例子</p>

  <p>css</p>

  <pre>
  <code>@import &quot;base&quot;;

  @primary: #2096c8 !important;
  @color: white;

  @menu-color: #8aa4af !important;
  @menu-background: #2b3539 !important;

  @menu-color-hover: #FFF;
  @menu-background-hover: #1f272b;

  @menu-title-color: #FFF;
  @menu-title-background-color: #212c32;

  @menu-title-color-hover: #FFF;
  @menu-title-background-color-hover: #1f272b;


  @navbar-color: #fff;
  @navbar-background: #3c8dbc;</code></pre>

  <p>他将会编译为 admin.lte.css 需要安装 less</p>

  <p>shell</p>

  <pre>
  <code>npm install less -g

  lessc admin.lte.less&gt;admin.lte.css</code></pre>

  <h2>图标</h2>

  <h3>说明</h3>

  <p>simpleui 中显示的图标 可以参考<a href="https://fontawesome.com/icons?d=gallery" rel="noreferrer" target="_blank">fontawesome</a>&nbsp;的图标，只需要将完整的 class 名填入即可。</p>

  <h3>默认图标</h3>

  <p>simpleui 对所有菜单提供了一个默认的 file 图标，是为了统一风格。也许你并不喜欢，你可以选择关闭默认图标</p>

  <blockquote>
  <p>SIMPLEUI_DEFAULT_ICON = False</p>
  </blockquote>

  <table>
  	<thead>
  		<tr>
  			<th>值</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>True</td>
  			<td>开启默认图标，默认为 True</td>
  		</tr>
  		<tr>
  			<td>False</td>
  			<td>关闭默认图标</td>
  		</tr>
  	</tbody>
  </table>

  <h3>自定义图标</h3>

  <p>simpleui 仅为系统默认模块提供了图标，如果要为其他模块指定图标，可以自定义配置。图标参考请查阅：<a href="https://newpanjing.github.io/simpleui_docs/config.html#%E5%9B%BE%E6%A0%87%E8%AF%B4%E6%98%8E">图标说明</a></p>

  <p>优先级： 自定义 -&gt; 系统配图 -&gt; 默认图标</p>

  <blockquote>
  <p>注：simpleui 原则上不涉及代码，所以采用 setting 方式。后续可考虑扩展 Model 的 Meta class 进行配置图标</p>
  </blockquote>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>name</td>
  			<td>模块名字，请注意不是 model 的命名，而是菜单栏上显示的文本，因为 model 是可以重复的，会导致无法区分</td>
  		</tr>
  		<tr>
  			<td>icon</td>
  			<td>图标</td>
  		</tr>
  		<tr>
  			<td>例子：</td>
  			<td>&nbsp;</td>
  		</tr>
  	</tbody>
  </table>

  <p>&nbsp;</p>

  <pre>
  <code>SIMPLEUI_ICON = {
      &#39;系统管理&#39;: &#39;fab fa-apple&#39;,
      &#39;员工管理&#39;: &#39;fas fa-user-tie&#39;
  }</code></pre>

  <h2>菜单</h2>

  <h3>自定义菜单</h3>

  <h3>system_keep 保留系统菜单</h3>

  <p>该字段用于告诉 simpleui，是否需要保留系统默认的菜单，默认为 False，不保留。 如果改为 True，自定义和系统菜单将会并存</p>

  <h3>menu_display 过滤显示菜单和排序功能</h3>

  <p>该字段用于告诉 simpleui，是否需要开启过滤显示菜单和排序功能。<br />
  默认可以不用填写，缺省配置为默认排序，不对菜单进行过滤和排序。<br />
  开启认为传一个列表，如果列表为空，则什么也不显示。列表中的每个元素要对应到 menus 里面的 name 字段</p>

  <h3>dynamic 开启动态菜单功能</h3>

  <p>该字段用于告诉 simpleui，是否需要开启动态菜单功能。<br />
  默认可以不用填写，缺省配置为 False，不开启动态菜单功能。<br />
  开启为 True，开启后，每次用户登陆都会刷新左侧菜单配置。<br />
  需要注意的是：开启后每次访问 admin 都会重读配置文件，所以会带来额外的消耗。</p>

  <h3>menus 说明 (2021.2 已加入 3 级菜单)</h3>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>name</td>
  			<td>菜单名</td>
  		</tr>
  		<tr>
  			<td>icon</td>
  			<td>图标，参考 element-ui 和 fontawesome 图标</td>
  		</tr>
  		<tr>
  			<td>url</td>
  			<td>链接地址，绝对或者相对, 如果存在 models 字段，将忽略 url</td>
  		</tr>
  		<tr>
  			<td>models</td>
  			<td>子菜单，自 2021.02.01 + 版本 支持最多 3 级菜单，使用方法可以看下方例子</td>
  		</tr>
  		<tr>
  			<td>newTab</td>
  			<td>boolean,default:False, 浏览器新标签中打开，自 2022.6.13 开始支持</td>
  		</tr>
  	</tbody>
  </table>

  <h3>例子</h3>

  <p>python</p>

  <pre>
  <code>import time
  SIMPLEUI_CONFIG = {
      &#39;system_keep&#39;: False,
      &#39;menu_display&#39;: [&#39;Simpleui&#39;, &#39;测试&#39;, &#39;权限认证&#39;, &#39;动态菜单测试&#39;],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
      &#39;dynamic&#39;: True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
      &#39;menus&#39;: [{
          &#39;name&#39;: &#39;Simpleui&#39;,
          &#39;icon&#39;: &#39;fas fa-code&#39;,
          &#39;url&#39;: &#39;https://gitee.com/tompeppa/simpleui&#39;,
          # 浏览器新标签中打开
          &#39;newTab&#39;: True,
      }, {
          &#39;app&#39;: &#39;auth&#39;,
          &#39;name&#39;: &#39;权限认证&#39;,
          &#39;icon&#39;: &#39;fas fa-user-shield&#39;,
          &#39;models&#39;: [{
              &#39;name&#39;: &#39;用户&#39;,
              &#39;icon&#39;: &#39;fa fa-user&#39;,
              &#39;url&#39;: &#39;auth/user/&#39;
          }]
      }, {
          # 自2021.02.01+ 支持多级菜单，models 为子菜单名
          &#39;name&#39;: &#39;多级菜单测试&#39;,
          &#39;icon&#39;: &#39;fa fa-file&#39;,
        	# 二级菜单
          &#39;models&#39;: [{
              &#39;name&#39;: &#39;Baidu&#39;,
              &#39;icon&#39;: &#39;far fa-surprise&#39;,
              # 第三级菜单 ，
              &#39;models&#39;: [
                  {
                    &#39;name&#39;: &#39;爱奇艺&#39;,
                    &#39;url&#39;: &#39;https://www.iqiyi.com/dianshiju/&#39;
                    # 第四级就不支持了，element只支持了3级
                  }, {
                      &#39;name&#39;: &#39;百度问答&#39;,
                      &#39;icon&#39;: &#39;far fa-surprise&#39;,
                      &#39;url&#39;: &#39;https://zhidao.baidu.com/&#39;
                  }
              ]
          }, {
              &#39;name&#39;: &#39;内网穿透&#39;,
              &#39;url&#39;: &#39;https://www.wezoz.com&#39;,
              &#39;icon&#39;: &#39;fab fa-github&#39;
          }]
      }, {
          &#39;name&#39;: &#39;动态菜单测试&#39; ,
          &#39;icon&#39;: &#39;fa fa-desktop&#39;,
          &#39;models&#39;: [{
              &#39;name&#39;: time.time(),
              &#39;url&#39;: &#39;http://baidu.com&#39;,
              &#39;icon&#39;: &#39;far fa-surprise&#39;
          }]
      }]
  }</code></pre>

  <p>如果 SIMPLEUI_CONFIG 中存在 menus 字段，将会覆盖系统默认菜单。并且 menus 中输出的菜单不会受权限控制。</p>

  <h2>模板</h2>

  <h3>修改模板</h3>

  <p>在 simpleui 的基础上修改模板需要对 django 有一定了解</p>

  <ol>
  	<li>先把 simpleui 克隆到静态目录下，参考<a href="https://newpanjing.github.io/simpleui_docs/config.html#%E5%85%8B%E9%9A%86%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E5%88%B0%E6%A0%B9%E7%9B%AE%E5%BD%95">克隆静态文件到根目录</a></li>
  	<li>找到静态目录下的 admin 目录，里面就是 simpleui 的模板，直接修改相关 html 页面即可生效。</li>
  </ol>

  <h3>重写页面</h3>

  <p>例如重写首页，在 templates 目录中新建 admin 文件夹，然后添加 index.html 如果选择继承方式，就只能采用 block 代码如下：</p>

  <p>html</p>

  <pre>
  <code>{% extends &#39;admin/index.html&#39; %}
      {% load static %}

      {% block head %}
          {{ block.super }}
          ..此处写你的代码
      {% endblock %}

      {% block script %}
          {{ block.super }}
          ..此处写你的代码
      {% endblock %}</code></pre>

  <p>如果是想全部重写：</p>

  <p>html</p>

  <pre>
  <code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;完全自定义&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          这里你是自定义的html代码
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>

  <h4>头部添加自定义代码</h4>

  <p>html</p>

  <pre>
  <code>{% extends &#39;admin/index.html&#39; %}
      {% load static %}

      {% block head %}
          {{ block.super }}
          ..此处写你的代码
      {% endblock %}</code></pre>

  <h4>底部添加自定义代码</h4>

  <p>html</p>

  <pre>
  <code>{% extends &#39;admin/index.html&#39; %}
      {% load static %}

      {% block script %}
          {{ block.super }}
          ..此处写你的代码
      {% endblock %}</code></pre>

  <h2>自定义按钮 &amp; Action</h2>

  <h3>介绍</h3>

  <blockquote>
  <p>需要在 2.1.2 以上版本生效</p>
  </blockquote>

  <p>django admin 默认提供了自定义按钮的支持，但是样式、图标均不可自定义，simpleui 在 django admin 自定义 action 的基础上增加了样式、图标、按钮类型自定义。</p>

  <h3>例子</h3>

  <p>python</p>

  <pre>
  <code>@admin.register(Employe)
  class EmployeAdmin(admin.ModelAdmin):
      list_display = (&#39;id&#39;, &#39;name&#39;, &#39;gender&#39;, &#39;idCard&#39;, &#39;phone&#39;, &#39;birthday&#39;, &#39;department&#39;, &#39;enable&#39;, &#39;create_time&#39;)
     
      # 增加自定义按钮
      actions = [&#39;make_copy&#39;, &#39;custom_button&#39;]

      def custom_button(self, request, queryset):
          pass

      # 显示的文本，与django admin一致
      custom_button.short_description = &#39;测试按钮&#39;
      # icon，参考element-ui icon与https://fontawesome.com
      custom_button.icon = &#39;fas fa-audio-description&#39;

      # 指定element-ui的按钮类型，参考https://element.eleme.cn/#/zh-CN/component/button
      custom_button.type = &#39;danger&#39;

      # 给按钮追加自定义的颜色
      custom_button.style = &#39;color:black;&#39;

      def make_copy(self, request, queryset):
          pass
      make_copy.short_description = &#39;复制员工&#39;</code></pre>

  <p>该配置与原生 admin 兼容。</p>

  <h3>字段参数</h3>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>icon</td>
  			<td>按钮图标，参考<a href="https://element.eleme.cn/#/zh-CN/component/icon%E4%B8%8Ehttps://fontawesome.com%EF%BC%8C%E6%8A%8Aclass" rel="noreferrer" target="_blank">https://element.eleme.cn/#/zh-CN/component/icon 与 https://fontawesome.com，把 class</a>&nbsp;复制进来即可</td>
  		</tr>
  		<tr>
  			<td>type</td>
  			<td>按钮类型，参考：<a href="https://element.eleme.cn/#/zh-CN/component/button" rel="noreferrer" target="_blank">https://element.eleme.cn/#/zh-CN/component/button</a></td>
  		</tr>
  		<tr>
  			<td>style</td>
  			<td>自定义 css 样式</td>
  		</tr>
  		<tr>
  			<td>confirm</td>
  			<td>弹出确认框，在 3.4 或以上版本中生效</td>
  		</tr>
  	</tbody>
  </table>

  <h3>confirm 例子</h3>

  <p>python</p>

  <pre>
  <code>def message_test(self, request, queryset):
          messages.add_message(request, messages.SUCCESS, &#39;操作成功123123123123&#39;)
          
      # 给按钮增加确认
      message_test.confirm = &#39;你是否执意要点击这个按钮？&#39;</code></pre>

  <h3>链接按钮</h3>

  <blockquote>
  <p>在 2.9 或以上版本中生效</p>
  </blockquote>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>action_type</td>
  			<td>按钮动作类型，0 = 当前页内打开，1 = 新 tab 打开，2 = 浏览器 tab 打开</td>
  		</tr>
  		<tr>
  			<td>action_url</td>
  			<td>按钮访问链接</td>
  		</tr>
  	</tbody>
  </table>

  <p>demo：</p>

  <p>python</p>

  <pre>
  <code># 增加自定义按钮
      actions = [&#39;custom_button&#39;]

      def custom_button(self, request, queryset):
          pass

      # 显示的文本，与django admin一致
      custom_button.short_description = &#39;测试按钮&#39;
      # icon，参考element-ui icon与https://fontawesome.com
      custom_button.icon = &#39;fas fa-audio-description&#39;

      # 指定element-ui的按钮类型，参考https://element.eleme.cn/#/zh-CN/component/button
      custom_button.type = &#39;danger&#39;

      # 给按钮追加自定义的颜色
      custom_button.style = &#39;color:black;&#39;

      # 链接按钮，设置之后直接访问该链接
      # 3中打开方式
      # action_type 0=当前页内打开，1=新tab打开，2=浏览器tab打开
      # 设置了action_type，不设置url，页面内将报错
      # 设置成链接类型的按钮后，custom_button方法将不会执行。

      custom_button.action_type = 0
      custom_button.action_url = &#39;http://www.baidu.com&#39;</code></pre>

  <h3>layer 对话框按钮</h3>

  <blockquote>
  <p>在 2021.1.0 及以上版本中生效</p>
  </blockquote>

  <p>对话框按钮是在 admin 中进行配置 action，可以自定义输入的字段，然后通过 ajax 请求到 action 中进行业务的处理。</p>

  <p>需要继承<code>AjaxAdmin</code>&nbsp;在<code>from simpleui.admin import AjaxAdmin</code>包中</p>

  <p><code>simplepro</code>也会同步支持对话框按钮功能。</p>

  <h4>效果</h4>

  <p><img alt="layer" src="https://newpanjing.github.io/simpleui_docs/images/layer.png" /></p>

  <h4>字段说明</h4>

  <p>下列字段是指<code>action</code>的<code>layer</code>属性</p>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>title</td>
  			<td>对话框标题</td>
  		</tr>
  		<tr>
  			<td>tips</td>
  			<td>对话框提示</td>
  		</tr>
  		<tr>
  			<td>confirm_button</td>
  			<td>确认按钮文本</td>
  		</tr>
  		<tr>
  			<td>cancel_button</td>
  			<td>取消按钮文本</td>
  		</tr>
  		<tr>
  			<td>width</td>
  			<td>对话框宽度，百分比，例如：50%</td>
  		</tr>
  		<tr>
  			<td>labelWidth</td>
  			<td>表格的 label 宽度，例如：80px</td>
  		</tr>
  		<tr>
  			<td>params</td>
  			<td>对话框表格中的字段，array</td>
  		</tr>
  	</tbody>
  </table>

  <h5>params 字段</h5>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>type</td>
  			<td>类型，取值为：input 原生属性，和 elementui 的：select、date、datetime、rate、color、slider、switch、input_number、checkbox、radio</td>
  		</tr>
  		<tr>
  			<td>key</td>
  			<td>参数名，post 参数中获取的名称</td>
  		</tr>
  		<tr>
  			<td>value</td>
  			<td>默认值，数组或文本</td>
  		</tr>
  		<tr>
  			<td>label</td>
  			<td>字段在表格中显示的名称</td>
  		</tr>
  		<tr>
  			<td>size</td>
  			<td>组件的大小，取值为：medium / small / mini</td>
  		</tr>
  		<tr>
  			<td>require</td>
  			<td>是否必选，取值为：True / False</td>
  		</tr>
  		<tr>
  			<td>width</td>
  			<td>输入框宽度，例如：200px</td>
  		</tr>
  		<tr>
  			<td>options</td>
  			<td>选项，数组，type 为 select、checkbox、radio 的时候可用</td>
  		</tr>
  	</tbody>
  </table>

  <h4>options 字段</h4>

  <table>
  	<thead>
  		<tr>
  			<th>字段</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>key</td>
  			<td>值</td>
  		</tr>
  		<tr>
  			<td>label</td>
  			<td>显示文本</td>
  		</tr>
  	</tbody>
  </table>

  <h4>例子</h4>

  <p>python</p>

  <pre>
  <code>class RecordAdmin(ImportExportActionModelAdmin, AjaxAdmin):
      resource_class = ProxyResource

      list_display = (&#39;id&#39;, &#39;name&#39;, &#39;type&#39;, &#39;money&#39;, &#39;create_date&#39;)
      list_per_page = 10

      actions = (&#39;layer_input&#39;,)

      def layer_input(self, request, queryset):
          # 这里的queryset 会有数据过滤，只包含选中的数据

          post = request.POST
          # 这里获取到数据后，可以做些业务处理
          # post中的_action 是方法名
          # post中 _selected 是选中的数据，逗号分割
          if not post.get(&#39;_selected&#39;):
              return JsonResponse(data={
                  &#39;status&#39;: &#39;error&#39;,
                  &#39;msg&#39;: &#39;请先选中数据！&#39;
              })
          else:
              return JsonResponse(data={
                  &#39;status&#39;: &#39;success&#39;,
                  &#39;msg&#39;: &#39;处理成功！&#39;
              })

      layer_input.short_description = &#39;弹出对话框输入&#39;
      layer_input.type = &#39;success&#39;
      layer_input.icon = &#39;el-icon-s-promotion&#39;

      # 指定一个输入参数，应该是一个数组

      # 指定为弹出层，这个参数最关键
      layer_input.layer = {
          # 弹出层中的输入框配置

          # 这里指定对话框的标题
          &#39;title&#39;: &#39;弹出层输入框&#39;,
          # 提示信息
          &#39;tips&#39;: &#39;这个弹出对话框是需要在admin中进行定义，数据新增编辑等功能，需要自己来实现。&#39;,
          # 确认按钮显示文本
          &#39;confirm_button&#39;: &#39;确认提交&#39;,
          # 取消按钮显示文本
          &#39;cancel_button&#39;: &#39;取消&#39;,

          # 弹出层对话框的宽度，默认50%
          &#39;width&#39;: &#39;40%&#39;,

          # 表单中 label的宽度，对应element-ui的 label-width，默认80px
          &#39;labelWidth&#39;: &quot;80px&quot;,
          &#39;params&#39;: [{
              # 这里的type 对应el-input的原生input属性，默认为input
              &#39;type&#39;: &#39;input&#39;,
              # key 对应post参数中的key
              &#39;key&#39;: &#39;name&#39;,
              # 显示的文本
              &#39;label&#39;: &#39;名称&#39;,
              # 为空校验，默认为False
              &#39;require&#39;: True
          }, {
              &#39;type&#39;: &#39;select&#39;,
              &#39;key&#39;: &#39;type&#39;,
              &#39;label&#39;: &#39;类型&#39;,
              &#39;width&#39;: &#39;200px&#39;,
              # size对应elementui的size，取值为：medium / small / mini
              &#39;size&#39;: &#39;small&#39;,
              # value字段可以指定默认值
              &#39;value&#39;: &#39;0&#39;,
              &#39;options&#39;: [{
                  &#39;key&#39;: &#39;0&#39;,
                  &#39;label&#39;: &#39;收入&#39;
              }, {
                  &#39;key&#39;: &#39;1&#39;,
                  &#39;label&#39;: &#39;支出&#39;
              }]
          }, {
              &#39;type&#39;: &#39;number&#39;,
              &#39;key&#39;: &#39;money&#39;,
              &#39;label&#39;: &#39;金额&#39;,
              # 设置默认值
              &#39;value&#39;: 1000
          }, {
              &#39;type&#39;: &#39;date&#39;,
              &#39;key&#39;: &#39;date&#39;,
              &#39;label&#39;: &#39;日期&#39;,
          }, {
              &#39;type&#39;: &#39;datetime&#39;,
              &#39;key&#39;: &#39;datetime&#39;,
              &#39;label&#39;: &#39;时间&#39;,
          }, {
              &#39;type&#39;: &#39;rate&#39;,
              &#39;key&#39;: &#39;star&#39;,
              &#39;label&#39;: &#39;评价等级&#39;
          }, {
              &#39;type&#39;: &#39;color&#39;,
              &#39;key&#39;: &#39;color&#39;,
              &#39;label&#39;: &#39;颜色&#39;
          }, {
              &#39;type&#39;: &#39;slider&#39;,
              &#39;key&#39;: &#39;slider&#39;,
              &#39;label&#39;: &#39;滑块&#39;
          }, {
              &#39;type&#39;: &#39;switch&#39;,
              &#39;key&#39;: &#39;switch&#39;,
              &#39;label&#39;: &#39;switch开关&#39;
          }, {
              &#39;type&#39;: &#39;input_number&#39;,
              &#39;key&#39;: &#39;input_number&#39;,
              &#39;label&#39;: &#39;input number&#39;
          }, {
              &#39;type&#39;: &#39;checkbox&#39;,
              &#39;key&#39;: &#39;checkbox&#39;,
              # 必须指定默认值
              &#39;value&#39;: [],
              &#39;label&#39;: &#39;复选框&#39;,
              &#39;options&#39;: [{
                  &#39;key&#39;: &#39;0&#39;,
                  &#39;label&#39;: &#39;收入&#39;
              }, {
                  &#39;key&#39;: &#39;1&#39;,
                  &#39;label&#39;: &#39;支出&#39;
              }, {
                  &#39;key&#39;: &#39;2&#39;,
                  &#39;label&#39;: &#39;收益&#39;
              }]
          }, {
              &#39;type&#39;: &#39;radio&#39;,
              &#39;key&#39;: &#39;radio&#39;,
              &#39;label&#39;: &#39;单选框&#39;,
              &#39;options&#39;: [{
                  &#39;key&#39;: &#39;0&#39;,
                  &#39;label&#39;: &#39;收入&#39;
              }, {
                  &#39;key&#39;: &#39;1&#39;,
                  &#39;label&#39;: &#39;支出&#39;
              }, {
                  &#39;key&#39;: &#39;2&#39;,
                  &#39;label&#39;: &#39;收益&#39;
              }]
          }]
      }</code></pre>

  <h4>action 返回结果</h4>

  <p>json</p>

  <pre>
  <code>{
      &#39;status&#39;: &#39;error&#39;,
      &#39;msg&#39;: &#39;请先选中数据！&#39;
  }</code></pre>

  <blockquote>
  <p>status = success/error</p>
  </blockquote>

  <blockquote>
  <p>msg = 自定义</p>
  </blockquote>

  <h4>对话框按钮说明</h4>

  <ol>
  	<li>
  	<p>如果需要作为增加和编辑 需要自己实现业务逻辑，编辑的时候将数据填充到 value 字段即可。</p>
  	</li>
  	<li>
  	<p>限制选中后才能提交数据，可以在后台进行限制</p>
  	</li>
  	<li>
  	<p>2020.1.0 及以上版本生效，需要继承<code>AjaxAdmin</code>&nbsp;在<code>from simpleui.admin import AjaxAdmin</code>包中。 不继承提交数据会 500 或者 404 例如：</p>
  	</li>
  </ol>

  <p>python</p>

  <pre>
  <code>if not post.get(&#39;_selected&#39;):
              return JsonResponse(data={
                  &#39;status&#39;: &#39;error&#39;,
                  &#39;msg&#39;: &#39;请先选中数据！&#39;
              })</code></pre>

  <h3>layer 文件上传</h3>

  <blockquote>
  <p>自 2021.4.2 + 版本开始，支持 layer 中上传文件</p>
  </blockquote>

  <p>例子：</p>

  <p>python</p>

  <pre>
  <code>@admin.register(Layer)
  class LayerAdmin(AjaxAdmin):
      actions = (&#39;upload_file&#39;,)

      def upload_file(self, request, queryset):
          # 这里的upload 就是和params中配置的key一样
          upload= request.FILES[&#39;upload&#39;]
          print(upload)
          pass

      upload_file.short_description = &#39;文件上传对话框&#39;
      upload_file.type = &#39;success&#39;
      upload_file.icon = &#39;el-icon-upload&#39;
      upload_file.enable = True

      upload_file.layer = {
          &#39;params&#39;: [{
              &#39;type&#39;: &#39;file&#39;,
              &#39;key&#39;: &#39;upload&#39;,
              &#39;label&#39;: &#39;文件&#39;
          }]
      }</code></pre>

  <h2>配置</h2>

  <p>simpleui 在 django 原生 admin 的基础上增加了若干自定义的配置，这些配置均是在<code>settings.py</code>文件中完成。</p>

  <h3>关闭登录页粒子动画</h3>

  <p>在项目的 settings.py 中加入</p>

  <p>python</p>

  <pre>
  <code>SIMPLEUI_LOGIN_PARTICLES = False</code></pre>

  <p>粒子动画默认开启</p>

  <h3>修改默认图标</h3>

  <p>django 内置的认证与授权以及关联的用户、组，都已经默认配置了一个图标。后续自定义的 app 将会是默认图标，需要自行在 settings.py 文件中进行配置 1.</p>

  <h3>首页 - 修改默认</h3>

  <p>simpleui 内置了一个默认的首页，只是由简单的快捷导航与最近操作组成。</p>

  <p>在自己项目的 settings.py 中加入：</p>

  <ul>
  	<li>首页配置</li>
  </ul>

  <blockquote>
  <p>SIMPLEUI_HOME_PAGE = &#39;<a href="https://www.baidu.com/" rel="noreferrer" target="_blank">https://www.baidu.com</a>&#39;</p>
  </blockquote>

  <ul>
  	<li>首页标题</li>
  </ul>

  <blockquote>
  <p>SIMPLEUI_HOME_TITLE = &#39;百度一下你就知道&#39;</p>
  </blockquote>

  <ul>
  	<li>首页图标, 支持 element-ui 和 fontawesome 的图标，参考&nbsp;<a href="https://fontawesome.com/icons%E5%9B%BE%E6%A0%87" rel="noreferrer" target="_blank">https://fontawesome.com/icons 图标</a></li>
  </ul>

  <blockquote>
  <p>SIMPLEUI_HOME_ICON = &#39;fa fa-user&#39;</p>
  </blockquote>

  <p>三项配置都是选填，不填都会有默认值。&nbsp;<a href="https://fontawesome.com/icons" rel="noreferrer" target="_blank">图标列表</a></p>

  <h3>首页 - 跳转地址</h3>

  <p>首页顶部首页图标默认跳转地址为/，即根目录。如果需要自定义，请在项目的 settings.py 中加入设置：</p>

  <p>python</p>

  <pre>
  <code># 设置simpleui 点击首页图标跳转的地址
  SIMPLEUI_INDEX = &#39;https://www.88cto.com&#39;</code></pre>

  <p>可以设置相对与绝对路径。该地址并无特殊之处，将会调用 window.open 直接打开该地址。</p>

  <h3>首页 - 模块</h3>

  <p>首页默认展示 3 个模块，服务器信息、快速操作、最近动作，大家可以根据需要来显示或者隐藏某些模块。</p>

  <h3>修改 LOGO</h3>

  <ul>
  	<li>自定义 SIMPLEUI 的 Logo</li>
  </ul>

  <blockquote>
  <p>SIMPLEUI_LOGO = &#39;<a href="https://avatars2.githubusercontent.com/u/13655483?s=60&amp;v=4" rel="noreferrer" target="_blank">https://avatars2.githubusercontent.com/u/13655483?s=60&amp;v=4</a>&#39;</p>
  </blockquote>

  <h3>服务器信息</h3>

  <p>隐藏：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_INFO = False</p>
  </blockquote>

  <p>显示：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_INFO = True</p>
  </blockquote>

  <h3>快速操作</h3>

  <p>隐藏：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_QUICK = False</p>
  </blockquote>

  <p>显示：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_QUICK = True</p>
  </blockquote>

  <h3>最近动作</h3>

  <p>隐藏：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_ACTION = False</p>
  </blockquote>

  <p>显示：</p>

  <blockquote>
  <p>SIMPLEUI_HOME_ACTION = True</p>
  </blockquote>

  <h3>使用分析</h3>

  <p><code>默认开启，统计分析信息只是为了更好的帮助simpleui改进，并不会读取敏感信息。并且分析数据不会分享至任何第三方。</code></p>

  <blockquote>
  <p>SIMPLEUI_ANALYSIS = False</p>
  </blockquote>

  <table>
  	<thead>
  		<tr>
  			<th>值</th>
  			<th>说明</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr>
  			<td>True</td>
  			<td>收集分析，一天只上报一次分析数据。默认为 True</td>
  		</tr>
  		<tr>
  			<td>False</td>
  			<td>不收集分析信息</td>
  		</tr>
  	</tbody>
  </table>

  <h3>离线模式</h3>

  <blockquote>
  <p>在 2.1.3 或以上的版本中生效 在 settings.py 中加入</p>
  </blockquote>

  <p>python</p>

  <pre>
  <code>SIMPLEUI_STATIC_OFFLINE = True</code></pre>

  <p>指定 simpleui 是否以脱机模式加载静态资源，为 True 的时候将默认从本地读取所有资源，即使没有联网一样可以。适合内网项目</p>

  <p>不填该项或者为 False 的时候，默认从第三方的 cdn 获取</p>

  <h3>关闭 Loading 遮罩层</h3>

  <blockquote>
  <p>在 2.1.5 或以上的版本中生效</p>
  </blockquote>

  <p>在 settings.py 中加入</p>

  <p>python</p>

  <pre>
  <code>SIMPLEUI_LOADING = False</code></pre>

  <p>True 或 None 默认显示加载遮罩层，指定为 False 不显示遮罩层。默认显示</p>

  <h2>插件支持</h2>

  <h3>django-import-export</h3>

  <p>simpleui 对数据导入导出插件也做了支持，您可以直接安装使用。</p>

  <h3>admindoc</h3>

  <p>admindoc 需要 simpleui 3.3+ 版本</p>

  <h3>simplepro</h3>

  <p>simplepro 也是我们推出的一个升级版的 django admin 插件，在现有的基础上，做了大量改进和优化。并且一前后分离的方式加载数据。</p>

  <p>点击<a href="https://simpleui.88cto.com/simplepro" rel="noreferrer" target="_blank">了解更多</a>。</p>

  <h2>国际化</h2>

  <p>simpleui 国际化采用 js 前端国际化，因为没有涉及到后端，所以没有 django 标准的国际化文件。</p>

  <p>将 simpleui 克隆到静态目录，然后添加需要的语言</p>

  <p>语言命名与 django LANGUAGE_CODE 一致</p>

  <p>例如： 中文简体：zh-hans 英文：en-us</p>

  <p>将文件命名为: [code].js</p>

  <ul>
  	<li>zh-hans.js</li>
  	<li>en-us.js</li>
  </ul>

  <h2>常见问题</h2>

  <h3>settings.py 找不到</h3>

  <pre>
  <code>这个文件是在自己创建的django项目中，不是在simpleui中。如果你熟悉django就会明白，如果不熟悉请先学习django。[django中文文档](https://docs.djangoproject.com/zh-hans/2.2/)
  </code></pre>

  <h3>python 版本问题</h3>

  <pre>
  <code>+ 该项目推荐使用python3，python2.x可能会不兼容
  + 使用源码安装时如果出错，请指定python版本，python3 和 pip3
  </code></pre>

  <h3>无法启动</h3>

  <p>可能由于某些未知的问题，导致项目无法启动，请不要放弃 simpleui，你可以提<a href="https://github.com/newpanjing/simpleui/issues" rel="noreferrer" target="_blank">issue</a>，或者直接加入 QQ 群：873469913，我们将协助解决。</p>

  <h3>样式正常加载显示不正常</h3>

  <p>在 win8 系统中 可能会遇到，css 以及其他文件全部正常加载，但是显示不正常。这是因为响应头为 application/x-css，而不是 text/css，造成浏览器不正常解析。</p>

  <h4>解决办法：</h4>

  <p>1. 运行 cmd： 输入 regedit 并回车</p>

  <p>2. 在注册表 HKEY_CLASSES_ROOT 中找到.css 点击.css 文件夹 修改 Content Type 为 text / css</p>

  <p>参考连接：<a href="https://blog.csdn.net/sun754276603/article/details/46989965" rel="noreferrer" target="_blank">https://blog.csdn.net/sun754276603/article/details/46989965</a></p>

  <h3>如何下载这个模版</h3>

  <p>目前暂时无法下载模板，不过我们计划推出 simple-admin，纯 html 的模板，可以让更多语言使用。</p>

  <h3>反馈建议</h3>

  <blockquote>
  <p>其他更多问题，请提交<a href="https://github.com/newpanjing/simpleui/issues" rel="noreferrer" target="_blank">issues</a>&nbsp;给我们。</p>
  </blockquote>

  <h3>开发调试</h3>

  <p>如果想在 simpleui 的基础上进行一些修改，可以参考以下步骤</p>

  <ol>
  	<li>安装 simpleui 到项目中</li>
  	<li>找到 simpleui 的目录，然后删除</li>
  	<li>克隆 simpleui 源码到本地</li>
  	<li>Linux、Unix、macOS 环境下用软连接的方式，把项目依赖包中的 simpleui 目录指定到源码的 simpleui 目录shell
  	<pre>
  <code>ln -s 源文件 目标文件</code></pre>
  	</li>
  	<li>windows 环境下请右键创建快捷方式</li>
  </ol>

  <p>接下来就可以修改、发布 simpleui 了。如有疑问请加入 QQ 群：873469913</p>

  <h3>官网 &amp; 反馈</h3>


title: simple ui 的使用
created_at: 2026-03-24 11:20:19.697067
updated_at: 2026-03-24 11:20:19.697084
content:
  <p><strong>simple ui 的使用</strong></p>

  <h4><a href="https://simpleui.72wo.com/docs/simpleui/doc.html" rel="noopener nofollow">官网教程：https://simpleui.72wo.com/docs/simpleui/doc.html</a></h4>

  <p>1. 安装</p>

  <pre>
  pip install django-simpleui</pre>

  <p>2. 创建一个 django 项目（如果您已经有存在的项目，可以忽略这一步）</p>

  <p>3. 修改默认后台模板为 simpleui</p>

  <p>&nbsp; &nbsp;我们只需要在项目中的 settings.py 文件中加入一行 simpleui 即可。</p>

  <p>&nbsp; &nbsp;举个例子🌰：</p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
   # Application definition

    INSTALLED_APPS = [
        &#39;simpleui&#39;,
        &#39;django.contrib.admin&#39;,
        &#39;django.contrib.auth&#39;,
        &#39;django.contrib.contenttypes&#39;,
        &#39;django.contrib.sessions&#39;,
        &#39;django.contrib.messages&#39;,
        &#39;django.contrib.staticfiles&#39;,
        ...
    ]</pre>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>如果关闭 debug 模式后, 会出现静态资源无法访问</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221152244556-460809502.png" /></p>

  <h3>1. 自定义菜单（左边侧边栏）</h3>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
      -#### 3 在配置文件中写（settings.py&mdash;&mdash;dev.py）
      ## simpleui的配置
  import time
  SIMPLEUI_CONFIG = {
      &#39;system_keep&#39;: False,
      &#39;menu_display&#39;: [&#39;我的项目&#39;, &#39;权限认证&#39;,&#39;主页&#39;,],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
      &#39;dynamic&#39;: True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
      &#39;menus&#39;: [
          {
          &#39;name&#39;: &#39;我的项目&#39;,
          &#39;icon&#39;: &#39;fab fa-apple&#39;,
          &#39;url&#39;: &#39;/backend/&#39;  # 咱们用自己的
      },
          {
          &#39;app&#39;: &#39;auth&#39;,
          &#39;name&#39;: &#39;权限认证&#39;,
          &#39;icon&#39;: &#39;fas fa-user-shield&#39;,
          &#39;models&#39;: [
              {
              &#39;name&#39;: &#39;用户&#39;,
              &#39;icon&#39;: &#39;fa fa-user&#39;,
              &#39;url&#39;: &#39;auth/user/&#39;
          },
              {
              &#39;name&#39;: &#39;组&#39;,
              &#39;icon&#39;: &#39;fa fa-user&#39;,
              &#39;url&#39;: &#39;auth/group/&#39;
          },
              {
                  &#39;name&#39;: &#39;权限&#39;,
                  &#39;icon&#39;: &#39;fa fa-user&#39;,
                  &#39;url&#39;: &#39;auth/permission/&#39;
              }
          ]
      },
          {
              &#39;app&#39;: &#39;home&#39;,
              &#39;name&#39;: &#39;主页&#39;,
              &#39;icon&#39;: &#39;fas fa-user-shield&#39;,
              &#39;models&#39;: [
                  {
                      &#39;name&#39;: &#39;轮播图&#39;,
                      &#39;icon&#39;: &#39;fa fa-user&#39;,
                      &#39;url&#39;: &#39;home/banner/&#39;
                  },
  </pre>

  <pre>
  <code>] }, </code></pre>

  <p>]<br />
  }</p>

  <p>&nbsp;</p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><strong>2. 监控大屏</strong></p>

  <p>到 gitee 上拉，搜索监控大屏，<a href="https://gitee.com/kevin_chou/dataVIS?_from=gitee_search" rel="noopener nofollow" target="_blank">凯文童鞋丶/大数据可视化大屏电子沙盘合集</a>&nbsp;&mdash;&mdash; 监控小区，clone 下载下来，将 Index.html 拷贝到 template 文件夹，样式 css,js 等拷贝到 static 文件夹下</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221171815715-1295285299.png" /></p>

  <p>&nbsp;</p>

  <p>&nbsp;配置完，将 href = 修改为 href=&quot;/static/，src 修改为 src=&quot;/static/&nbsp; &nbsp; 快捷键 ctrl +r 快速替换</p>

  <pre>
  如：&lt;li&gt;&lt;span&gt;&lt;img src=&quot;/static/img/icon_weather/0.png&quot;&gt;&amp;nbsp;&lt;/span&gt;多云&lt;/li&gt;</pre>

  <p>配置 settings/dev.py&nbsp; 下的 static</p>

  <pre>
  STATICFILES_DIRS=[
      os.path.join(BASE_DIR,&#39;static&#39;)
  ]</pre>

  <p>user/views.py</p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
  from django.shortcuts import render
  </pre>

  <p># Create your views here.</p>

  <p>def home(request):<br />
  return render(request,&quot;index.html&quot;)</p>

  <p>&nbsp;</p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>此时，访问 http://127.0.0.1:8000/admin/#/backend/，可出现监控大屏</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221172127292-514440660.png" /></p>

  <p><strong>3. 一行数据，显示哪些字段 + 添加按钮</strong></p>

  <p><strong>#admin.py 中配置</strong></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p>@admin.register(models.Banner)<br />
  class EmployeAdmin(admin.ModelAdmin):<br />
  # 一行数据显示哪些字段<br />
  &nbsp; &nbsp; list_display = (&#39;id&#39;, &#39;title&#39;, &#39;link&#39;, &#39;is_show&#39;)</p>

  <p>&nbsp; &nbsp; # 增加自定义按钮<br />
  &nbsp; &nbsp; actions = [&#39;make_copy&#39;]<br />
  &nbsp; &nbsp; def make_copy(self, request, queryset):<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # 点击触发它<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # queryset：选中的数据<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # request 请求对象<br />
  &nbsp; &nbsp; &nbsp; &nbsp; print(queryset)</p>

  <p>&nbsp; &nbsp; make_copy.short_description = &#39;我叫按钮&#39;<br />
  &nbsp; &nbsp; make_copy.confirm = &#39; 你是否执意要点击这个按钮？&#39;</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221172617051-1840171355.png" /></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p><strong>4. 关闭登录页面的粒子动画</strong></p>

  <p>在项目的 settings.py 中加入</p>

  <pre>
  # SIMPLEUI_LOGIN_PARTICLES = False
  SIMPLEUI_HOME_INFO = False</pre>


# article_article

title: simple ui 的使用
created_at: 2026-03-24 11:23:01.846440
updated_at: 2026-03-24 11:23:01.846460
content:
  <p>&nbsp;</p>

  <h4><a href="https://simpleui.72wo.com/docs/simpleui/doc.html" rel="noopener nofollow">官网教程：https://simpleui.72wo.com/docs/simpleui/doc.html</a></h4>

  <p>1. 安装</p>

  <pre>
  pip install django-simpleui</pre>

  <p>2. 创建一个 django 项目（如果您已经有存在的项目，可以忽略这一步）</p>

  <p>3. 修改默认后台模板为 simpleui</p>

  <p>&nbsp; &nbsp;我们只需要在项目中的 settings.py 文件中加入一行 simpleui 即可。</p>

  <p>&nbsp; &nbsp;举个例子🌰：</p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
   # Application definition

    INSTALLED_APPS = [
        &#39;simpleui&#39;,
        &#39;django.contrib.admin&#39;,
        &#39;django.contrib.auth&#39;,
        &#39;django.contrib.contenttypes&#39;,
        &#39;django.contrib.sessions&#39;,
        &#39;django.contrib.messages&#39;,
        &#39;django.contrib.staticfiles&#39;,
        ...
    ]</pre>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>如果关闭 debug 模式后, 会出现静态资源无法访问</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221152244556-460809502.png" /></p>

  <h3>1. 自定义菜单（左边侧边栏）</h3>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
      -#### 3 在配置文件中写（settings.py&mdash;&mdash;dev.py）
      ## simpleui的配置
  import time
  SIMPLEUI_CONFIG = {
      &#39;system_keep&#39;: False,
      &#39;menu_display&#39;: [&#39;我的项目&#39;, &#39;权限认证&#39;,&#39;主页&#39;,],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
      &#39;dynamic&#39;: True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
      &#39;menus&#39;: [
          {
          &#39;name&#39;: &#39;我的项目&#39;,
          &#39;icon&#39;: &#39;fab fa-apple&#39;,
          &#39;url&#39;: &#39;/backend/&#39;  # 咱们用自己的
      },
          {
          &#39;app&#39;: &#39;auth&#39;,
          &#39;name&#39;: &#39;权限认证&#39;,
          &#39;icon&#39;: &#39;fas fa-user-shield&#39;,
          &#39;models&#39;: [
              {
              &#39;name&#39;: &#39;用户&#39;,
              &#39;icon&#39;: &#39;fa fa-user&#39;,
              &#39;url&#39;: &#39;auth/user/&#39;
          },
              {
              &#39;name&#39;: &#39;组&#39;,
              &#39;icon&#39;: &#39;fa fa-user&#39;,
              &#39;url&#39;: &#39;auth/group/&#39;
          },
              {
                  &#39;name&#39;: &#39;权限&#39;,
                  &#39;icon&#39;: &#39;fa fa-user&#39;,
                  &#39;url&#39;: &#39;auth/permission/&#39;
              }
          ]
      },
          {
              &#39;app&#39;: &#39;home&#39;,
              &#39;name&#39;: &#39;主页&#39;,
              &#39;icon&#39;: &#39;fas fa-user-shield&#39;,
              &#39;models&#39;: [
                  {
                      &#39;name&#39;: &#39;轮播图&#39;,
                      &#39;icon&#39;: &#39;fa fa-user&#39;,
                      &#39;url&#39;: &#39;home/banner/&#39;
                  },
  </pre>

  <pre>
  <code>] }, </code></pre>

  <p>]<br />
  }</p>

  <p>&nbsp;</p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><strong>2. 监控大屏</strong></p>

  <p>到 gitee 上拉，搜索监控大屏，<a href="https://gitee.com/kevin_chou/dataVIS?_from=gitee_search" rel="noopener nofollow" target="_blank">凯文童鞋丶/大数据可视化大屏电子沙盘合集</a>&nbsp;&mdash;&mdash; 监控小区，clone 下载下来，将 Index.html 拷贝到 template 文件夹，样式 css,js 等拷贝到 static 文件夹下</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221171815715-1295285299.png" /></p>

  <p>&nbsp;</p>

  <p>&nbsp;配置完，将 href = 修改为 href=&quot;/static/，src 修改为 src=&quot;/static/&nbsp; &nbsp; 快捷键 ctrl +r 快速替换</p>

  <pre>
  如：&lt;li&gt;&lt;span&gt;&lt;img src=&quot;/static/img/icon_weather/0.png&quot;&gt;&amp;nbsp;&lt;/span&gt;多云&lt;/li&gt;</pre>

  <p>配置 settings/dev.py&nbsp; 下的 static</p>

  <pre>
  STATICFILES_DIRS=[
      os.path.join(BASE_DIR,&#39;static&#39;)
  ]</pre>

  <p>user/views.py</p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <pre>
  from django.shortcuts import render
  </pre>

  <p># Create your views here.</p>

  <p>def home(request):<br />
  return render(request,&quot;index.html&quot;)</p>

  <p>&nbsp;</p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>此时，访问 http://127.0.0.1:8000/admin/#/backend/，可出现监控大屏</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221172127292-514440660.png" /></p>

  <p><strong>3. 一行数据，显示哪些字段 + 添加按钮</strong></p>

  <p><strong>#admin.py 中配置</strong></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p>@admin.register(models.Banner)<br />
  class EmployeAdmin(admin.ModelAdmin):<br />
  # 一行数据显示哪些字段<br />
  &nbsp; &nbsp; list_display = (&#39;id&#39;, &#39;title&#39;, &#39;link&#39;, &#39;is_show&#39;)</p>

  <p>&nbsp; &nbsp; # 增加自定义按钮<br />
  &nbsp; &nbsp; actions = [&#39;make_copy&#39;]<br />
  &nbsp; &nbsp; def make_copy(self, request, queryset):<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # 点击触发它<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # queryset：选中的数据<br />
  &nbsp; &nbsp; &nbsp; &nbsp; # request 请求对象<br />
  &nbsp; &nbsp; &nbsp; &nbsp; print(queryset)</p>

  <p>&nbsp; &nbsp; make_copy.short_description = &#39;我叫按钮&#39;<br />
  &nbsp; &nbsp; make_copy.confirm = &#39; 你是否执意要点击这个按钮？&#39;</p>

  <p><img alt="" src="https://img2022.cnblogs.com/blog/2476071/202202/2476071-20220221172617051-1840171355.png" /></p>

  <p><img alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" /></p>

  <p><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img alt="复制代码" src="https://assets.cnblogs.com/images/copycode.gif" /></a></p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p><strong>4. 关闭登录页面的粒子动画</strong></p>

  <p>在项目的 settings.py 中加入</p>

  <pre>
  # SIMPLEUI_LOGIN_PARTICLES = False
  SIMPLEUI_HOME_INFO = False</pre>


# django_session

session_key: vcl2e885dpgsjwut5879tvitx2kp88bi
expire_date: 2026-04-07 11:24:51.100751
session_data:
  .eJzFl01v4jAQhv9KlTOFhMSx0-PeV1qttKelqhx7DN7mA9nJqep_X09gu9QEAiEqF0aKX157nnHsyVvwwttm89JaMC9aBk9BFMwOn-VcvEKFA_IPr9b1XNRVY3Q-R8l8P2rn32sJxbe99pPBhtuN-3eqQKmIAYSCsVgRyGIOaZQqLhjhRKYkpHQpl7nIQhFmURwSuUyEUjHhUpBuVSVUrXVev99WQcVLWAVPD6tgtWpTwqgLlEOIIecRhiRMV8HMKbRb806ruHlQ_FFoIwrYDZa4covDk9q2ptiNLbgsdbXgptFu8CPuVFzKXwNCJ9mLcwMOhWnLfNrlvs8eJrN6xmHQEkejMFz2eVOqXCCU0MmoWhCNrqthqv-E96E6MnOfatzjTXMK3WrjdDKqVe0iGBCgt80R26otii8GODZJH2DS481U2nknXE4GUHBTu0OwGN6XH8q7bMyxuftcSY93FkYc3SiQiTfmMNW97i5Mx-btM039B1Hfi0GWDJe_jK8_U09dgD_AlNpad1raEaXCu98uth8ep4t1pLy8XGPT9glenqpfDOZb_awLGM_L1OdagwPN1zO6JDGfTjawVfvdMM1zkPB3CFKn-XpIV-TnsYrC3jME0CsjXbjt7NxxkbB1h6NrpI_v89PKu3Acm7vPNfI3Je0rmlA5BpDYoLE8x-uQ4q140wdEAjHaslgK7PticvsVmHMLi5LrCj-GTtfws-yKAo4E0cP0xuT9OvY1vRmjaMqi3VV7O1hV1w2YQlevA2gPhHeBOzZzn2riP-j7YmM5T7ogcBaSMCxoGrPuVadJfDynxTntRkMhH3nRDL4oFERywqU7jR5FvT7RErbNZrF2zfP2TDv4X3N5sSZIuu-guShRvyh-DxiR9-fg_S8D3YlE:1w4zsR:0dwnwLDgPkLG5AJBfZ3wXIgdlVxYWuiTVEZJdsqEXbc


