PConline 資訊】7月24日消息：NASA發現新地球！7月24日凌晨零時，NASA舉辦媒體電話會議宣布開普勒空間望遠鏡的最新發現——NASA發現新地球“Kepler 452b”。

NASA發現新地球

據悉，開普勒空間望遠鏡所發現的Kepler 452b，位于天鵝座，繞著一顆與太陽非常相似的恒星運行。那顆恒星的質量比太陽多4%，亮度高出太陽10%。Kepler-452到那顆恒星的距離跟地球到太陽的距離相同。

另外，“Kepler 452b”與地球的相似指數為0.98。Kepler 452b的直徑比地球大60%，Kepler-452公轉一圈是385天，地球為365天。Kepler 452b應該有60億年歷史，地球為45億年。

Kepler 452b是迄今為止發現的最接近地球的“孿生星球”，極有可能存在大氣層和流動水。

對于“NASA發現新地球”，NASA表示，由于缺乏關鍵數據，現在不能說Kepler 452b究竟是不是“另外一個地球”，只能說它是“迄今最接近另外一個地球”的系外行星。

盡管如此，這仍是人類認識茫茫宇宙的又一里程碑。宇宙深邃迷人，我們無法像宇航員那樣直接看到眼前的宇宙美景，但卻不妨礙我們將身邊的智能設備化身天文觀測站，欣賞茫茫星海。下面小編為大家推薦幾款用來看星星的天文軟件，讓大家盡享璀璨的星河美景。

谷歌的地圖類服務一直很贊，無論是天文地理，谷歌都有涉及而且做得相當出彩。在桌面版本的谷歌地球上谷歌已經整合了星空探索功能，受到了廣大用戶的好評。那么這款谷歌出品的App谷歌星空表現如何呢？我們一起來看看。

打開谷歌星空，會先出現一個啟動界面，這個界面有點模糊，看來并沒有采用高清素材。谷歌星空最后一次更新是在2011年年底，那時候還沒有什么高分辨率的機器，希望谷歌星空能夠進一步改進吧。進入App后直接進會鎖定你所在的地理位置，并呈現當前天空上的星辰分布，簡單直接。如果你的Android設備支持電子羅盤功能的話，谷歌星空可以根據你的設備對準的方位顯示相應的天體，十分有趣，但不知道是什么原因畫面會有些抖動。

谷歌星空的啟動界面和主界面

谷歌星空可以顯示天空中的恒星、星座、天球網格等等，我們可以通過觸摸屏幕呼出開關按鈕來決定什么才會被顯示，也可以關閉自動位移天空的功能。谷歌星空的操作方法很簡單，雙指張合可以控制視野大小。谷歌星空還具有其他一些功能，我們一起來看看。

觸摸屏幕和點擊菜單鍵可以呼出不同的功能

查找天體功能

一些設置選項

可查看NASA照片，也可以查看特性時間的天體運行

總的來說，谷歌星空使用起來很簡單，但信息量不算大。谷歌星空為谷歌官方出品，有谷歌情結的朋友可以下載嘗試。

星圖是一款用以觀測星空的App，在天文愛好者中有著十分不錯的口碑。下面我們來試用以下星圖，看看有何神通之處。

和谷歌星空類似，星圖啟動之時也會先彈出一個歡迎界面，接下來就進入到星空瀏覽了。說實在，星圖所顯示的星空比谷歌星空華麗多了，宇宙更有層次感，而且銀河、星座、星云等元素都處理得如夢似幻。

星圖的界面童話一般，猶如銀河鐵道之夜

點擊某個天體，星圖會出現該天體的詳細信息，有時候甚至還會帶上圖片。如果你查看的是月球或者是太陽系的行星，星圖會為你提供這個星球的三維圖像，轉動觀察該星球的視角時，宇宙背景也會相應改變，十分逼真。

可查看天體信息，甚至有相關天體的3D模型

