flask模板应用-javaScript和CSS中jinja2

当程序逐渐变大时，很多时候我们需要在javaScript和CSS代码中使用jinja2提供的变量值，甚至是控制语句。比如，通过传入模板的theme_color变量来为页面设置主题色彩，或是根据用户是否登陆来决定是否执行某个javaScript函数。

需要注意，只有使用render_template()传入的模板文件才会被渲染，如果把jinja2(模板引擎)代码写在单独的javaScript或CSS文件中，尽管你在HTML中引入了它们，但他们包含的jinja代码不会被执行。

下面是一些注意点：

行内/嵌入式javaScript/CSS

如果要在javaScript和CSS文件中使用jinja2代码，那么就在HTML中使用<style>和<script>标签定义这部分CSS和JavaScript代码

在这部分CSS和JavaScript代码中加入jinja2时，不用考虑编码时的语法错误，比如引号错误，因为jinja2会在渲染后被替换掉，所以只需要确保渲染后的代码正确即可。

定义为javaScript/CSS变量

对于想要在javaScript中获取的数据，如果时元素特定的数据，比如某个文章条目对应的id值，可以通过HTML元素的data-*属性存储。你可以自定义横线后的名称，作为元素上的自定义数据变量，比如data-id,data-username等，比如：

<span data-id="{{ user.id }}" data-username="{{ user.username }}">{{ user.username }}</span>

在javaScript中，可以使用DOM元素的dataset属性获取data-*属性值，比如

element.dataset.username,或是使用getAttribute()方法，

比如element.getAtrribute('data-username')

使用jQuery时，可以直接对jQuery对象调用data方法获取，比如$element.data(‘username’)

在HTML中，”data-*”被称为自定义数据属性，我们可以用它来存储自定义的数据供javaScript获取。

对于需要全局使用的数据，则可以在页面使用中嵌入式javaScript定义变量，如果没法定义为javaScript变量，那就考虑定义为函数，如：

<script type=”text/javascript”>
    var foo = ‘{{ foo_variable }}’;
</script>

当在javaScript中插入很多jinja2语法时，应该讲程序转变为Web API，然后专心使用havaScrpt来编写客户端，后面会介绍Web API

CSS同理，有些时候需要将jinja2变量值传入CSS文件，比如希望将用户设置的主题颜色设置到对应的CSS规则中，或是需要将static目录下某个图片的URL传入CSS来设置为背景图片，除了将这部分CSS定义直接写到HTML中外，我们可以将这些值定义为CSS变量，如：

<style>
:root {
    --theme-color:{{ theme_color }};
    --background-url:{{ url_for('static', filename='background.jpg') }}
}
</style>

在CSS文件中，使用var()函数并传入变量名即可获取对应的变量值：

#foo {
    color: var(--theme-color);
}
#bar{
    background: var(--background-url);
}