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>css常用模板
在javaScript中，可以使⽤DOM元素的dataset属性获取data-*属性值，⽐如
element.dataset.username，或是使⽤getAttribute()⽅法，
⽐如Atrribute('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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。