潭州课堂25班：Ph201805201 django 项目第三十二课后台站点管理(课堂笔记）

一、后台站点模版抽取

1.获取静态站点模版

可以使用git clone到本地

git clone https://github.com/almasaeed2010/AdminLTE.git

也可以在github中将其下载到本地，点击

可以下载 zip 谁的到本地，解压，复制自己所需要的

2.使用需要的组件

源文件非常大，按需所取即可。
创建templates/admin/base文件夹，将下载的文件夹中starter.html页面复制粘贴，放到base文件夹中，修改名字为base.html
将不需要的组件删除
创建static/js/admin/base文件夹、static/css/admin/base文件夹和static/css/admin/fonts文件夹，将需要的js、css、front文件从下载的源文件夹中分别复制粘贴，放到对应的项目静态文件夹内
创建static/images/admin/base文件夹，将用户图像文件放置其中

创建应用：

在主目录下，的配置文件中

主路由中为该应用分配个路由

3.模版抽取

文章标签分类功能还没有实现，先注释

{% load static %}

<!DOCTYPE html>

<!--

This is a starter template page. Use this page to start your new project from

scratch. This page gets rid of all links and provides the needed markup only.

-->

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>

    {% block title %}

    {% endblock %}

  </title>

  <!-- Tell the browser to be responsive to screen width -->

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="{% static 'css/admin/base/bootstrap.min.css' %}">

  <!-- Font Awesome -->

  <link rel="stylesheet" href="{% static 'css/admin/base/font-awesome.min.css' %}">

  <!-- Ionicons -->

  <link rel="stylesheet" href="{% static 'css/admin/base/ionicons.min.css' %}">

  <!-- Theme style -->

  <link rel="stylesheet" href="{% static 'css/admin/base/AdminLTE.min.css' %}">

  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter

        page. However, you can choose any other skin. Make sure you

        apply the skin class to the body tag so the changes take effect. -->

  <link rel="stylesheet" href="{% static 'css/admin/base/skin-blue.min.css' %}">

  <link rel="stylesheet" href="{% static 'css/base/sweetalert.css' %}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  <!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  <![endif]-->

</head>

<!--

BODY TAG OPTIONS:

=================

Apply one or more of the following classes to get the

desired effect

|---------------------------------------------------------|

| SKINS         | skin-blue                               |

|               | skin-black                              |

|               | skin-purple                             |

|               | skin-yellow                             |

|               | skin-red                                |

|               | skin-green                              |

|---------------------------------------------------------|

|LAYOUT OPTIONS | fixed                                   |

|               | layout-boxed                            |

|               | layout-top-nav                          |

|               | sidebar-collapse                        |

|               | sidebar-mini                            |

|---------------------------------------------------------|

-->

<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">

  <!-- Main Header -->

  <header class="main-header">

    <!-- Logo -->

    <a href="{% url 'news:index' %}" class="logo">

      <!-- mini logo for sidebar mini 50x50 pixels -->

      <span class="logo-mini"><b>P</b>y</span>

      <!-- logo for regular state and mobile devices -->

      <span class="logo-lg"><b>Admin</b></span>

    </a>

    <!-- Header Navbar -->

    <nav class="navbar navbar-static-top" role="navigation">

      <!-- Sidebar toggle button-->

      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">

        <span class="sr-only">Toggle navigation</span>

      </a>

      <!-- Navbar Right Menu -->

      <div class="navbar-custom-menu">

        <ul class="nav navbar-nav">

          <!-- User Account Menu -->

          <li class="dropdown user user-menu">

            <!-- Menu Toggle Button -->

            <a href="#" class="dropdown-toggle" data-toggle="dropdown">

              <!-- The user image in the navbar-->

              <img src="{% static 'images/admin/base/dx.png' %}" class="user-image" alt="User Image">

              <!-- hidden-xs hides the username on small devices so only the image appears. -->

              <span class="hidden-xs">斌 彬</span>

            </a>

            <ul class="dropdown-menu">

              <!-- The user image in the menu -->

              <li class="user-header">

                <img src="{% static 'images/admin/base/dx.png' %}" class="img-circle" alt="User Image">

                <p>

                  斌彬电脑

                  <small>加入时间</small>

                </p>

              </li>

              <li class="user-footer">

                <div class="pull-left">

                  <a href="#" class="btn btn-default btn-flat">个人详情</a>

                </div>

                <div class="pull-right">

                  <a href="#" class="btn btn-default btn-flat">登出</a>

                </div>

              </li>

            </ul>

          </li>

        </ul>

      </div>

    </nav>

  </header>

  <!-- Left side column. contains the logo and sidebar -->

  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->

    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->

      <div class="user-panel">

        <div class="pull-left image">

          <img src="{% static 'images/admin/base/dx.png' %}" class="img-circle" alt="User Image">

        </div>

        <div class="pull-left info">

          <p>Youkou</p>

          <!-- Status -->

          <a href="#"><i class="fa fa-circle text-success"></i> Happy</a>

        </div>

      </div>

      <!-- Sidebar Menu -->

      <ul class="sidebar-menu" data-widget="tree">

        <li class="header">头部</li>

        <!-- Optionally, you can add icons to the links -->

        <li class="active"><a href="#"><i class="fa fa-user"></i> <span>个人信息</span></a></li>

        <li class="header">文章相关</li>

        <!-- Optionally, you can add icons to the links -->

        <li class="treeview">

          <a href="#"><i class="fa fa-book"></i> <span>文章</span>

            <span class="pull-right-container">

                <i class="fa fa-angle-left pull-right"></i>

              </span>

          </a>

          <ul class="treeview-menu">

            <!-- 文章标签分类 start -->

{#            <li>#}

{#              <a href="{% url 'admin:tags' %}">#}

{#                <i class="fa fa-tags"></i>#}

{#                <span>文章标签分类</span>#}

{#              </a>#}

{#            </li>#}

            <!-- /.文章标签分类 end -->

            <!-- 文章发布 start -->

            <li>

              <a href="#">

                <i class="fa fa-newspaper-o"></i>

                <span>文章发布</span>

              </a>

            </li>

            <!-- /.文章发布 end -->

            <!-- 文章管理 start -->

            <li>

              <a href="#">

                <i class="fa fa-cogs"></i>

                <span>文章管理</span>

              </a>

            </li>

            <!-- /.文章管理 end -->

            <!-- Hot文章管理 start -->

            <li>

              <a href="#">

                <i class="fa fa-rocket"></i>

                <span>Hot文章管理</span>

              </a>

            </li>

            <!-- /.Hot文章管理 end -->

            <!-- 轮播图管理 start -->

            <li>

              <a href="#">

                <i class="fa fa-file-picture-o"></i>

                <span>轮播图管理</span>

              </a>

            </li>

            <!-- /.轮播图管理 end -->

          </ul>

        </li>

      </ul>

      <!-- /.sidebar-menu -->

    </section>

    <!-- /.sidebar -->

  </aside>

  <!-- Content Wrapper. Contains page content -->

  <div class="content-wrapper">

    <!-- Content Header (Page header) -->

    <section class="content-header">

      <h1>

        {% block content_header %}

        {% endblock %}

        <small>

          {% block header_option_desc %}

          {% endblock %}

        </small>

      </h1>

    </section>

    <!-- Main content -->

    <section class="content container-fluid">

      <!--------------------------

        | Your Page Content Here |

        -------------------------->

      {% block content %}

      {% endblock %}

    </section>

    <!-- /.content -->

  </div>

  <!-- /.content-wrapper -->

  <!-- Main Footer -->

  <footer class="main-footer">

    <!-- To the right -->

    <div class="pull-right hidden-xs">

      未来的大牛从此起航

    </div>

    <!-- Default to the left -->

    <strong>Copyright © 2019 <a href="#">Company</a>.</strong> All rights reserved.

  </footer>

</div>

<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->

<script src="{% static 'js/admin/base/jquery.min.js' %}"></script>

<!-- Bootstrap 3.3.7 -->

<script src="{% static 'js/admin/base/bootstrap.min.js' %}"></script>

<!-- AdminLTE App -->

<script src="{% static 'js/admin/base/adminlte.min.js' %}"></script>

<!-- 自定义 引入 -->

<script src="{% static 'js/base/message.js'%}"></script>

<script src="{% static 'js/base/fsweetalert.js'%}"></script>

<script src="{% static 'js/base/sweetalert.min.js'%}"></script>

{% block script %}

{% endblock %}

</body>

</html>

创建templates/admin/index/index.html文件

{% extends 'admin/base/base.html' %}

{% block title %}

  首页

{% endblock %}

{% block content_header %}

  用户信息

{% endblock %}

{% block header_option_desc %}

  人生苦短，我用 python

{% endblock %}

潭州课堂25班：Ph201805201 django 项目第三十二课后台站点管理(课堂笔记）的更多相关文章

潭州课堂25班：Ph201805201 django 项目第三十六课后台文章管理（课堂笔记）
get 请求, 1,获取文章标签 , 2,拿到前台传来的值, 3,根据前台传来的值在数据库中查询 4.,返回数据到前台,渲染, 分页算法 : 在 utils 下创建 paginator_script ...
潭州课堂25班：Ph201805201 django 项目第三十五课后台用户权限的添加 mixins 课堂笔记）
验证用户登录: 对一个视图函数进行登录权限验证,(登录后才可以访问,否则重定向到登录页面) #from django.contrib.auth.decorators import login_requ ...
潭州课堂25班：Ph201805201 django 项目第三十四课后台文章标签更新功能，创建功能实现(课堂笔记）
g更改标签:,前台要向后台传来 id, name, 对标签进行校验:标签不能为空,标签是否已经存在, 流程: def put(self, request, tag_id): ''' 更改标签 :par ...
潭州课堂25班：Ph201805201 django 项目第四十二课后台课程相关，用户组管理（课堂笔记）
在线课程: 当点击进入页面时,显示所有课程 def get(self, request): courses = Course.objects.select_related('category', 't ...
潭州课堂25班：Ph201805201 django 项目第三十九课后台文章发布，图片上传到 FastDFS后端实现七牛云讲解（课堂笔记）
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数上传图片到七牛云注册 https:// ...
潭州课堂25班：Ph201805201 django 项目第三十八课后台文章发布，FastDFS安装配置（课堂笔记）
, .安装FastDFS # 从docker hub中拉取fastdfs镜像docker pull youkou1/fastdfs # 查看镜像是否拉取成功docker images # 安装trac ...
潭州课堂25班：Ph201805201 django 项目第四十六课查错补缺（课堂笔记
从讲项目开始,查找错误,完善笔记,尽可能翻译没一句代码(以后台为主), 本项目亮点,也是重点 Django ORM中对数据查询的优化(only.defer.select_related) redis ...
潭州课堂25班：Ph201805201 django 项目第四十四课项目部署（课堂笔记）
项目部署稳定,并发,效益, 一.Django配置 1.settings.py配置复制全局settings.py配置文件,创建一个副本命名为MyBlog/pro_settings.py,修改DEBU ...
潭州课堂25班：Ph201805201 django 项目第四十五课 mysql集群和负载均衡（课堂笔记)
2.使用docker安装Haproxy 一.为什么要使用数据库集群和负载均衡? 1.高可用 2.高并发 3.高性能二.mysql数据库集群方式三.使用docker安装PXC 1.拉取PXC镜像 d ...

随机推荐

AI学习吧-支付宝支付
支付宝支付流程 1.接收前端发过来的贝里数和结算金额 2.检查贝里数是否够用 3.获取结算中心的课程并应用优惠券 4.应用未绑定课程的优惠券 5.判断总价格减去优惠券价格是否等于实际支付金额 6.生成 ...
MySQL 复制表到另一个表
1.复制表结构及数据到新表 create table 新表 select * from 旧表 2.只复制表结构到新表方法1:(低版本的mysql不支持,mysql4.0.25 不支持,mysql5已 ...
Git基础（一）创建项目仓库
一.取得Git项目仓库的两种方法: 在现有目录中初始化仓库 git init 如果是在一个已经存在文件的文件夹(而不是空文件夹)中初始化Git仓库来进行版本控制的话,应该跟踪这些文件并提交,通过git ...
java使用Jsch实现远程操作linux服务器进行文件上传、下载，删除和显示目录信息
1.java使用Jsch实现远程操作linux服务器进行文件上传.下载,删除和显示目录信息. 参考链接:https://www.cnblogs.com/longyg/archive/2012/06/2 ...
webpack学习笔记--压缩代码
浏览器从服务器访问网页时获取的 JavaScript.CSS 资源都是文本形式的,文件越大网页加载时间越长. 为了提升网页加速速度和减少网络传输流量,可以对这些资源进行压缩. 压缩的方法除了可以通过 ...
【回顾】html属性、标题、段落、文本格式化
1.HTML 属性 HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以名称/值对的形式出现,比如:name="value". HTML 提 ...
自定义rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bootstrap下jQuery自动完成的样式调整-【jQuery】
1. 覆盖层调整在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖. 为了能够使后面的自动完成的层显示出来,可以使用如下 ...
JQ JS复制到剪贴板
示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
如何使用java代码启动tomcat和打开浏览器
1.用于代码启动tomcat,也可以用代码运行电脑应用程序 public static void main(String[] args) { /* new MyThread().start(); ne ...

潭州课堂25班：Ph201805201 django 项目 第三十二课 后台站点管理(课堂笔记）

一、后台站点模版抽取

1.获取静态站点模版

2.使用需要的组件

3.模版抽取

潭州课堂25班：Ph201805201 django 项目 第三十二课 后台站点管理(课堂笔记）的更多相关文章

随机推荐

热门专题

潭州课堂25班：Ph201805201 django 项目第三十二课后台站点管理(课堂笔记）

潭州课堂25班：Ph201805201 django 项目第三十二课后台站点管理(课堂笔记）的更多相关文章