关闭

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

标签: django
218人阅读 评论(0) 收藏 举报
分类:

本节设置首页和登录页

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链接, 以及把前后的<!--       -->删除


浏览器进入主页确认


点击主页上的登录按钮



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7607次
    • 积分:309
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论