hexo_s/themes/Chic/layout/_partial/header.ejs

<header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="<%- config.root %>"><%= theme.navname %></a></div>
            <div class="menu navbar-right">
                <% for (var i in theme.nav){ %>
                    <a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
                <% } %>
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    <%# mobile %>
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="<%- config.root %>"><%= theme.navname %></a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; 菜单</div>
            </div>
            <div class="menu" id="mobile-menu">
                <% for (var i in theme.nav){ %>
                    <a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
                <% } %>
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>