TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

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

老狮博主
2021-01-06
/
0 评论
/
736 阅读
/
566 个字
/
百度已收录
01/06
本文最后更新于2021年01月07日,已超过169天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

效果展示

进入本博客任意一篇文章的右下角可以看效果。

使用方法

直接在页脚文件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名称就可以了。如果你的博客没有右侧边栏的话可以删除右侧部分。前面的headsideBarcomment_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名称,如页脚、文章目录、上一篇下一篇等等

美化代码阅读模式
朗读
赞(4)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2422.html(转载时请注明本文出处及文章链接)

评论 (0)

互动读者

  • 神话2闲逛

    评论 7 次 | 文章 0 篇

  • ptcry闲逛

    评论 3 次 | 文章 0 篇

  • 111闲逛

    评论 3 次 | 文章 0 篇

  • 火喵闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. 路过闲逛
    2021-06-24
  2. 88闲逛
    2021-06-23
  3. 萨达萨达按时闲逛
    2021-06-23
  4. 神话6闲逛
    2021-06-23
  5. 神话2闲逛
    2021-06-21