背景顶栏图像 Zurb Foundation 和 Flask 模板继承

Question

我正在使用 Flask to develop an application. As a front-end framework, I am using Zurb-Foundation. I have created a layout.html template and I am using template inheritance 来扩展它。

网站的布局包括一个带有背景图片的顶部栏，类似于 this one。 layout.html的相关代码如下：

<!doctype html>
<html class="no-js" lang="">

<head>
  <!-- More code here -->
</head>    
<body>
  {% block navbar %}
  <header class= {{ headerclass }}>
    <div class="contain-to-grid startup-top-bar">
        <nav class="top-bar" data-topbar>
        ...
        ...
        ...
  <!-- More code here -->

我想为每个与导航栏上的链接关联的网站页面设置不同的顶部栏背景图像。顶栏背景图片取决于 <header class= {{ headerclass }}>。为了让每个网站页面都有不同的顶部栏背景图片，我参数化了 <header class= {{ headerclass }}>。参数 {{ headerclass }} 以下列方式提供：

from flask import render_template
from appmodule import app

@app.route("/")
def index():
    return render_template('index.html', headerclass = 'index')

@app.route("/anotherchild")
def anotherchild():
    return render_template('anotherchild.html', headerclass = 'anotherchild')

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

例如，扩展layout.html的index.html模板是这样的：

{% extends "layout.html" %}

{% block title %}Index{% endblock title %}

{% block content %}
    <h1>Index</h1>
    <p class="important">
      Hello world.
    </p>
{% endblock content %}

最后，为了生成 styles.css，我编译了一些 .scss 文件。为 class <header class= {{ headerclass }}> 定义样式的相关代码如下 _main.scss 文件：

// Style for the index page
.index {
    background: url('../img/img1.JPG') no-repeat center center fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }
  ...
  ...
  // more code here

// Style for the anotherchild page
.anotherchild {
    background: url('../img/img2.JPG') no-repeat center center fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }
  ...
  ...
  // more code here

好消息是一切都按预期工作，但您可能已经注意到我违反了 _main.scss 文件中的 DRY 原则。我的问题是：我可以使用 mixins 来解决这个问题吗？或者可以使用什么不同的方法更合适？

Answer 1

如果您遇到的问题是样式重复 - 只需将这些样式提取到单独的 class。像这样：

.header-main {
    background-repeat: no-repeat;
    background-position:  center center;
    background-attachment: fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }


.index {
    background-image: url(../img/img1.JPG);
}
.anotherchild {
    background-image: url(../img/img2.JPG);
}

所以标记就变成了：

<header class="header-main {{ headerclass }}">

希望我正确理解了你的问题。

背景顶栏图像 Zurb Foundation 和 Flask 模板继承

Background top-bar images Zurb Foundation and Flask template inheritance

flask

zurb-foundation

scss-mixins