Typecho博客添加阅读模式（适配Joe，其他主题也可用）

教程简介：

这个阅读模式真的不错可以屏蔽到很多不想看的内容，比如广告， 使用阅读模式看小说体验不错，大家可以试试。

相关图片：

这个功能也是xcshare定制的功能，但是我还是分享出来吧 

成果展示：

教程如下：

一、添加后台开关 一样的，还是在 Joe/functions.php 里添加（也可以在 Joe/public/custom.php 里添加，前提是你创建并引用了这个文件）

// 是否启用阅读模式
$ReadBook = new Typecho_Widget_Helper_Form_Element_Select(
    'ReadBook',
    array(
        'off' => '关闭（默认）',
        'on' => '开启'),
    'off',
    '请选择是否启用阅读模式',
    '介绍：开启后，文章页可以进入阅读模式'
);
$ReadBook->setAttribute('class', 'joe_content joe_custom');    //没有joe_custom就改成joe_other
$form->addInput($ReadBook->multiMode());

二、添加开关按钮 在 Joe/public/footer.php 的内部添加以下代码

    options->ReadBook === 'on' && $this->is('post')) : ?>

三、添加JS 首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js 在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码 当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.js 里，再进行压缩

四、添加按钮css 在 Joe/assets/css/joe.post.min.css 里加入以下代码 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.scss 里，再用scss to css转换即可

.joe_action_item.read_book{visibility:hidden;transform:scale(0)}.joe_action_item.read_book.active{visibility:visible;transform:scale(1)}.joe_action_item.read_book svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale(1);opacity:1}

结语：其实教程很简单，就是隐藏一些组件和更换页面底色