文档章节

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

Asian_Road
 Asian_Road
发布于 2017/02/12 11:41
字数 1415
阅读 47
收藏 1

##创建基础模板

  • 静态站点

    通常包含一系列简易的基础模板,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>&copy; 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,可以得到下面所示的界面。

    输入图片说明

  • 最后完成基础结构的创建后,可以继续添加登录模板。

© 著作权归作者所有

共有 人打赏支持
Asian_Road
粉丝 7
博文 5
码字总数 5109
作品 0
苏州
程序员
私信 提问
【译】用Go实现一个静态博客生成器

【译】用Go实现一个静态博客生成器 Go语言学习园地博客2017-06-2028 阅读 go生成器 静态站点生成器是一种工具,给一些输入(例如,markdown),使用HTML,CSS和JavaScript生成完全静态的网站...

Go语言学习园地博客
2017/06/20
0
0
python资料全集

python: 微信公众号开发小记——2.80端口上的服务 python: 微信公众号开发小记——3.接入三方登录 使用python编写一个壁纸网站的简单爬虫 python: python List 用法 Python 中各个时间复杂度...

d_watson
2016/04/15
175
0
Jekyll v3.8.3 发布,简单易用的静态站点生成器

Jekyll 是一个简单的博客形态的静态站点生成器,适用于个人、项目或组织站点。可以想像它是一个基于文件的 CMS ,没有任何复杂性。 Jekyll 收集你的内容,呈现 Markdown 和 Liquid 模板,并生...

局长
06/06
336
1
Python函数基础教程-张明阳-专题视频课程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a2011480169/article/details/83579571 Python函数基础教程—730人已学习 课程介绍 通过本次课程的讲解,可以...

安静的技术控
2017/12/15
0
0
Python支持库大全

Awesome Python A curated list of awesome Python frameworks, libraries and software. Inspired by awesome-php. Awesome Python Environment Management    环境管理 Package Manageme......

openthings
2016/03/17
765
1

没有更多内容

加载失败,请刷新页面

加载更多

基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
5分钟前
0
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linux-tao
7分钟前
0
0
设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
24分钟前
4
0
mybatis学习(1)

JDBC连接方式: 1.底层没有使用连接池,操作数据库需要频繁的创建和关闭连接,消耗资源。 2.写原生的JDBC代码在JAVA中,一旦需要修改SQL的话(比如表增加字段),JAVA需要整体重新编译,不利...

杨健-YJ
今天
4
0
怎么组织文档

可以从以下几个方面考虑组织文档: ☐ 各种分支的界面截图和对应的类及文件 ☐ 框架或类图 ☐ 流程图 ☐ 时序图 ☐ 注意事项

-___-
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部