轻量级Django学习（3）——静态站点生成器（一）

最新推荐文章于 2024-08-14 12:00:04 发布

chida6125

最新推荐文章于 2024-08-14 12:00:04 发布

阅读量120

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3193575/blog/836726

版权

##创建基础模板

静态站点

通常包含一系列简易的基础模板，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，可以得到下面所示的界面。
最后完成基础结构的创建后，可以继续添加登录模板。

转载于:https://my.oschina.net/u/3193575/blog/836726

chida6125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轻量级Django学习（3）——静态站点生成器（一）

##创建基础模板静态站点通常包含一系列简易的基础模板，URL模式和用于每个静态页面的文件结构快速原型观察与分析、开发（最小可行产品MVP）、部署、采纳和培训、迭代和维护最初项目结构文件（目录）架构prototypes.pysitebuilderinit.py...
复制链接

扫一扫