文档章节

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

Asian_Road
 Asian_Road
发布于 2017/02/12 11:41
字数 1415
阅读 44
收藏 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
python常用模块库清单

文本时间处理】 Chardet,字符编码探测器,可以自动检测文本、网页、xml的编码。 colorama,主要用来给文本添加各种颜色,并且非常简单易用。 Prettytable,主要用于在终端或浏览器端构建格式...

好铁
2016/12/08
240
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
Jekyll v3.8.3 发布,简单易用的静态站点生成器

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

局长
06/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部