第5章 投稿個別ページ

1　index.html

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

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

2　app.py

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

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

3　toukou.html

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

<div class="toukou">
    <div class="uname">{{toukou.user.uname}}</div>
    <div class="hi">{{toukou.hi}}</div>
    <div class="image">
    <img src="/static/{{toukou.image}}">
    </div>

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

4　style.css

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

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