注册
『原创』『教程』为你的博客添加阅读模式(适配Joe,其他主题也可用)
Brains - 灵感乌托邦

『原创』『教程』为你的博客添加阅读模式(适配Joe,其他主题也可用)

六六丶
2022-08-22 / 31 评论 / 19,568 阅读 / 收录检测中...
广告
温馨提示:
本文最后更新于2022年11月02日,已超过512天没有更新,若内容或图片失效,请留言反馈。

前言

我又来拔flag了,最近立了好多flag,但是最近重庆太热了,不想写文章(其实就是懒了)

63077db5dc1fb.png

既然给小伙伴立了flag,还是要说到做到,不然没有小伙伴来玩了。

63077de7219e6.png

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

成果展示

6302f1fcac653.gif

教程开始

一、添加后台开关

一样的,还是在 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<div class="joe_action"> 内部添加以下代码

<!-- 阅读模式 -->
    <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?>  <!-- 检测是否为文章页 -->
        <div class="joe_action_item read_book" title="阅读模式">
            <svg t="1651294208728" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
                <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path>
                <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" fill="var(--minor)" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path>
            </svg>
            <svg t="1651294208728" class="icon-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
                <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path>
                <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path>
            </svg>
        </div>
    <?php endif; ?>

三、添加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}

结语

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

没有固定的方法,只有固定的思维,所以一定要多思考、多变通。

16
打赏
gzh

评论 (31)

图片
私语
取消
  1. 头像
    11223
    陕西省西安市 Windows 10 · Google Chrome
    且将新火试新茶,诗酒趁年华

    回复
  2. 头像
    码话疼
    江西省 Windows X64 · QQ Browser
    与其被自己的本性牵着走而痛苦,倒不如试着改变自己。

    回复
  3. 头像
    BBA
    江苏省南京市 Windows 10 · QQ Browser
    谢谢

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 10 · Google Chrome
      @ BBA
      不客气,也感谢你的监督QQ

      回复
  4. 头像
    vian
    广东省广州市 Android · Google Chrome
    原来你也在十年之约啊

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 10 · Google Chrome
      @ vian
      是的,也期望能够一直坚持下去QQ

      回复
      1. 头像
        vian
        广东省深圳市 Windows 10 · Google Chrome
        @ 六六丶
        加油 哈哈表情

        回复
  5. 头像
    匿名
    广东省东莞市 Windows X64 · QQ Browser
    如果今天是最糟糕的,那么明天一定比今天美好,不是吗?

    回复
  6. 头像
    sUN
    新疆乌鲁木齐市 Windows 7 · FireFox
    万有引力可无法对坠入爱河的人负责。

    回复
文章目录