Django建教育平台(六)--首页和登录页面配置

本节设置首页和登录页

1. 复制主页静态文件

a. 复制index.html文件

上本项目的Github, copy index.html文件, copy到templates文件夹中.

b. 复制其他静态文件
上本项目的Github, copy static文件夹下的所有文件.



2. 配置处理静态文件

a. elearn_py3/urls中增加代码

from django.views.generic import TemplateView  # 新增代码
import xadmin

urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),

url('^$', TemplateView.as_view(template_name="index.html"), name="index")  # 新增代码
]

b.浏览器查看效果

发现显示效果不齐全



打开浏览器的开发者模式, 再刷新网页, 发现以下三个文件加载不到.



c. 指定静态文件位置

在settings最下方添加代码

STATIC_URL = '/static/'  # 原有代码
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]  # 新增代码, 如果用圆括号括起来, 偶尔会报错, 改为中括号.

在index.html中引用静态文件

修改前代码:

<link rel="stylesheet" type="text/css" href="../css/reset.css">  # ..处并没有指明路径
<link rel="stylesheet" type="text/css" href="/static/css/animate.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">

<script src="../js/jquery.min.js" type="text/javascript"></script>  # ..处并没有指明路径
<script src="../js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

修改后代码:

<link rel="stylesheet" type="text/css" href="/static/css/reset.css">  # ..改为/static/
<link rel="stylesheet" type="text/css" href="/static/css/animate.css">  # ..改为/static/
<link rel="stylesheet" type="text/css" href="/static/css/style.css">  # ..改为/static/

<script src="/static/js/jquery.min.js" type="text/javascript"></script>  # ..改为/static/
<script src="/static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>  # ..改为/static/

浏览器确认效果



基本样式已经出来了, 但还有很多图片没加载, 是因为很多图片的路径还是没有修改.

在index.html中查找 ../image, 将../修改成/static/image



在index.html中查找 ../js, 将../修改成/static/js



在index.html中查找 ../media, 将../修改成/static/media



以上操作, 也可以合并为将../替换成../static/

浏览器查看效果, 图片已经能正常显示.

3. 配置login.html

a. 将Github上的login.html文件复制到templates文件夹下



b. 替换../

将login.html中的../css替换成/static/css

将login.html中的../js替换成/static/js

将login.html中的../images替换成/static/images

c. url配置

elearn_py3/urls中修改代码:

urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),

url('^$', TemplateView.as_view(template_name="index.html"), name="index"),
url('^login/$', TemplateView.as_view(template_name="login.html"), name="login")  # 新增代码, 写法与index类似.
]

d. index.html对login.html的链接配置

在index.html中搜索"登录", 定位到login链接位置



修改login链接, 以及把前后的<!--       -->删除



浏览器进入主页确认



点击主页上的登录按钮