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);
}