当程序逐渐变大时，很多时候我们需要在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);
}