輕量級Django學習（3）——靜態站點生成器（一）

時間 2019-11-13

原文原文鏈接

##建立基礎模板css

靜態站點html

一般包含一系列簡易的基礎模板，URL模式和用於每一個靜態頁面的文件結構python
快速原型django

觀察與分析、開發（最小可行產品MVP）、部署、採納和培訓、迭代和維護api
最初項目結構服務器

文件（目錄）架構 prototypes.py sitebuilder init.py static/ js/ css/ templates/ urls.py views.py架構

##基本設置app

在_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值。