點擊菜單鍵可以喚出星圖的功能菜單。“增強現實模式”就是和谷歌星空一樣，在裝載了電子羅盤的Android設備上可以隨手機所對方位轉動星空。夜間模式則可以模擬紅外線觀測。當然，改變觀測地理位置、搜索星體等功能也沒有拉下。我們一起來看看星圖的功能吧。

使用功能按鈕可打開夜間模式

可設置天空中顯示何種信息，可設置地理位置

查找天體很方便

Stellarium虛擬天文館是一款星空觀測軟件。雖然通過Stellarium看到的星空沒有大自然中的壯麗，但是卻能對星空進行更詳細多角度的觀測，銀河、夏日大三角、流星雨等皆不在話下。下面我們一起透過Stellarium，來看看燈火掩蓋下的星辰。

首先安裝好Stellarium，打開后可以看到主界面。此時很多人一看，大概就已經開始呼喚坑爹了吧——軟件界面不僅是英文的，而且連一顆星星也看不到！不用急，先按F2或者軟件界面左側的“設定”按鈕，在彈出的設置菜單中把語言調為中文。看不到星星的朋友是因為打開軟件之時該地點為白天，此時只需要把軟件底部“大氣層”的選項關閉就可以了，或者你喜歡一直等到晚上也可以。

設置好語言

時間是白天的話關閉大氣層就能看到星空了

之后，我們需要調節一下所在地點。按F6或者軟件左側的“所在地點”按鈕呼出菜單，則可設置所在地點。有趣的是，觀星地點可不限于地球——諸位喜歡的話也可以看看火星人眼里的夜空。

設置觀測地點

在月球上看地球的感覺也不錯

也可以做做火星人

接著按F4或者軟件左側的“星空及顯示”按鈕作一些設置。我們可以設置Stellarium顯示什么星體、星體如何顯示、使用黃道或者赤道坐標等等，功能十分豐富。

“星空及顯示”設定

當然，我們也可以通過按F3或者軟件左側的“搜索”按鈕尋找天體。

搜索不支持中文

不過只能通過拜耳命名法的希臘字母來尋找，對于一般人來說不太方便。

Stellarium不僅可以觀察現時的星空，還能夠洞悉過去未來天體的運行。我們只需要按F5或者點擊軟件左側的“時間/日期”按鈕既可設置時間，真心不需要從白天等到晚上。想回到當前時間，按“8”即可。

我們把時間設到一次流星雨的爆發夜

設置流星數量

華麗的流星雨就出現了

此外，在軟件的底部可以對星空的顯示進行快捷設置。可以開關坐標系、星座連線、星座標識、時間流動等等功能，十分便捷。

可以顯示星座圖繪，也可以通過底部按鈕實現其他功能

事實上，Stellarium這款軟件在天文愛好者中一直享有不錯的口碑——星圖準確，資料齊全，使用方便，功能強大。雖然Google Earth也能觀測星空，而且擁有豐富的天文資料（來自哈勃望遠鏡的天文照片尤為珍貴），但使用起來卻沒有Stellarium那么直觀，觀測點也不是地表。就“看星星”這一功能而言，小編認為Stellarium更加合適。

觀望太陽系（Eyes on the Solar System）

觀望太陽系是由NASA的噴氣推進實驗室（Jet Propulsion Lab）針對Mac和PC平臺發布的一款觀星軟件（點擊下載）。通過它可以看到現場直播模擬畫面——來源于新視野號。

通過軟件我們可以觀看直播模擬畫面

雖然只是模擬，畢竟從那么遠的距離要做視頻直播還是不大現實的事情，但這種模擬應該可以滿足很多人的好奇心。NASA在這上面發布最新的探測照片，有興趣的同學可以下載欣賞。

鍵盤也能翻頁，試試“← →”鍵

樂高蝙蝠俠攻擊飛艇99

超吊炸天!微星GT80頂配

2015新款!NB 999跑鞋522

索康尼男士復古跑鞋198

可插卡迷你藍牙音響39.9

Moto x 32GB全網通2K3

微信突然屏蔽Uber？

電視盒子都不能裝App了？

揭秘六大科技謊言

神配置 MX5Pro要逆天

