typecho 白天夜晚模式切换问题?模式不能保持,刷新就没有了。

可乐
  • 3
新手上路,请多包涵

问题描述

我按照网上的方法,我的网站https://798city.comfooter.php底部添加白天夜晚模式切换代码 ,刷新或者点击链接后,当前模式不能保持,帮我分析下怎么处理?

如果能直接贴代码就最好了,刚刚学习代码 ,动手能力有点差!有时只给个思路,我还是不知道怎么操作


<!-- 黑暗模式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">  
<script>
function switchReadMode() { //切换显示模式
    var btn = $('.btn-read-mode');
    var next_mode = $('body').hasClass('night-mode') ? 'day': 'night';
    var mode = next_mode == 'day' ? '': 'night-mode';
    var icon = next_mode == 'day' ? 'fa fa-sun-o': 'fa fa-moon-o';
    if (next_mode == 'day') {
        $('body').removeClass('night-mode');
    } else {
        $('body').addClass('night-mode');
    }
    btn.find('i').attr('class', icon);
    setCookie("read-mode", next_mode);
}

$('.btn-read-mode').click(function(e) {
    e.preventDefault();//阻止点击打开超链接"#"事件
    switchReadMode();
});//这个触发事件主体

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    var path = ';path=/'; 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + path; 
} 
</script>

function.php中填写

function getReadMode($icon=false){
    $class = $_COOKIE['read-mode'];//获取cookie
    if($icon){
        $class = $class == 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
    }else{
        $class = 'night' == $class ? 'night-mode' : '';
    }
    echo $class;
}

在网页中显示按钮处填写

 <a class="btn-read-mode" href="#"><i class="<?php getReadMode(true);?>"></i></a> 

目前能够实现白天夜晚切换,可是一刷新,或者换网页,夜晚模式不能保持,请问这怎么处理?

怎样让我在不重新打开浏览器时,保持我手动切换的浏览模式?

css代码

/*白天模式*/
body{
    background-color: #FFF;
    color: #444;
}

a {
    color: #2c3e50;
    text-decoration: none;
}
 a:hover,a:active {
    color: #e74c3c;
}

#logo{
    color: #2c3e50;
    font-size: 2.5em;
}

#nav-menu a {

    color: #444;

}
/*夜晚模式*/
body.night-mode {
    background-color: #272727;
    color: #aaa;
}
body.night-mode img {
    filter: brightness(90%);
}
body.night-mode a {
    color: white;
    text-decoration: none;
}
body.night-mode a:hover,a:active {
    color: #e74c3c;
}

body.night-mode  #logo{
    color: #d9e3ec;
    font-size: 2.5em;
}

body.night-mode  #nav-menu a {

    color: #d9e3ec;

}
/*公用css部分*/
body {
    font-size: 92.5%;
    font-family: "Droid Serif",Georgia,"Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
}

.post-tags {
      padding-left:10px;
    margin: 30px 0 0;
}
.post-tags a { 
    border: 3px solid rgba(0,135,234,.2);
    padding: 5px;
    background-color: rgba(0,134,234,.5); 
      color: white; !important
          
}
.post-tags a:hover,.post-tags a:active {
    
    border: 3px solid rgba(231,76,60,.2);
    padding: 5px;
    background-color: rgba(231,76,60,.5);
     
}
.post-read {
      padding-left:10px;
    margin: 30px 0 0;
}
.post-read a { 
    border: 3px solid rgba(0,135,234,.8);
    padding: 5px;
    background-color: rgba(0,134,234,.9); 
      color: white; !important
          
}
.post-read a:hover,.post-tags a:active {
    
    border: 3px solid rgba(231,76,60,.2);
    padding: 5px;
    background-color: rgba(231,76,60,.5);
     
}


