如何只保留dark主题呢

robotunl commented 2 years ago

我已经根据文档将黑色主题设为默认全局主题。但是还想吧博客主页右上角的按钮去掉，同时也将手机端的Dark/Light按钮去掉，该怎么做呢。

Siricee commented 2 years ago

你需要把这个文件的内容的以下部分删除

<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; Menu</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>

robotunl commented 2 years ago

可以啦，感谢

robotunl commented 2 years ago

唔，本地hexo s显示是dark主题没问题，但是deploy之后却变成了light主题

Siricee commented 2 years ago

啊？应该不会吧，你执行下

hexo clean
hexo g
hexo d

robotunl commented 2 years ago

啊？应该不会吧，你执行下
hexo clean
hexo g
hexo d

试了还是这样

robotunl commented 2 years ago

唔，本地hexo s显示是dark主题没问题，但是deploy之后却变成了light主题

这个主题不一致的原因应该是我的缓存未清理的问题，不过真正的问题是，照你做的删去对应代码之后原有的dark主题设置失效，现在本地和deploy上去的都是light主题。

Siricee commented 2 years ago

哦哦确实有问题。你之前修改的仍保留修改，下面再加一点代码

打开这个文件layout/layout.ejs

-<body>
+<body class="dark-theme">
-    <script>
-        // this function is used to check current theme before page loaded.
-        (() => {
-            const currentTheme = window.localStorage && window.localStorage.getItem('theme') || '';
-            const isDark = currentTheme === 'dark';
-            const pagebody = document.getElementsByTagName('body')[0]
-            if (isDark) {
-                pagebody.classList.add('dark-theme');
-                // mobile
-                document.getElementById("mobile-toggle-theme").innerText = "· Dark"
-            } else {
-                pagebody.classList.remove('dark-theme');
-                // mobile
-                document.getElementById("mobile-toggle-theme").innerText = "· Light"
-            }
-        })();
-    </script>

<div class="wrapper">
    <%- partial('_partial/header',{cache: true}) %>
        <div class="main">
            <%- body %>
        </div>
        <%- partial('_partial/footer',{cache: true}) %>
</div>
</body>

_config文件

scripts:
-  - /js/script.js
- /js/tocbot.min.js

你按这个方法再试下

robotunl commented 2 years ago

可以了，十分感谢

Siricee commented 2 years ago

好祝使用愉快！

Siricee / hexo-theme-Chic

如何只保留dark主题呢 #116