Question

我在Jinja2中有多个模板，可以扩展布局。他们需要不同的背景。我已按照此处的文档中的说明进行操作 http://flask.pocoo.org/docs/0.12/patterns/templateinheritance/#child-template，但似乎无法使他们工作。关于出什么问题的想法？

这是layout.html的相关部分：

<html>
    <head>
        {% block head %}
        <title>Verbatim: Book Reviews & Recommendations</title>
        {% with messages = get_flashed_messages() %}
          {% if messages %}
            <ul class=flashes>
            {% for message in messages %}
              <li>{{ message }}</li>
            {% endfor %}
            </ul>
          {% endif %}
        {% endwith %}
        <!-- Bootstrap 4 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <!-- Fontawesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
        <!-- Additional CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
        {% endblock %}
    </head>

这是我要在其中插入其他背景图片的模板：

{% extends "layout.html" %}

{% block head %}
{{ super() }}
<style>
    body {
        background-image: url(yellowed-paper-texture.jpg);
    }
</style>
{% endblock %}

{% block body %}
<div class="container h-100 my-5 form">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-md-12 col-sm-12 col-xs-12 form">
           etc ....

编辑：我的CSS文件似乎没有包含任何可以简化继承过程的令人兴奋的事情。

@media (max-width: 768px) {
  div.ratings {
    font-size: 13px; } 
}

@media (max-width: 768px) {
  #siteName {
    font-size: 26px; }

  #siteSubTitle {
    font-size: 20px; }

  #siteTagLine {
    font-size: 14px; } }

@media (min-width: 768px) and (max-width: 992px) {
  #siteName {
    font-size: 26px; }

  #siteSubTitle {
    font-size: 20px; }

  #siteTagLine {
    font-size: 14px; } }

@media (min-width: 992px) {
  #siteName {
    font-size: 36px; }

  #siteSubTitle {
    font-size: 30px; }

  #siteTagLine {
    font-size: 24px; } }
#siteName, #siteSubTitle, #siteTagLine {
  font-family: "IM Fell English SC", serif; }

.blank_row {
  height: 10px !important;
  /* overwrites any other rules */
  background-color: #FFFFFF; }

a.nav-link {
  color: #E8E8EE !important; }

a.nav-link:hover {
  text-shadow: 0 0 5px #FFD700; }

.navbar.navbar-expand-md {
  background-color: #000000;
  border-color: #FFFFFF; }

div.container.siteTitle {
  background-image: url(yellowed-paper-texture.jpg);
  height: 100%;
  width: 100%; }

.banner {
  background-image: url(yellowed-paper-texture.jpg);
  height: 20vh; }

.black-border-bottom {
  border-bottom: 2px solid black; }

#loginPrompt {
  font-family: "IM Fell English SC", serif; }

/*change btn color by adding custom-btn class*/
/*https://stackoverflow.com/questions/49184471*/
.btn-primary.custom-btn {
  background-color: #000;
  border-color: #000; }

Answer 1

问题出在这里

body {
    background-image: url(yellowed-paper-texture.jpg);
}

URL链接必须为url('/static/yellowed-paper-texture.jpg')。

不同Jinja2模板的不同背景图片

1 个答案: