给博客文章加一个阅读模式

给博客文章加一个阅读模式，大大的提高了阅读效率，非常适合文献类的或者文学类的博客。话不多说，直接上教程。

使用方法

直接在页脚文件 foot.php（有的是footer.php）放入以下代码即可。
以下代码仅适用于 tyoecho 程序的 joe 主题，请根据自己的程序和主题进行修改

<!-- 阅读模式 -->
<style>
    .read_book {background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_greedread.png)
    }

    .not_read_book {background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_notread.png)
    }

    .read_book_button {
        height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    position: fixed;
    bottom: 22px;
    right: 32px;
    outline: none;    
    }   
</style>

<button class="read_book_button not_read_book" style="display: none"></button>


<script>   
    // 判断是否出现正文出现正文的时候出现 read 按钮
    var topics = document.querySelector('#markdown');
    var read_book_button = document.querySelector('.read_book_button');
    if (topics) {read_book_button.style.display = 'block'}
    
    read_book_button.onclick = function () {
        // 点击事情跟换类名
        var class_name = this.classList[1];
        class_name == 'read_book' ? this.className = 'read_book_button not_read_book' : this.className = 'read_book_button read_book'

        // 更换样式
        // 头
        var head = document.querySelector('.j-header');
        // 右侧
        var sideBar = document.querySelector('.j-aside');
        // 评价栏
        var comment_form = document.querySelector('#comments');

        // 正文无关的内容
        var blog_post_info_block = document.querySelector('.j-bread');
        var postDesc = document.querySelector('.container');
        var footer = document.querySelector('.j-footer');
        var blog_comments_placeholder = document.querySelector('.page');  
        var related = document.querySelector('.related');        
       
        // 文章
        var markdown = document.querySelector('#markdown');

        if (class_name == 'read_book') {
            head.style.display = 'block';
            sideBar.style.display = 'block';
            comment_form.style.display = 'block';
            blog_post_info_block.style.display = 'block';
            postDesc.style.display = 'block';
            footer.style.display = 'block';
            blog_comments_placeholder.style.display = 'block'; 
            related.style.display = 'block';                       
            mainContent.style.width = '94%'
        } else {
            head.style.display = 'none';
            sideBar.style.display = 'none';
            comment_form.style.display = 'none';
            blog_post_info_block.style.display = 'none';
            postDesc.style.display = 'none';
            footer.style.display = 'none';
            blog_comments_placeholder.style.display = 'none';   
            related.style.display = 'none';            
            mainContent.style.width = '124%'
        }
    }
</script>
<!-- 阅读模式结束 -->

详细说明，需要自行修改的地方

以下代码是按钮的图片和样式，可以自行修改

<style>
    .read_book {background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_greedread.png)
    }

    .not_read_book {background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1516412/o_notread.png)
    }

    .read_book_button {
        height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    position: fixed;
    bottom: 22px;
    right: 32px;
    outline: none;    
    }   
</style>

以下是判断在文章内容页显示按钮，其他页面不显示

// 判断是否出现正文出现正文的时候出现 read 按钮
    var topics = document.querySelector('#markdown');

其中 #markdown 是文章页面出现的唯一 ID 名称，可以换成自己的文章页面唯一的 ID 名称或者 CLASS 名称，就是出现该 ID 名称或者 CLASS 名称就会显示按钮，不出现就不显示，这个名称一定是只能在文章页面出现而其他页面没有的才可以哦。自己找下吧

点击隐藏图层

// 更换样式
        // 头
        var head = document.querySelector('.j-header');
        // 右侧
        var sideBar = document.querySelector('.j-aside');
        // 评价栏
        var comment_form = document.querySelector('#comments');

以上只要替换 （） 的 ID 名称或者 CLASS 名称为自己的头部、右侧、评价栏的 ID 名称或者 CLASS 名称就可以了。如果你的博客没有右侧边栏的话可以删除右侧部分。前面的 head 、 sideBar 、comment_form 只是一个标记可以任意更换，但是要说明的是，一旦更换了那下面同样的标记也要随之更改。

if (class_name == 'read_book') {
            head.style.display = 'block';
            sideBar.style.display = 'block';
            comment_form.style.display = 'block';
            blog_post_info_block.style.display = 'block';
            postDesc.style.display = 'block';
            footer.style.display = 'block';
            blog_comments_placeholder.style.display = 'block'; 
            related.style.display = 'block';                       
            mainContent.style.width = '94%'
        } else {
            head.style.display = 'none';
            sideBar.style.display = 'none';
            comment_form.style.display = 'none';
            blog_post_info_block.style.display = 'none';
            postDesc.style.display = 'none';
            footer.style.display = 'none';
            blog_comments_placeholder.style.display = 'none';   
            related.style.display = 'none';            
            mainContent.style.width = '124%'
        }

上面就是点击阅读按钮隐藏相对应的图层，再点击就显示隐藏的图层（即恢复正常）。

文章页面除了头部、右侧、评价栏之外还想隐藏其他图层就添加以下代码

// 正文无关的内容
        var blog_post_info_block = document.querySelector('.j-bread');
        var postDesc = document.querySelector('.container');
        var footer = document.querySelector('.j-footer');
        var blog_comments_placeholder = document.querySelector('.page');  
        var related = document.querySelector('.related');    

以上代码的（）里填你想要隐藏的图层 ID 名称或者 CLASS 名称，如页脚、文章目录、上一篇下一篇等等