pre,code {
    background: #F3F3F3;
    font-size: .92857em;
    font-family: Menlo,Monaco,Consolas,"Lucida Console","Courier New",monospace;
}
code {
    padding: 2px 4px;
    color: #B94A48;
}
pre {
    overflow: auto;
    padding: 8px;
    max-height: 400px;
}
pre code {
    padding: 3px;
    color: #444;
}
blockquote {
    margin: 1em 0;
    padding-left: 1.5em;
    border-left: 4px solid #eee;
    color: #666;
}
table {
    width: 100%;
    border: 1px solid #ddd;
}
table th,table td {
    padding: 5px 10px;
    border: 1px solid #eee;
}
table th {
    background: #f3f3f3;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif;
}
input[type="text"],input[type="email"],input[type="url"],input[type="password"],textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    border: 1px solid #E9E9E9;
    border-radius: 2px;
}
textarea {
    resize: vertical;
}
.post-meta a,.post-content a,.widget a,.comment-content a {
    border-bottom: 1px solid #EEE;
}
.post-meta a:hover,.post-content a:hover,.widget a:hover,.comment-content a:hover {
    border-bottom-color: transparent;
}
.browsehappy {
    padding: 8px 0;
    background: #FBE3E4;
    color: #8A1F11;
    text-align: center;
}
.browsehappy a {
    color: #8A1F11;
    text-decoration: underline;
    font-weight: bold;
}
#header {
    padding-top: 35px;
    border-bottom: 1px solid #EEE;
}
#logo {

    font-size: 2.5em;
}

