Настойка, бутстрэп-карты и шаблоны Jinja - PullRequest
Новая
       11

Настойка, бутстрэп-карты и шаблоны Jinja

0 голосов
/ 03 января 2019

Я бы хотел, чтобы мои карты начальной загрузки отображались по горизонтали, а не по вертикали, но я обнаружил, что должен объявлять новый «col-sm-4» каждый раз, когда я хочу, чтобы следующая карта показывалась горизонтально. Проблема в том, что если я пытаюсь сделать это в цикле Jinja «for», он просто повторяет ту же карту. Есть ли способ перебирать данные как цикл while, но для Jinja?

Вот соответствующий код Python:

Из "feeds.py" с использованием пакета feedparser: 

def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc

А вот соответствующий код Flask для этого из "views.py" 

@app.route("/")
def index():
    articles_bbc = get_news("bbc")
    articles_cnn = get_news("cnn")
    articles_google = get_news("google")
    return render_template('index.html', articles_bbc=articles_bbc[:3])

И, наконец, соответствующий html-bootstrap и код Jinja2: 

<div class = "row" style="background-color: lightgray;">
            <div class = "col-sm-4">


         <h5>Headlines from the BBC</h5>




                    {% for article_bbc in articles_bbc %}
                        <div class="card" style="width:200px;float:left;">
                            <div class="card-body" style="background-color:lightcyan;">


                                {%  if article_bbc.image %}
                                <img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
                                {% endif %}
                                <h5 class="card-title">{{article_bbc.title}}</h5>
                                    <p class="card-text">{{article_bbc.summary}}</p>
                                    <p>{{article_bbc.published}}</p>
                                    <a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
                            </div>



                        </div>
                    {% endfor %}
            </div>
        </div>

1 Ответ

0 голосов
/ 03 января 2019

Разобрался. Правильное размещение цикла «for» перед «col-sm-4» исправило это!

...