Win10預覽版鎖屏壁紙

微軟Bing5月高清壁紙

唯美花朵攝影高清壁紙

《刺客信條：梟雄》

《史努比》電影壁紙

八云紫動漫壁紙桌面

超甜美校園美女壁紙

萌萌的古裝少女壁紙

軟件論壇帖子排行

1. 9066次1
2. 4092次2
3. 3788次3
4. 3646次4
5. 2734次5
6. 1695次6
7. 193次7
8. 10

天給大家帶來的是模板項目實戰，先給大家看一下效果圖

說明：

• 點擊圖片后會跳轉到對應的詳情頁面
• 數據：

movies = [
    {
        'id': '34532',
        'title': u'胖子行動隊',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'寶貝兒 / 李成敏 Clara Lee / 文章 Zhang Wen'
    },
    {
        'id': '394558',
        'title': u'李茶的姑媽',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'錢晨光 / 吳瑾蓉 / 黃才倫'
    },
    {
        'id': '26921827',
        'title': u'找到你',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'姚晨 / 馬伊琍 / 袁文康'
    },
    {
        'id': '26287884',
        'title': u'悲傷逆流成河',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'趙英博 / 任敏 / 辛云來'
    },
    {
        'id': '26287884',
        'title': u'嗝嗝老師',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    }
]

# 電視劇
tvs = [
    {
        'id': '235434',
        'title': u'如懿傳',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg',
        'rating': u'7.4',
        'comment_count': 49328,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    },
    {
        'id': '48373095',
        'title': u'奇葩說第五季',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg',
        'rating': u'8.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原實矩 / 森繪梨佳 / 櫻田通 /'
    },

    {
        'id': '27005982',
        'title': u'最親愛的你',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'杰西·普萊蒙 / 莫莉·香儂 / 布萊德利·惠特福德 / Maude Apatow / 麥迪遜·貝蒂 /'
    },
    {
        'id': '30290917',
        'title': u'我們無法成為野獸',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'鐘漢良 / 楊穎 / 甘婷婷 / 孫藝洲 / 亓航 /'
    },
    {
        'id': '292843',
        'title': u'奇遇人生',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托馬斯·哈登·丘奇 / 泰倫斯·霍華德 / 波伊德·霍布魯克 / 瑞斯·維克菲爾德 / 馬爾洛·托馬斯 /'
    }
]

• 說明

1. 頁面只顯示三個
2. 下面淺藍色為背景色。

我們先來完成首頁的功能

大家可以先自己試著做一下，然后再看船長的代碼：

先新建一個項目microPro：

app.py

# coding: utf-8

from flask import Flask
import flask

app = Flask(__name__)  # type: Flask
app.debug = True

# 電影
movies = [
    {
        'id': '34532',
        'title': u'胖子行動隊',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'寶貝兒 / 李成敏 Clara Lee / 文章 Zhang Wen'
    },
    {
        'id': '394558',
        'title': u'李茶的姑媽',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'錢晨光 / 吳瑾蓉 / 黃才倫'
    },
    {
        'id': '26921827',
        'title': u'找到你',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'姚晨 / 馬伊琍 / 袁文康'
    },
    {
        'id': '26287884',
        'title': u'悲傷逆流成河',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'趙英博 / 任敏 / 辛云來'
    },
    {
        'id': '26287884',
        'title': u'嗝嗝老師',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    }
]

# 電視劇
tvs = [
    {
        'id': '235434',
        'title': u'如懿傳',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg',
        'rating': u'7.4',
        'comment_count': 49328,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    },
    {
        'id': '48373095',
        'title': u'奇葩說第五季',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg',
        'rating': u'8.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原實矩 / 森繪梨佳 / 櫻田通 /'
    },

    {
        'id': '27005982',
        'title': u'最親愛的你',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'杰西·普萊蒙 / 莫莉·香儂 / 布萊德利·惠特福德 / Maude Apatow / 麥迪遜·貝蒂 /'
    },
    {
        'id': '30290917',
        'title': u'我們無法成為野獸',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'鐘漢良 / 楊穎 / 甘婷婷 / 孫藝洲 / 亓航 /'
    },
    {
        'id': '292843',
        'title': u'奇遇人生',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托馬斯·哈登·丘奇 / 泰倫斯·霍華德 / 波伊德·霍布魯克 / 瑞斯·維克菲爾德 / 馬爾洛·托馬斯 /'
    }
]

