基于Django开发的SkyNet博客一——创建模型
Django使用的是MTV框架模式，上一篇博客中已经介绍了Django中的model，这一篇博客主要讲解Template和View，
Template
Template是为了方便动态的生成html，Template中不仅有静态的部分，还有动态生成的部分。Django创建后端的Template语言，也叫Django template language(DTL)，可以看一下jinja2
首先设计一下base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}{% endblock %}
</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/semantic.min.css' %}">
<script type="text/javascript" src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'blog/js/semantic.min.js' %}"></script>
</head>
<body>
{% block header %}
{% load static %}
<link rel="stylesheet" href="{% static 'blog/css/base/banner.css' %}" type="text/css">
<script type="text/javascript" src="{% static 'blog/js/base.js' %}"></script>
<div class="ui secondary fixed menu">
<a class="ui header labeled item" href="{% url 'blog:index' %}">SkyNet</a>
<div class="item">
<div class="ui basic buttons">
<button class="ui basic button">发现</button>
<button class="ui basic button">关注</button>
<button class="ui basic button">消息</button>
</div>
</div>
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="搜索...">
<div class="ui blue submit button">搜索</div>
</div>
</div>
<div class="right menu">
<div class="right item">
<div class="ui buttons" {% if request.user.is_authenticated %}style="display: none"{% endif %}>
<a class="ui positive button" href="{% url 'blog:login' %}">
登录
</a>
<div class="or"></div>
<a class="ui button" href="{% url 'blog:register' %}">
注册
</a>
</div>
</div>
<div class="ui simple dropdown item" {% if not request.user.is_authenticated %}style="display: none"{% endif %}>
<span class="text">{{ request.user.username }}</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="#">我的主页</a>
<a class="item" href="#">我的评论</a>
<a class="item" href="{% url 'blog:logout' %}">登出</a>
</div>
</div>
<div class="item">
<a href="{% url 'blog:edit' %}">写文章</a>
</div>
</div>
</div>
{% endblock %}
{% block content %}
{% endblock %}
<footer>
{% block footer %}
{% endblock %}
</footer>
</body>
</html>
首先先给个图吧
base.png
- 使用了block块，可以让继承base.html的Template自定义各块的内容。
- 定义了block header，是继承了base.html的都包含该header，如若不需要则只需重写即可
- load static可以导入静态文件，需要在settings设置静态文件的导入路径。
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
如果需要将静态文件放入自己的app中，只需创建如下目录
blog
static
blog
...
而我这里是创建了image，css，js等文件夹，方便导入。
需要导入css和js如下格式
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/semantic.min.css' %}">
<script type="text/javascript" src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'blog/js/semantic.min.js' %}"></script>
注意我这里导入了三个文件，两个是semantic库的，另外一个是jquery的，并且两个js的顺序不能颠倒哦，因为semantic的js是依赖jquery的。
#这些用法在jinja2中都有所介绍，不懂的可以去看一下
{% 语句 %}
#{% load static %}用来导入static tags，方便后续的使用
#{% static 'path' %}导入路径为path的静态文件
#{% url 'namespace:name' %} 指向对应的url
{{ 变量 }}
4.其他的都是semantic ui的知识了，自己也还在钻研中。
上述代码还没有全部完成，base.html就先介绍到这了。
下一篇:
[基于Django开发的SkyNet博客三——登录注册界面](基于Django开发的SkyNet博客三——登录注册界面](http://www.jianshu.com/p/64b6fa55965f)
网友评论