如何在一个页面中显示 2 或 3 行的文章？

Question

我一直在用 python、flask、sqlalchemy、html 制作博客。现在我可以在页面中显示文章了。但我只能用下面的代码将它显示在 1 行中，如下面的代码。顺便说一下，不知何故我不能使用 css 文件。*第1条*第2条*第3条*第四条我想做的事情就像下面这样。*第1条 *第3条*第2条 *第4条{% extends "copy.html" %}{% block body %}{%for article in articles%}<li>{{article.title}}<a href="{{url_for('show_article',id=article.id)}}">Details</a></li>{%else%}None articles{%endfor%}{%endblock%}我该如何实现它？

Answer 1

如果您想了解一下，请查看我在此处发布的有关烧瓶和烧瓶中的应用程序结构的帖子，如果您想了解的话...您应该在 html 文件和ptyhon 文件，您应该将不同列表中的奇数帖子与偶数帖子分开。PS：我不知道你是想把奇数的帖子放在一列，偶数放在另一列，还是你想把前半部分放在左列，另一半放在另一列。在第二种情况下，您只想使用 post1 = posts[:int(len(posts)/2)] 和 post2 = posts[len(post1):] 创建两个列表。

@app.route("/")

def home():

    posts = [

        {"title" : "post1.",},

        {"title" : "post2.",},

        {"title" : "post3.",},

        {"title" : "post4.",},]

post1 = [x for x in posts if x % 2 == 0]

post2 = [x for x in posts if x % 2 != 0]

return render_template("info.html", post1 = post1, post2=post2)

然后将它们发送到 html 文件，如下所示：

{% extends 'template.html' %}

{% block page %}

<div class="container">

   {% for post in posts %} <!-- iterate all posts keys/values -->

      <div class="row">

         <div class="col-md-6"> <h3>{{ post1.title }}</h3> </div>

         <div class="col-md-6"> <h3>{{ post2.title}}</h3> </div>

      </div>

  {% endfor %}

</div>  

{% endblock %}

要使用引导程序，请在模板中复制此代码：

        <link href="https://fonts.googleapis.com/css?family=Literata&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>