@app.route('/')
def hello_world():
    context = {
        "movies": movies,
        "tvs": tvs
    }
    return flask.render_template('index.html', **context)

if __name__ == '__main__':
    app.run()

這里只需要渲染數據即可，即將**context傳給模板。

index.html

<!DOCTYPE html> <html lang="en"> <head>      <meta charset="UTF-8">      <title>首頁</title>      <style>         *{             padding: 0;                          margin: 0;             list-style: none;                          text-decoration: none;             font-family: "Microsoft Ya Hei";          }         .page{             width: 375px;             height: 667px;                          background: #d1fcff;          }         .page .searich-group{             padding: 14px 8px;             background: #41b357;          }         .page .searich-group .search-input{             {# 塊級元素 #}             display: block;             height: 30px;                          width: 100%;                          background: #fff;             {# 與盒子整體匹配 #}                          box-sizing: border-box;             {# 搜索框不顯示 #}             border: none;             {# 鼠標點擊搜索框后不顯示邊框 #}             outline: none;             {# 邊框圓角 #}             border-radius: 5px;          }                    .list-group{             background: #fff;             padding: 17px 18px;          }                    .list-group .group-top{             font-size: 18px;             {# 獲取浮動元素 #}             overflow: hidden;          }                    .group-top .group-title{             float: left;             color: #000;          }                    .group-top .more-btn{             float: right;          }                    .any-group{             margin-top: 20px;             overflow: hidden;          }          .any-group .item-group{             width: 100px;             float: left;             margin-right: 8px;          }                    .item-group .thumbnail{             width: 100%;             height: 140px;          }                    .item-group .item-title{             text-align: center;             margin-top: 12px;          }          .item-group .item-rating{             color: #acacac;             text-align: center;             font-size: 12px;          }                    .item-rating img{             width: 10px;             height: 10px;          }      </style> </head> <body>      <div class="page">      {# 搜索框 #}      <div class="searich-group">          <input class="search-input" type="text" placeholder="請輸入查詢條件">      </div>      {# 電影 #}      <div class="list-group">          <div class="group-top">              <span class="group-title">電影</span>              <a href="#" class="more-btn">更多</a>          </div>          <div class="any-group">              {% for movie in movies[0:3] %}                  <div class="item-group">                      <img src="{{ movie.thumbnail }}" class="thumbnail" alt="">                      <p class="item-title">{{ movie.title }}</p>                      <p class="item-rating">                      {# 確定整星個數 #}                      {% set lights = ((movie.rating|int)/2)|int %}                      {# 確定半個星個數 #}                      {% set halfs = ((movie.rating|int)%2) %}                      {# 灰色星星個數 #}                      {% set grays = 5 - lights - halfs %}                      {# 渲染高亮星星 #}                      {% for light in range(0, lights) %}                          <img src="{{ url_for('static', filename='img/rate_light.png') }}">                      {% endfor %}                      {# 渲染半高亮星星 #}                      {% for light in range(0, halfs) %}                          <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                      {% endfor %}                      {# 渲染灰色星星 #}                      {% for light in range(0, grays) %}                          <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                      {% endfor %}                      {{ movie.rating }}                      </p>                  </div>              {% endfor %}          </div>      </div>      {# 電視劇 #}               <div class="list-group">                   <div class="group-top">                       <span class="group-title">電視劇</span>                             <a href="#" class="more-btn">更多</a>                   </div>                       <div class="any-group">                        {% for tv in tvs[0:3] %}                                    <div class="item-group">                                  <img src="{{ tv.thumbnail }}" class="thumbnail" alt="">                                <p class="item-title">{{ tv.title }}</p>                                 <p class="item-rating">                                    {# 確定整星個數 #}                                    {% set lights = ((tv.rating|int)/2)|int %}                                     {# 確定半個星個數 #}                                    {% set halfs = ((tv.rating|int)%2) %}                                    {# 灰色星星個數 #}                                    {% set grays = 5 - lights - halfs %}                                    {# 渲染高亮星星 #}                                    {% for light in range(0, lights) %}                                        <img src="{{ url_for('static', filename='img/rate_light.png') }}">                                    {% endfor %}                                    {# 渲染半高亮星星 #}                                    {% for light in range(0, halfs) %}                                        <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                                    {% endfor %}                                    {# 渲染灰色星星 #}                                    {% for light in range(0, grays) %}                                        <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                                    {% endfor %}                                    {{ tv.rating }}                                </p>                            </div>                     {% endfor %}                 </div>             </div>          </div>      </body> </html>

上面代碼綜合了之前學過的知識，包括：flask for 循環、set模板賦值其余都是前端的內容，這里不做過多的闡述。

• 分析優化

觀察index.html中設置星星顯示數量代碼，我們發現在電影和電視劇兩部分的代碼是大體一致的，遇到重復代碼就要想到優化，這里就可以用到我們學過的宏來簡化上面的代碼：

<div class="list-group">    <div class="group-top">    <span class="group-title">電影</span>    <a href="#" class="more-btn">更多</a></div><div class="any-group">    {% for movie in movies[0:3] %}        <div class="item-group">            <img src="{{ movie.thumbnail }}" class="thumbnail" alt="">            <p class="item-title">{{ movie.title }}</p>            <p class="item-rating">                {# 確定整星個數 #}                {% set lights = ((movie.rating|int)/2)|int %}                {# 確定半個星個數 #}                {% set halfs = ((movie.rating|int)%2) %}                {# 灰色星星個數 #}                {% set grays = 5 - lights - halfs %}                {# 渲染高亮星星 #}                {% for light in range(0, lights) %}                    <img src="{{ url_for('static', filename='img/rate_light.png') }}">                {% endfor %}                {# 渲染半高亮星星 #}                {% for light in range(0, halfs) %}                    <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                {% endfor %}                {# 渲染灰色星星 #}                {% for light in range(0, grays) %}                    <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                {% endfor %}                {{ movie.rating }}            </p>        </div>    {% endfor %}</div>

將以上代碼提取出來作為宏，我們發現變化的只有兩個——電影/電視劇、movies/tvs，其余都一樣，所以我們可以將這兩個作為變量傳入：

• 第一次優化——宏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
            font-family: "Microsoft Ya Hei";

        }
        .page{
            width: 375px;
            height: 667px;
            background: #d1fcff;
        }
        .page .searich-group{
            padding: 14px 8px;
            background: #41b357;
        }
        .page .searich-group .search-input{
        {# 塊級元素 #}
            display: block;
            height: 30px;
            width: 100%;
            background: #fff;
        {# 與盒子整體匹配 #}
            box-sizing: border-box;
        {# 搜索框不顯示 #}
            border: none;
        {# 鼠標點擊搜索框后不顯示邊框 #}
            outline: none;
        {# 邊框圓角 #}
            border-radius: 5px;
        }
        .list-group{
            background: #fff;
            padding: 17px 18px;
        }
        .list-group .group-top{
            font-size: 18px;
        {# 獲取浮動元素 #}
            overflow: hidden;
        }
        .group-top .group-title{
            float: left;
            color: #000;
        }
        .group-top .more-btn{
            float: right;
        }
        .any-group{
            margin-top: 20px;
            overflow: hidden;
        }
        .any-group .item-group{
            width: 100px;
            float: left;
            margin-right: 8px;
        }
        .item-group .thumbnail{
            width: 100%;
            height: 140px;
        }
        .item-group .item-title{
            text-align: center;
            margin-top: 12px;
        }
        .item-group .item-rating{
            color: #acacac;
            text-align: center;
            font-size: 12px;
        }
        .item-rating img{
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    {% macro listGroup(category, items) %}
        <div class="list-group">
            <div class="group-top">
                <span class="group-title">{{ category }}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="any-group">
                {% for item in items[0:3] %}
                    <div class="item-group">
                    <img src="{{ item.thumbnail }}" class="thumbnail" alt="">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-rating">
                        {# 確定整星個數 #}
                        {% set lights = ((item.rating|int)/2)|int %}
                        {# 確定半個星個數 #}
                        {% set halfs = ((item.rating|int)%2) %}
                        {# 灰色星星個數 #}
                        {% set grays = 5 - lights - halfs %}
                        {# 渲染高亮星星 #}
                        {% for light in range(0, lights) %}
                            <img src="{{ url_for('static', filename='img/rate_light.png') }}">
                        {% endfor %}
                        {# 渲染半高亮星星 #}
                        {% for light in range(0, halfs) %}
                            <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">
                        {% endfor %}
                        {# 渲染灰色星星 #}
                        {% for light in range(0, grays) %}
                            <img src="{{ url_for('static', filename='img/rate_gray.png') }}">
                        {% endfor %}

                        {{ item.rating }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    {% endmacro %}
    <div class="page">
        {# 搜索框 #}
        <div class="searich-group">
            <input class="search-input" type="text" placeholder="請輸入查詢條件">
        </div>
        {# 電影 #}
        {{ listGroup('電影', movies) }}
        {# 電視劇 #}
        {{ listGroup('電視劇', tvs) }}
    </div>
</body>
</html>

上面我們利用宏將首頁代碼進行了第一次優化。如果我們現在還有其他頁面，試想一下，首頁上面的搜索框

以及頁面背景

是否可以提取為公用的，其他頁面在應用到的時候通過繼承來實現呢？答案是肯定的。

所以我們現在新建base.html文件，并且將頁面布局代碼，提出，再想一下，既然名為公用也就意味著其他代碼也可以繼承這個base.html，那么頁面內容：

這部分代碼是不是就不可以再在base.html里了【答：是】，但是我們又要往base.html這里面插入上圖部分代碼，那要用什么呀？block對吧。此外，按照習慣，我們同樣將樣式style以文件的形式提取出來，此時頭部搜索樣式與內容部分樣式肯定是不能提取在一個文件里的，因為在一個文件里每次都會加載所有的代碼，這樣在head中就沒必要加載內容的樣式，所以我們把樣式分別提取成css文件，一個是搜索欄和頁面背景，命名為base.css：

*{    padding: 0;    margin: 0;    list-style: none;        text-decoration: none;        font-family: "Microsoft Ya Hei";}.page{    width: 375px;        height: 667px;    background: #d1fcff;}.page .searich-group{    padding: 14px 8px;    background: #41b357;}.page .searich-group .search-input{    /* {# 塊級元素 #} */
    display: block;    height: 30px;        width: 100%;        background: #fff;    /* {# 與盒子整體匹配 #} */
    box-sizing: border-box;    /* {# 搜索框不顯示 #} */
    border: none;    /* {# 鼠標點擊搜索框后不顯示邊框 #} */
    outline: none;    /* {# 邊框圓角 #} */
    border-radius: 5px;}

另一個是頁面樣式，命名為index_page.css：

.list-group{    background: #fff;    padding: 17px 18px;}.list-group .group-top{    font-size: 18px;    /* {# 獲取浮動元素 #} */
    overflow: hidden;}.group-top .group-title{    float: left;    color: #000;}.group-top .more-btn{    float: right;}.any-group{    margin-top: 20px;    overflow: hidden;}.any-group .item-group{    width: 100px;        float: left;        margin-right: 8px;}.item-group .thumbnail{    width: 100%;        height: 140px;}.item-group .item-title{    text-align: center;    margin-top: 12px;}.item-group .item-rating{    color: #acacac;    text-align: center;        font-size: 12px;}.item-rating img{    width: 10px;        height: 10px;}

在static文件夾下新建css文件夾，然后分別新建以上兩個文件：

綜上，我們最后base.html文件代碼應該如下：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    {% block head %}{% endblock %}
</head>
<body>
    <div class="page">
        {# 搜索框 #}
        <div class="searich-group">
            <input class="search-input" type="text" placeholder="請輸入查詢條件">
        </div>
        {% block content %}{% endblock %}
    </div>
</body>
</html>

其中block head填充的是內容部分的樣式代碼。現在公用部分已經提取好，回到index.html，我們發現要做的工作只需要

1.繼承`base.html`

2\. 填充`block`

即可。

index.html

{% extends 'base.html' %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index_page.css') }}">
{% endblock %}
{% block content %}
    {% macro listGroup(category, items) %}
        <div class="list-group">
            <div class="group-top">
                <span class="group-title">{{ category }}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="any-group">
                {% for item in items[0:3] %}
                    <div class="item-group">
                    <img src="{{ item.thumbnail }}" class="thumbnail" alt="">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-rating">
                        {# 確定整星個數 #}
                        {% set lights = ((item.rating|int)/2)|int %}
                        {# 確定半個星個數 #}
                        {% set halfs = ((item.rating|int)%2) %}
                        {# 灰色星星個數 #}
                        {% set grays = 5 - lights - halfs %}
                        {# 渲染高亮星星 #}
                        {% for light in range(0, lights) %}
                            <img src="{{ url_for('static', filename='img/rate_light.png') }}">
                        {% endfor %}
                        {# 渲染半高亮星星 #}
                        {% for light in range(0, halfs) %}
                            <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">
                        {% endfor %}
                        {# 渲染灰色星星 #}
                        {% for light in range(0, grays) %}
                            <img src="{{ url_for('static', filename='img/rate_gray.png') }}">
                        {% endfor %}

                        {{ item.rating }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    {% endmacro %}

    {# 電影 #}
    {{ listGroup('電影', movies) }}
    {# 電視劇 #}
    {{ listGroup('電視劇', tvs) }}
{% endblock %}

執行文件，頁面顯示不變。

接著我們來完成更多的模塊，點擊更多后頁面顯示效果如上圖。

我們先來分析上面這個頁面，我們發現除了搜索欄下面的圖片區域有些變化以外，其余都是base.html的布局，所以我們首先想到可以繼承base.html，而圖片顯示規則則和我們前面定義過的宏完全一致，我們就可以導入寫好的宏。所以我們先在templates文件夾下新建moreList.html文件：

我們已經在base.html中保留了block，所以頁面新的布局只需要通過block進行插入即可：

moreList.html

{% extends 'base.html' %}
{% from 'macros/macros.html' import itemGroup %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
    <style>
        .content{
            padding: 25px 10px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="content">
        {% for item in items %}
            {{ itemGroup(item) }}
        {% endfor %}
    </div>
{% endblock %}

當然，我們還要將更多加上鏈接，我們先定義函數：

@app.route('/list/<int:category>/')def itemList(category):
    # 如果category等于1：返回電影
    # 如果category等于2：返回電視劇
    # 否則返回空數組
    items = []    if category == 1:
        items = movies    elif category == 2:
        items = tvs    else:
        items = []    return flask.render_template('moreList.html', items=items)

這里我們新加了一個整型的category參數，方便我們對進入的頁面到底是電影還是電視劇進行分辨，在macros.html文件中需要加上更多的鏈接：

<a href="{{ url_for('itemList', category=category) }}" class="more-btn">更多</a>

這樣就會完成點擊更多后的頁面跳轉和跳轉后的頁面布局了。以上就是一個完整的一個項目實戰實操。

如果對接口、性能、自動化測試、面試經驗交流等感興趣的，可以關注我的頭條號，我會不定期的發放免費的資料，這些資料都是從各個技術網站搜集、整理出來的，如果你有好的學習資料可以私聊發我，我會注明出處之后分享給大家。歡迎分享，歡迎評論，歡迎轉發。需要資料的同學可以關注小編+轉發文章+私信【測試資料】