Изменить цвет css div в flask python - PullRequest
Новая
       8

Изменить цвет css div в flask python

0 голосов
/ 10 апреля 2020

**

Это мой Flask файл

** 

from flask import Flask, render_template
app = Flask(__name__)


@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/play')
def bluebox():
    return render_template('index.html', times=3)


@app.route('/play/<int:x>')
def second(x):
    return render_template('index.html', times=x)


# @app.route('/play/<int:x>/color')
# def green(x):
# return render_template('index.html', times=x, )

if __name__ == "__main__":
    app.run(debug=True)

**

Это мой html файл

**

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />


  <style>
    .blue {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border: 1px solid black;
      margin: 20px;
      display: inline-block;
    }
  </style>

  <title>Blog</title>



</head>

<body>

  {% for i in range(times): %}
  <div class = "blue"></div>

  {% endfor %}


</body>

</html>

с функцией 

    @app.route('/play/<int:x>')
        def second(x):
        return render_template('index.html', times=x)

Я создал URL, который при вводе localhost: 5000 / play / 10 вернет 10 синих ящиков и когда вы введете localhost: 5000 / play / 30, он вернет 30 синих ящиков, и теперь я хочу создать функцию, когда вы введете localhost: 5000 / play / 10 / red 10 красных ящиков вернутся и localhost: 5000 / play / 10 / pink => 10 розовых коробок вернутся. Как URL изменить цвет. Как я могу это сделать?

1 Ответ

0 голосов
/ 10 апреля 2020

Попробуйте это ниже в вашем HTML: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
        <style>
            .color {
                width: 100px;
                height: 100px;
                background-color: var(--color);
                border: 1px solid black;
                margin: 20px;
                display: inline-block
            }
        </style>
    </head>
    <body>

  {% for i in range(times): %}

  <div class="color" style="--color: {{ color }}"></div>  ------ Pass the color dynamically

  {% endfor %}

   </body>
 </html>

В вашем app.py сделайте следующее: 

@app.route('/play/<int:x>/<string:color>')
def second(x, color):
    return render_template('index.html', times=x, color=color)
...