Flask 教程，第十二部分：整合

已翻译 100%

参与翻译 (1人) : lomatus

打印

仅中文中英文对照仅英文

加载中

This is the twelfth article in the series in which I document my experience writing web applications in Python using the Flask microframework.

The goal of the tutorial series is to develop a decently featured microblogging application that demonstrating total lack of originality I have decided to callmicroblog.

Here is an index of all the articles in the series that have been published to date:

这篇文章是我记录我使用Python的微型框架Flask来编写网络程序的经验系列文章的第十二篇。

这系列教程的目的是开发一个功能像样的微型博客应用，并展示所有并非独创的，我决定称之为微型博客（轻博客？）。

这里是系列教程的目录，迄今为止已经发布的如下：

Introduction

If you have been playing with themicroblogapplication you must have noticed that we haven't spent too much time on its looks. Up to now the templates we put together were pretty basic, with absolutely no styling. This was useful, because we did not want the distraction of having to write good looking HTML when we were coding.

But we've been hard at work coding for a while now, so today we are taking a break and will see what we can do to make our application look a bit more appealing to our users.

This article is going to be different than previous ones because writing good looking HTML/CSS is a a vast topic that falls outside of the intended scope of this series. There won't be any detailed HTML or CSS, we will just discuss basic guidelines and ideas so on how to approach the task.

介绍

如果你耍过一会微博程序，你一定会注意到我们还没有花费很多时间在它的外表上。到目前为止我们模版部分的组织还非常基础，且没有任何样式。这样很有好处，因为我们并不希望在编程时分散注意力到写好看HTML上。

但是现在我们不得不认真地花费些许时间来写了，所以今天我们中断一会来看看我们可以做些什么来让我们的程序对用户来说具有一些吸引力。

这篇文章与之前的将有所不同，因为写漂亮的HTML/CSS是一个浩瀚的话题并且会脱离这个系列文章初衷。这里讲不会有详细的HTML或CSS代码，我们将要讨论的是基本的路线和想法来更接近于完成该任务

How do we do this?

While we can argue that coding is hard, our pains are nothing compared to those of web designers, who have to write templates that have a nice and consistent look on a list of web browsers, most with obscure bugs or quirks. And in this modern age they not only need to make their designs look good on regular browsers but also on the resource limited browsers of tablets and smartphones.

Unfortunately, learning HTML, CSS and Javascript and on top of that being aware of the idiosyncrasies of each web browser is a task of uncertain dimensions. We really do not have time (or interest) to do that. We just want our application to look decent without having to invest a lot of energy.

So how can we approach the task of stylingmicroblogwith these constraints?

我们如何做？

当我们可以证明编程很苦逼，相比网页设计者来说我们的痛苦什么也不是，他们必须写出漂亮的并且在清单里的每一个浏览器里都显示一致的模版，而这些浏览器大多隐藏了BUG或者奇特的问题。再者在这个时代，他们不仅仅需要使他们的设计在不合格的浏览器里看起来不错，还要在资源有限的平板和智能手机的浏览器里显示。

不幸的是，学习HTML、CSS和Javascript并避免在不同浏览器显示正常是一个不确定及测算的任务。我们真的没有时间（或者兴趣）做这个。我们只是想让我们的程序看起来正常并且少花费精力。

所以我们如何在这么多限制下完成添加样式到我们的微型博客的任务？

Introducing Bootstrap

Our good friends at Twitter have released an open source web framework called Bootstrap that might be our winning ticket.

Bootstrap is a collection of CSS and Javascript utilities for the most common types of web pages. If you want to see the kind of pages that can be designed with this framework here are some examples.

These are some of the things Bootstrap is good at:

Similar looks in all major web browsers
Handling of desktop, tablet and phone screen sizes
Customizable layouts
Fully styled navigation bars
Fully styled forms
And much, much more...

介绍Bootstrap

我们来至Twitter的好朋友发布一个开源的Web框架叫Bootstrap ，它可能就是我们制胜关键。

