模板使用说明（必读）

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

[Bootstrap 5中文文档](https://v5.bootcss.com/ "Bootstrap 5中文文档")

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

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

#### 2、关于普通版本的logo问题
页面加载loading的问题，主要是因为谷歌浏览器的闪动bug，大家如果平时有用到css动画可能会注意到这个：就是样式从默认到加载完成，会有一个闪动的过程，比较丑，所以加上这个加载loading，避免出现这种情况。如果你不想要，也可以删除。
![](/uploads/images/20211230/47c19e5f2898c8e079e402440005140e.png)
```html

<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>

```
然后在main.min.js中，找到如下代码删除：
```javascript
    // 关闭页面loading
    setTimeout(function () {
        $('#lyear-preloader').fadeOut(500, function () {
            $('#lyear-preloader').removeClass('loading');
        });
    }, 500);
```

#### 3、关于iframe版本的打开默认首页问题
在v5的版本里面，默认的首页是由 `js` 从中读取的 `href` 的值。如下，根据id值来获取当前的 `href` 值，如果获取不到，将会默认为 `lyear_main.html`。
```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` 里面设置：
```css
    /* 侧边栏菜单宽度 */
    --sidebar-width: 240px;
    /* header高度 */
    --header-height: 68px;
```
> 需要注意的是，如果header高度设置小于60px的时候，需要注意将头像改小，修改头像处的class为 `avatar-sm` 或者 `avatar-xs`。