1# controllers.py
2@api.route('/')
3def index(req, resp):
4    articles = get_articles(unreleased=False)  # 公開済みのものだけ
5
6    resp.html = api.template('index.html',
7                             title='',
8                             articles=articles)

1<!--
2templates/index.html
3トップページ
4-->
5
6{% extends "layout.html" %}
7{% block content %}
8
9<br>
10<h1>My Blog Name</h1>
11<div class="main-container">
12    <div class="article-main">
13        {% for art in articles %}
14        <p>{{ art['title'] }}</p>
15        {% endfor %}
16    </div>
17</div>

1google.api_core.exceptions.FailedPrecondition: 400 The query requires an index. You can create it here: https:// ******

1def get_articles(unreleased: bool = True):
2    if unreleased:
3        pass  # 省略
4
5    else:
6        articles = [art.to_dict()
7                    for art in
8                    db.collection('articles').order_by(
9                        'last_update',
10                        direction=Query.DESCENDING
11                    ).stream()
12                    ]
13        articles = [art for art in articles if art['released']]  # 公開済みのものだけにする
14
15    return articles

1@api.route('/')
2def index(req, resp):
3    articles = get_articles(unreleased=False)  # 公開済みのものだけ
4
5    # サムネは別で保持
6    md = markdown.Markdown()
7    thumbnails = [
8        md.convert(art['thumbnail']) for art in articles
9    ]
10
11    resp.html = api.template('index.html',
12                             title='',
13                             thumbnails=thumbnails,
14                             articles=articles)

1<!--
2templates/index.html
3トップページ
4-->
5
6{% extends "layout.html" %}
7{% block content %}
8
9<br>
10<h1>My Blog Name</h1>
11<div class="main-container">
12    <div class="top">
13        <h2>ブログ一覧</h2>
14        <div class="articles">
15            {% for art in articles %}
16            <a href="/category/{{art['category']}}/{{art['slug']}}">
17                <div class="single">
18                <p>
19                    {% autoescape false %}
20                    <div class="thumbnail">{{ thumbnails[loop.index - 1] }}</div>
21                    {% endautoescape %}
22                    {{ art['title'] }}<br>
23                    <span class="category">{{ art['category'] }}</span>
24                    <div class="info">{{ art['last_update'].strftime('%Y.%m.%d') }}: {{ art['author'] }}</div>
25                </p>
26            </div>
27            </a>
28            {% endfor %}
29        </div>
30    </div>
31
32</div>
33
34{% endblock %}

1.top{
2    width: 100%;
3    margin: 2.0em 0;
4}
5.articles{
6    width: 100%;
7}
8.articles .single{
9    display: inline-block;
10    vertical-align: top;
11    width: 22.5%;
12    height: 300px;
13    color: #333333;
14    border: 1px solid #333333;
15    background-color: #fff;
16    border-radius: 5px;
17    padding: 10px 10px;
18    margin: 5px 1px;
19
20}
21.articles .single:hover{
22    opacity: 0.7;
23}
24.article .single .thumbnail{
25    text-align: center;
26}
27.articles .single .thumbnail img{
28    height: 150px;
29    width: 100%;
30    margin: auto;
31    object-fit: contain;
32}
33.articles .single .category{
34    background-color: #2b52cd;
35    color: #fff;
36    border-radius: 3px;
37    padding: 2px 5px;
38}
39.articles .single .info{
40    font-size: smaller;
41    color: #888888;
42}

1<header>
2    <div class="header">
3        <a href="/" class="logo">
4            <img src="/static/theme/logo.png" alt="My Blog Name">
5        </a>
6
7        <div class="main-menu">
8            <ul>
9                <li><a href="/">Top</a></li>
10                <li><a href="/about">About</a></li>
11                <li><a href="/profile">Profile</a></li>
12                <li><a href="https://twitter.com">Twitter</a></li>
13                <li><a href="/contact">Contact</a></li>
14            </ul>
15        </div>
16    </div>
17</header>

1header{
2    width: 100%;
3    height: 100px;
4}
5.header{
6    display: flex;
7    margin: 10px 10px;
8}
9.header .logo{
10    display: inline-block;
11    vertical-align: top;
12    width: 25%;
13    height: auto;
14    margin: 0 0;
15    padding: 0 10px;
16}
17.header .main-menu{
18    width: 75%;
19    margin: 0 0;
20    text-align: center;
21    display: inline-block;
22    vertical-align: top;
23}
24.header .main-menu ul li{
25    float: left;
26    width: 15%;
27    display: inline;
28    background-color: #1e366a;
29    color: #fff;
30    border: 1px solid #1f3057;
31}
32.header .main-menu ul li:hover{
33    opacity: 0.7;
34}
35.header .main-menu ul li a{
36    display: block;
37    color: #fff;
38}