Google App Engine:如何在模板中使用内部CSS?

时间:2012-12-02 05:35:24

标签: css google-app-engine templates

GAE提供了一个模板系统,我们可以创建一个'base.html',其中可以链接外部CSS文件(比如'base.css')。但是,如何在扩展的html中定义一些内部CSS?我不想在'base.css'中定义CSS,因为有太多扩展的html文件,它们可能会相互冲突。现在,我必须在标签内做: - (

具体来说:

extended.html:

{% extends "base.html" %}
  <style>   <!-- how to do this? -->
    h1 {
      font-family: Arial;
      color: olive;
    }
    h2 {
      color: red;
    }
  </style>
  <h1> ... </h1>
    ...
  <h2> ... </h2>
    ...
  <h1> ... </h1>

1 个答案:

答案 0 :(得分:3)

在base.html中定义一个块。块是可以从扩展模板填充的占位符

<强> Approach1:

base.html文件

<style>
{% block css %}{% endblock %}
</style>

extended.html

{% block css %}
  h2 {
  color: red;
}
{% block %}

<强> Approach2:

base.html文件

<head>
<link href="base.css" rel="stylesheet">
{% block css %}{% endblock %}
</head>

extended.html

{% block css %}
 <link href="extended.css" rel="stylesheet">
{% block %}