模板使用说明（必读）

因为项目是基于Bootstrap的，使用的版本是Bootstrap 5.1.3，如果不熟悉Bootstrap的小伙伴，建议先阅读下Bootstrap的文档，这样有利于自己后期的一些排版操作。

1、iframe版本菜单

可能大家注意到了，iframe版本左侧的菜单 a 标签上有一个 class="multitabs"，这个class是用来绑定tab插件的，如果你的是外链，那就不用加。

另外一个地方，是头像的下拉菜单，里面的菜单，需要注意的是，链接地址放在 data-url 里。

2、关于普通版本的logo问题

页面加载loading的问题，主要是因为谷歌浏览器的闪动bug，大家如果平时有用到css动画可能会注意到这个：就是样式从默认到加载完成，会有一个闪动的过程，比较丑，所以加上这个加载loading，避免出现这种情况。如果你不想要，也可以删除。

<!--页面loading-->
<div id="lyear-preloader" class="loading">
  <div class="ctn-preloader">
    <div class="round_spinner">
      <div class="spinner"></div>
      <img src="images/loading-logo.png" alt="">
    </div>
  </div>
</div>
<!--页面loading end-->

然后在main.min.js中，找到如下代码删除：

    // 关闭页面loading
    setTimeout(function () {
        $('#lyear-preloader').fadeOut(500, function () {
            $('#lyear-preloader').removeClass('loading');
        });
    }, 500);

3、关于iframe版本的打开默认首页问题

在v5的版本里面，默认的首页是由 js 从中读取的 href 的值。如下，根据id值来获取当前的 href 值，如果获取不到，将会默认为 lyear_main.html。

<a class="multitabs" href="lyear_main.html" id="default-page">

4、关于iframe版本的Tab插件缓存

我们在tab插件中默认是开启了缓存（cache: true），由此来记录当前已经打开的tab，避免刷新页面时丢失。

如果你想单独清楚这个缓存记录的内容。可以 f12 在控制台内执行：sessionStorage.clear();

4、关于光年模板的侧边栏宽度和header高度

之前有一些小伙伴提到过，模板侧边栏宽度太宽，或者header高度太高。这个其实算是个人的观点问题，毕竟光年模板还是带有很重的个人色彩（说白了就是我喜欢这样子）。

v5这里因为css用到了很多变量设置，所以这里对宽度和高度，如果你想要修改，可以去 style.min.css 里面设置：

    /* 侧边栏菜单宽度 */
    --sidebar-width: 240px;
    /* header高度 */
    --header-height: 68px;

需要注意的是，如果header高度设置小于60px的时候，需要注意将头像改小，修改头像处的class为 avatar-sm 或者 avatar-xs。