如何在Jinja中使用JS变量？侧边栏状态闪烁问题求助

核心思路 #

要消除刷新时的闪烁，必须在HTML渲染阶段就直接根据localStorage的状态设置侧边栏的类，而不是等DOM加载完成后再通过JS修改——后者会导致页面先显示初始状态，再切换到保存的状态，从而出现闪烁。

具体实现步骤 #

1. 修改侧边栏HTML，直接用内联JS设置初始类 #

把原来依赖Jinja模板的部分替换成内联JavaScript，在元素渲染时就读取localStorage并设置类：

<div id="sidebar" 
     class="sidebar-main show sticky-top ${(localStorage.getItem('sidebarCollapsed') ?? 'false') === 'true' ? 'collapse' : ''}" 
     style="height: auto; margin-top: 80px;">
  <!-- 侧边栏内容 -->
</div>

如果担心部分浏览器不支持模板字符串，也可以用更兼容的写法：

<div id="sidebar" class="sidebar-main show sticky-top" 
     style="height: auto; margin-top: 80px;">
  <script>
    const sidebar = document.currentScript.previousElementSibling;
    // 读取localStorage，默认未折叠
    const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
    if (isCollapsed) {
      sidebar.classList.add('collapse');
    }
  </script>
  <!-- 侧边栏内容 -->
</div>

两种写法都能确保侧边栏在渲染时就带上正确的类，不会出现状态切换的闪烁。

2. 简化原有JS代码 #

因为初始状态已经在HTML中处理好了，只需要保留点击切换的逻辑即可（注意原代码里的$("navbar-toggler")漏了类选择器的.，要补上）：

$(document).ready(function () {
  $(".navbar-toggler").click(function () {
    const $sidebar = $("#sidebar");
    $sidebar.toggleClass('collapse');
    
    const isSidebarCollapsed = $sidebar.hasClass('collapse');
    localStorage.setItem('sidebarCollapsed', isSidebarCollapsed);
    document.cookie = `sidebarCollapsed=${isSidebarCollapsed};path=/`;
  });
});

补充说明 #

• 第一次访问页面时，localStorage里没有sidebarCollapsed项，会返回null，此时默认不添加collapse类，保持侧边栏展开状态。
• 内联JS的执行时机早于$(document).ready()，能确保元素渲染时就应用正确的状态，从根源上避免闪烁。

内容的提问来源于stack exchange，提问作者In1quity