Bootstrap是一个用于所有通用类型的网页开发的CSS和Javascript组件集合。如果您想看看使用这个框架可以开发的页面效果，这里是一些样例。

下面是Bootstrap擅长的地方：

在主流浏览器上显示一致
自动捕获桌面，手机和平板的屏幕尺寸
自定义布局
完整样式的导航条
完整样式的表单
还有很多很多...

Bootstrapping microblog

Before we can add Bootstrap to our application we have to install the Bootstrap CSS, Javascript and image files in a place where our web server can find them.

In Flask applications theapp/staticfolder is where regular files go. The web server knows to go look for files in these location when a URL has a/staticprefix.

For example, if we store a file namedimage.pngin/app/staticthen in an HTML template we can display the image with the following tag:

<img src="/static/image.png" />

We will install the Bootstrap framework according to the following structure:

/app
    /static
        /css
            bootstrap.min.css
            bootstrap-responsive.min.css
        /img
            glyphicons-halflings.png
            glyphicons-halflings-white.png
        /js
            bootstrap.min.js

Then in theheadsection of our base template we load the framework according to the instructions:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
  </head>
  ...
</html>

Thelinkandscripttags load the CSS and Javascript files that come with Bootstrap. Note that one of the required Javascript files is jQuery, which is used by some of the Bootstrap plugins.

Bootstrap微型博客

在我们将Bootstrap添加到我们程序中前，首先需要安装BootStrap的CSS/Javascript/图片等文件到我们Web服务器能够找到的地方.

在Flask内app/static目录就是这些文件合适的去处。服务器知道如何去找到这些文件如果它的URL包含了/Static前缀。

例如，如果我们保存一个文件名为image.png的文件到/app/static，

<img src="/static/image.png" />

我们将依据下列的结构来安装 Bootstrap 框架：

/app
    /static
        /css
            bootstrap.min.css
            bootstrap-responsive.min.css
        /img
            glyphicons-halflings.png
            glyphicons-halflings-white.png
        /js
            bootstrap.min.js

然后我们遵从操作指南在基础模版的<head>标签内添加如下代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
  </head>
  ...
</html>

Themetatag enables Bootstrap's responsive mode, which scales the page appropriately for desktops, tablets and smartphones.

With these changes incorporated into ourbase.htmltemplate we are ready to start implementing Bootstrap, which simply involves changing the HTML in our templates.

The changes that we will make are:

Enclose the entire page contents in a single column fixed layout with responsive features.
Adapt all forms to use Bootstrap form styles.
Replace our navigation bar with a Navbar.
Convert the previous and next pagination links to Pager buttons.
Use the Boostrap alert styles for flashed messages.
Use styled images to represent the suggested OpenID providers in the login form.

We will not discuss the specific changes to achieve the above since these are pretty simple. For those interested, the actual changes can be viewed in diff form on this github commit. The Bootstrap reference documentation will be useful when trying to analyze the newmicroblogtemplates.

将这些改动添加到我们base.html模版里，我们就可以开始使用Bootstrap了，它简单地在我们的模版里做了些修改。

我们所要做的修改如下:

将所有页面内容封装在单列的固定布局内，它包含了响应式功能.
使用Bootstrap的表单样式改写所有表单.
将我们的导航栏替换为Navbar.
转换我们的上一页和下一页链接为Pager按钮.
使用Boostrap的警告样式替换FLASH信息栏.
在登陆表单中使用样式化图片来替换建议的OpenID提供商.

我们将不会讨论以上这些特殊的修改因为这些很简单。有意思的是，这些修改都可以在这个github提交用diff来查看。Bootstrap参考手册在尝试分析新的微型博客模版时会非常有用。

Final words

Today we've made the promise to not write a single line of code, and we stuck to it. All the improvements we've made were done with edits to the template files.

To give you an idea of the magnitude of the transformation, here are a few before and after screenshots. Click on the images to enlarge.