##创建基础模板
-
静态站点
通常包含一系列简易的基础模板,URL模式和用于每个静态页面的文件结构
-
快速原型
观察与分析、开发(最小可行产品MVP)、部署、采纳和培训、迭代和维护
-
最初项目结构
文件(目录)架构 prototypes.py sitebuilder init.py static/ js/ css/ templates/ urls.py views.py
##基本设置
- 在_prototypes.py_文件中加入下面的基本设置,同时把_sitebuilder_应用添加到**INSTALLED_APPS **设置中:
```
import sys from django.conf import settings settings.configure( DEBUG = True, SECRET_KEY = 'o5#@@7pyg#2absxle&_3j5dfkcfusozlr4$t2d^psgffu@7a4$', ROOT_URLCONF = 'sitebuilder.urls', MIDDLEWARE_CLASSES = (), INSTALLED_APPS =( 'django.contrib.staticfiles', 'sitebuilder', ), TEMPLATES =( { 'BACKEND':'django.template.backends.django.DjangoTemplates', 'DIRS':[], 'APP_DIRS':True, }, ), STATIC_URL = '/static/', ) if name == 'main': from django.core.management import execute_from_command_line execute_from_command_line(sys.argv) ```
-
还要在_urls.py_中加入URL设置,就是下一行代码:
urlspatterns = ()
-
现在我们尝试启动项目来进行一次快速的完整性检查:
python prototype.py runserver
修饰页面
-
在_templates_文件夹下创建两个基础模板:base.html_和_page.html,同时建立pages文件夹存放所有的原型页面
-
为了使静态站点生成器方便快捷地创建新页面,需要添加引用文件路径所需的设置变量、修饰页面所需的视图,以及指向动态页面所需的轻量级URL结构
首先在_prototypes.py_文件中设置变量来添加引用文件夹的方式
import os import sys from django.conf import settings BASE_DIR = os.path.dirname(file) ... STATIC_URL = '/static/', SITE_PAGES_DIRECTORY = os.path.join(BASE_DIR,'pages'), ... ``` 现在我们可以方便地访问存放原型文件的_pages_文件夹,我们最终想要的搭建的效果是创建一个具有URL结构的站点,并通过每个页面的内容来匹配_pages_文件夹下的文件。页面的布局将由定义在templates文件夹中的模板确定。从而帮助我们从页面布局中分离页面内容
- 创建_views.py_文件来动态修饰页面以供我们在本地使用。先添加一个视图修饰pages文件夹下的每个模板。
import os from django.conf import settings from django.http import Http404 from django.shortcuts import render from django.template import Template from django.utils._os import safe_join def get_page_or_404(name): # "返回Django模板内容或404" try: # 使用safe_join来将页面文件路径和模板文件名连接起来,并返回规范化的最终的决定路径 file_path = safe_join(settings.SITE_PAGES_DIRECTORY,name) except ValueError: raise Http404('Page Not Found') else: if not os.path.exists(file_path): raise Http404('Page Not Found') # 打开每个文件并使用文件内容创建新的Django模板 with open(file_path,'r') as f: page = Template(f.read()) return page def page(request,slug='index'): # "Render the requested page if found." file_name = '{}.html'.format(slug) page = get_page_or_404(file_name) context = { 'slug':slug, 'page':page, } #将要修饰的page和slug上下文传递给page.html布局模板 return render(request,'page.html',context) ```
> 要完成视图,需要_templates_文件夹下的_pages.html_模板对原型页面修饰,记住修饰所包含的环境是通过一个名为_page_的上下文变量传递的。
```html
{% extends "base.html" %} {% block title %}{{ block.super}} - {{ slug|capfirst }}{% endblock %} {% block content %} {% include page %} {% endblock %} ```
-
视图环境配置之后,创建_urls.py_文件,包含发送对列表和详细页面请求的地点
from django.conf.urls import url from .views import page urlpatterns = ( url(r'^(?P<slug>[\w./-]+)/$',page,name='page'), url(r'^$',page,name='homepage'), ) ```
> 完成基本模板之后,就可以添加创建静态站点所需的任意内容。服务器根目录 / 将在不传递**slug**参数的形式下调用**pages**视图,这意味着它会使用默认的**index**作为**slug**值。为了修饰主页面,可以在pages文件夹下添加一个基础的_index.html_模板测试应用运行情况。
原型布局和导航
-
我们采用Bootstrap中基于列的布局样式,创建一个简单的首页布局,接着使用一个简单的导航来制作其他页面。
-
改进的_index.html_模板(位于pages文件夹下),我们使用了page的URL来创建到其他原型页面的URL。同时注意到,这里正在使用Django的{% lorem %}标签来生成主页的占位文字,这些标签帮助我们更快地创建页面。
<div class="jumbotron"> <div class="container"> <h1>Welcome To the Site</h1> <p>Insert marketing copy here.</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>About</h2> <p>{% lorem %}</p> </div> <div class="col-md-6"> <h2>Content</h2> <p>{% lorem %}</p> <p> <a class="btn btn-default" href="{% url 'page' 'contact' %}" role="button"> Contact us >> </a> </p> </div> </div> </div> <hr> <footer> <div class="container"> <p>© Your Company {% now 'Y' %}</p> </div> </footer> ``` - 在_base.html_模板(_templates_下)中添加一些基础的导航来作为站点级别的导航。在body标签内已经添加了{% block body-id %}模板标签,可以帮助我们为页面的每个部分指定CSS样式。
```html
...
<body id="{% block body-id %}body{% endblock %}"> {% block top-nav-wrapper %} <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Rapid Prototypes</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li {% if slug == 'index' %} class="active" {% endif %}> <a href="/">Home</a> </li> <li {% if slug == 'contact' %} class="active"{% endif %}> <a href="{% url 'page' 'contact' %}">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li {% if slug == 'login' %} class="active"{% endif %}> <a href="{% url 'page' 'login' %}">Login</a> </li> </ul> </div> </div> </div> {% endblock %} {% block content %}{% endblock %} ... ``` - 我们还要需把上面的内容加到_page.html_布局中(_templates_文件夹下),我们使用页面的{{ slug }}值来为每个页面创建动态的ID值。
```html
{% extends "base.html" %} {% block title %}{{ block.super}} - {{ slug|capfirst }}{% endblock %} {% block body-id %}{{ slug|slugify }}{% endblock %} {% block content %} {% include page %} {% endblock %} ``` >这里添加了一个slugify筛选器来将页面生成的片段转换为小写值,并生成为一致的ID值。
-
再次运行python prototype.py runserver,可以得到下面所示的界面。
-
最后完成基础结构的创建后,可以继续添加登录模板。