#logo img {
    max-height: 64px;
}
.description {
    margin: .5em 0 0;
    color: #999;
    font-style: italic;
}
#nav-menu {
    margin: 25px 0 0;
    padding: 0;
}
#nav-menu a {
    float: left;
    display: block;
    margin-right: -1px;
    padding: 0 20px;
    height: 32px;
    border: 1px solid #EEE;
    border-bottom: none;

    line-height: 32px;
}
#nav-menu a:hover,#nav-menu .current {
    background: #2c3e50;
   color:white;
}
#search {
    position: relative;
    margin-top: 15px;
}
#search input {
    padding-right: 30px;
}
#search button {
    position: absolute;
    top: 2px;
    right: 4px;
    padding: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent url(img/icon-search.png) no-repeat center center;
    text-indent: -9999em;
    direction: ltr;
}
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
    #search button {
        background-image: url(img/icon-search@2x.png);
        background-size: 24px 24px;
        -webkit-background-size: 24px 24px;
        -moz-background-size: 24px 24px;
        -o-background-size: 24px 24px;
    }
}
.post {
    padding: 15px 0 20px;
    border-bottom: 1px solid #EEE;

}
.post-title {
    margin: .83em 0;
    font-size: 1.4em;
}
.post-meta {
    margin-top: -0.5em;
    padding: 0;
    color: #999;
    font-size: .92857em;
}
.post-meta li {
    display: inline-block;
    margin: 0 8px 0 0;
    padding-left: 12px;
    border-left: 1px solid #EEE;
}
.post-meta li:first-child {
    margin-left: 0;
    padding-left: 0;
    border: none;
}
.post-content {
    line-height: 1.15;
   font-size: 100%;
}
.post .tags {
    clear: both;
}
.post-near {
    margin: 30px 0;
    padding: 0;
    color: #999;
    list-style: none;
}
.post-near li {
    margin: 10px 0;
}
.archive-title {
    margin: 1em 0 -1em;
    padding-top: 20px;
    color: #999;
    font-size: 1em;
}
.archive-move-on {
    
   color: #999;
}
.more {
    text-align: center;
}
.more a {
    border: none;
}
.protected .text {
    width: 50%;
}
.page-navigator {
    margin: 25px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.page-navigator li {
    display: inline-block;
    margin: 0 4px;
}
.page-navigator a {
    display: inline-block;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
}
.page-navigator a:hover {
    background: #EEE;
    text-decoration: none;
}
.page-navigator .current a {
    background: #EEE;
    color: #444;
}
#comments {
    padding-top: 15px;
}
.comment-list,.comment-list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.comment-list li {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid #EEE;
}
.comment-list li.comment-level-odd {
    background: #F6F6F3;
}
.comment-list li.comment-level-even {
    background: #FFF;
}
.comment-list li.comment-by-author {
    background: #FFF9E8;
}
.comment-list li .comment-reply {
    text-align: right;
    font-size: .92857em;
}
.comment-meta a {
    color: #999;
    font-size: .92857em;
}
.comment-author {
    display: block;
    margin-bottom: 3px;
    color: #444;
}
.comment-author .avatar {
    float: left;
    margin-right: 10px;
}
.comment-author cite {
    font-weight: bold;
    font-style: normal;
}
.comment-list .respond {
    margin-top: 15px;
    border-top: 1px solid #EEE;
}
.respond .cancel-comment-reply {
    float: right;
    margin-top: 15px;
    font-size: .92857em;
}
#comment-form label {
    display: block;
    margin-bottom: .5em;
    font-weight: bold;
}
#comment-form .required:after {
    color: #C00;
    content: " *";
}
#secondary {
    padding-top: 15px;
    word-wrap: break-word;
}
.widget {
    margin-bottom: 30px;
}
.widget-list {
    padding: 0;
    list-style: none;
}
.widget-list li {
    margin: 5px 0;
    line-height: 1.6;
}
.widget-list li ul {
    margin-left: 15px;
}
#footer {
    padding: 3em 0;
    color: #999;
    text-align: center;
    line-height: 1.5;
}
.error-page {
    margin-top: 100px;
    margin-bottom: 100px;
}
.post-content,.comment-content {
    word-wrap: break-word;
    line-height: 2;
}
.post-content h2,.comment-content h2 {
    font-size: 1.28571em;
}
.post-content img,.comment-content img,.post-content video,.comment-content video {
    max-width: 100%;
}
.post-content a img,.comment-content a img {
    position: relative;
    bottom: -4px;
    background: #FFF;
}
.post-content hr,.comment-content hr {
    margin: 2em auto;
    width: 100px;
    border: 1px solid #E9E9E9;
    border-width: 2px 0 0 0;
}
.aligncenter,div.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
img.alignleft {
    margin: 0 15px 0 0;
}
img.alignright {
    margin: 0 0 0 15px;
}
@media(max-width:767px) {
    body {
        font-size: 100%;
    }
    #nav-menu a {
        float: none;
        display: inline-block;
        margin: 0 -2px;
    }
}
@media(max-width:768px) {
    #header,.post-title,.post-meta {
        text-align: center;
    }
}
@media(min-width:1200px) {
    .container {
        max-width: 952px;
    }
}
.hidden {
    display: none!important;
    visibility: hidden;
}
.sr-only {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
}
.sr-only.focusable:active,.sr-only.focusable:focus {
    position: static;
    overflow: visible;
    clip: auto;
    margin: 0;
    width: auto;
    height: auto;
}
.invisible {
    visibility: hidden;
}
.intro-header {
    background:no-repeat  center  center ; 
    
    background-color:#808080;
    background-attachment:scroll;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    -o-background-size:cover;
    margin-bottom:30px
}
.intro-header .site-heading,.intro-header .post-heading  {
    padding:100px 0 50px;
    color:white
}
span.view-times::before {
    font: normal normal normal 12px/1 FontAwesome;
    content: "\f06e";
    margin-right: 3px;
}
.button { /* 按钮美化 */
    width: auto; /* 宽度 */
    height: 25px; /* 高度 */
    border-width: 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #2c3e50; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 15px; /* 字体大小 */
}
.button:hover { /* 鼠标移入按钮范围时改变颜色 */
    background-color:#e74c3c;
}

回复
阅读 142
2 个回答

刷新页面后,html页面里的body没有带上当前模式的class

可以,使用浏览器的缓存就可以了,比如说 localStorage,可以在浏览器本地持久缓存,然后每次页面载入的时候读取之前的缓存的纪录,最后按照这个值设置主题样式。

当然你也可以用php,每次读取一下数据库缓存,然后设置主题样式,但是没必要。

参考文献
localStorage - Web API 接口参考 | MDN


已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