typecho主题白天夜晚模式切换失效？刷新后模式丢失？
许多Typecho用户在尝试添加白天/夜晚模式切换功能后，发现切换效果无法持久，刷新页面后设置便会失效。本文提供解决方案，帮助您解决此问题。
问题描述:
按照网上教程添加白天夜晚模式切换代码到footer.php后，刷新或点击链接，模式设置无法保存。
解决方案:
此问题通常是由于没有正确保存模式设置到浏览器Cookie导致的。以下步骤将引导您修复此问题：
修改footer.php: 在footer.php底部添加以下JavaScript代码，用于读取和设置Cookie：
window.onload = function() { let mode = getCookie('read-mode'); if (mode === 'night') { document.body.classList.add('night-mode'); } else { document.body.classList.remove('night-mode'); }};function setCookie(name, value, days) { let expires = ''; if (days) { let date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + '; path=/';}function getCookie(name) { let nameEQ = name + '='; let ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } return null;}// 添加切换模式的事件监听器 (假设您已有切换按钮，并使用id="mode-switch")document.getElementById('mode-switch').addEventListener('click', function() { let currentMode = getCookie('read-mode'); let newMode = currentMode === 'night' ? '' : 'night'; setCookie('read-mode', newMode, 365); // 设置Cookie，有效期为一年 location.reload(); // 刷新页面以应用新的模式});
修改function.php: 修改function.php中的getReadMode()函数，使其能够正确处理Cookie：
function getReadMode($icon = false) { $class = isset($_COOKIE['read-mode']) ? $_COOKIE['read-mode'] : ''; // 获取cookie，如果不存在则为空字符串 if ($icon) { $class = $class === 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o'; } else { $class = $class === 'night' ? 'night-mode' : ''; } echo $class;}
请确保您的主题CSS文件中定义了.night-mode类，用于控制夜晚模式的样式。 上述代码添加了setCookie函数用于设置cookie，并修改了getReadMode函数使其更健壮，并添加了页面刷新，以立即反映模式变化。 最后，添加了一个事件监听器示例，假设您有一个id为mode-switch的按钮来切换模式。 请根据您的实际情况调整代码。
通过以上修改，您的Typecho主题白天夜晚模式切换功能应该能够正常工作并保持设置了。 如果问题仍然存在，请检查您的主题代码，确保night-mode类应用正确，并且JavaScript代码正确地插入到footer.php中。
以上就是Typecho主题白天夜晚模式切换失效怎么办？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1284786.html
微信扫一扫 
支付宝扫一扫 
