{{ if $.Site.Params.nightMode }}
<body class="io-black-mode">
{{ else }}
<body class="io-grey-mode">
{{ end }}
    {{ if $.Site.Params.enablePreLoad }}
    <div id="loading">
        <style>
            .loader {
                width: 250px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: Helvetica, Arial, sans-serif;
                font-weight: 900;
                color: #3d5af1; /* 改为蓝色 */
                letter-spacing: 0.1em;
                font-size: 18px; /* 增加字体大小 */
            }
    
            .loader::before,
            .loader::after {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                background: linear-gradient(45deg, #6dd5ed, #2193b0); /* 蓝色渐变 */
                position: absolute;
                animation: load 0.7s infinite alternate ease-in-out;
                border-radius: 50%; /* 圆形边框 */
            }
    
            .loader::before {
                top: 0;
            }
    
            .loader::after {
                bottom: 0;
            }
    
            @keyframes load {
                0% {
                    left: 0;
                    height: 30px;
                    width: 15px;
                }
    
                50% {
                    height: 8px;
                    width: 40px;
                }
    
                100% {
                    left: 235px;
                    height: 30px;
                    width: 15px;
                }
            }
        </style>
        <div class="loader">{{ $.Site.Params.textPreLoad }}</div>
    </div>    
    {{ end }}
    <div class="page-container">
	{{ if $.Site.Params.expandSidebar }}
	<div id="sidebar" class="sticky sidebar-nav fade animate-nav" style="width: 170px">
        {{ else }}
        <div id="sidebar" class="sticky sidebar-nav fade mini-sidebar" style="width: 60px;">
	{{ end }}
            <div class="modal-dialog h-100 sidebar-nav-inner">
                <div class="sidebar-logo border-bottom border-color">
                    <!-- logo -->
                    <div class="logo overflow-hidden">
                        <a href="" class="logo-expanded">
                            <img src="{{ absURL $.Site.Params.images.logoExpandLight }}" height="40" class="logo-light"
                                alt="{{ .Site.Title }}">
                            <img src="{{ absURL $.Site.Params.images.logoExpandDark }}" height="40" class="logo-dark d-none"
                                alt="{{ .Site.Title }}">
                        </a>
                        <a href="" class="logo-collapsed">
                            <img src="{{ absURL $.Site.Params.images.logoCollapseLight }}" height="40" class="logo-light"
                                alt="{{ .Site.Title }}">
                            <img src="{{ absURL $.Site.Params.images.logoCollapseDark }}" height="40" class="logo-dark d-none"
                                alt="{{ .Site.Title }}">
                        </a>
                    </div>
                    <!-- logo end -->
                </div>
                <div class="sidebar-menu flex-fill">
                    <div class="sidebar-scroll">
                        <div class="sidebar-menu-inner">
                            <ul>
                                {{ range .Site.Data.webstack }}
                                    {{ if .list }}
                                    <li class="sidebar-item">
                                        <a href="#{{ range first 1 .list }}{{ md5 .term }}{{ end }}" class="smooth change-href" data-change="#{{ range first 1 .list }}{{ md5 .term }}{{ end }}">    
                                            <i class="{{ .icon }} icon-fw icon-lg mr-2"></i>
                                            <span>{{ .taxonomy }}</span>
                                            <i class="iconfont icon-arrow-r-m sidebar-more text-sm"></i>
                                        </a>
                                        <ul>
                                            {{ range .list }}
                                            <li><a href="#{{ md5 .term }}" class="smooth"><span>{{ .term }}</span></a></li>
                                            {{ end }}
                                        </ul>
                                    </li> 
                                    {{ else }}
                                    <li class="sidebar-item">
                                        <a href="#{{ md5 .taxonomy }}" class="smooth">
                                            <i class="{{ .icon }} fa-lg icon-fw icon-lg mr-2"></i>
                                            <span>{{ .taxonomy }}</span>
                                        </a>
                                    </li>
                                    {{ end }}
                                {{ end }}
                            </ul>           
                        </div>
                    </div>
                </div>
                <div class="border-top py-2 border-color">
                    <div class="flex-bottom">
                        <ul>
                            <li id="menu-item-213"
                                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-213 sidebar-item">
                                <a target="_blank" rel="noopener" href="https://umami.suqingyu.com/share/9HWkuU6HIWWRGQXx/suqingyu.com">
                                    <i class="fas fa-poll icon-fw icon-lg mr-2"></i>
                                    <span>站点统计</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>