4 投稿個別ページ

4.1 index.html

次に投稿の個別ページを作成します。 投稿一覧（index.html）のimgタグにリンクを付けます。 画像をクリックすると、/toukou/投稿ID に遷移するようにします。

  <a href="/toukou/{{r.tid}}"><img src="/static/{{r.image}}"></a>

4.2 app.py

以下のtoukou関数を作成し、tidを受け取って検索した結果をtoukou.htmlに渡します。

@app.get('/toukou/<tid>')
def toukou(tid):
    row = Toukou.query.get(tid)
    return render_template("toukou.html", toukou=row)

4.3 toukou.html

toukou.htmlでは投稿を一件のみ表示します。これは投稿一覧の画像一件と同じですが、画像にリンクが無い点と、最後にtoukou.mesとtoukou.tagを表示する点のみが異なります。。

<div class="toukou">
    <div class="uname">{{toukou.user.uname}}</div>
    <div class="hi">{{toukou.hi.strftime('%Y/%m/%d %H:%M:%S')}}</div>
    <div class="image">
        <img src="/static/{{toukou.image}}">
    </div>

    <div class="mes">{{toukou.mes}}</div>
    <div class="tag">{{toukou.tag}}</div>
</div>

4.4 style.css

staticフォルダにあるstyle.cssにスタイルを設定します。投稿の本文部分でマージンを付けて画像を少し離します。また、white-spaceで、改行を反映するようにします。

.mes {
    margin-top:1em;
    white-space: pre-wrap;
}
.tag {
    margin-top:1em;
}