『原创』『教程』为Joe主题文章页添加伸缩侧边栏的小挂件
Brains - 灵感乌托邦
『原创』『教程』为Joe主题文章页添加伸缩侧边栏的小挂件
六六丶
2022-07-07 / 11 评论 / 198 阅读 / 正在检测是否收录...
广告

前言

其实这个小挂件在Joe4.X的时候有的,只不过升级5.0之后作者将它删除了

我也是移植过来的,上个月有一位小伙伴看到后非常喜欢,让我出个教程

l5afj5zr.png

当时答应的很愉快,但是却是立了一个Flag,后半个月忙得不可开交,直到今天小伙伴又来问我,我才想起Flag还没拔 QQ

l5afkkhr.png

答应了的事不能再拖了,也很久没更新博客了,正好今天有空,就来写一写吧

效果展示

l5afvgoa.png

教程开始

一、 添加后台开关

l5ag8e44.png

Joe/functions.php 里添加一下代码(当然,如果你看过我其他教程,引入了 Joe/public/custom.php这个文件,你也可以直接加在这个里面 )

// 伸缩侧边栏开关
$AsideStretch = new Typecho_Widget_Helper_Form_Element_Select(
    'AsideStretch',
    array(
        'off' => '关闭(默认)',
        'on' => '开启',
    ),
    'on',
    '是否启用伸缩侧边栏开关功能',
    '介绍:开启后,页面出现可伸缩侧边栏的模块'
);
$AsideStretch->setAttribute('class', 'joe_content joe_change'); //如未生效,需将joe_change换成joe_other
$form->addInput($AsideStretch->multiMode());

二、添加按钮

将以下代码加入 Joe/post.php

其他页面,如留言、说说等页面都是一样的添加到相应的位置就行了

三、添加JS和CSS

1、添加JS代码

Joe/assets/js/joe.post_page.min.js 最后一个括号前添加以下代码

(当然你也可以添加在 Joe/assets/js/joe.post_page.js ,然后用minify插件压缩后替换就行了)

2、添加css代码

Joe/assets/css/joe.post.min.css 内添加以下代码

.joe_aside.inactive{display:none}.joe_main{position:relative}@media(max-width: 768px){.joe-stretch{display:none}}.joe-stretch{height:100%;position:absolute;top:0;right:0;padding:40px 0}.joe-stretch .contain{position:-webkit-sticky;position:sticky;transition:top .5s;-webkit-animation:swingIconSet 2s infinite linear alternate;animation:swingIconSet 2s infinite linear alternate;z-index:333}@-webkit-keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}.joe-stretch .contain::before{content:"";position:absolute;top:0;left:0;width:10px;height:25px;border-top:2px solid var(--minor);border-right:2px solid var(--minor);transition:border .35s}.joe-stretch .contain svg{position:absolute;top:25px;left:-3px;width:24px;height:24px;fill:var(--minor);cursor:pointer;transition:fill .35s}.joe-stretch .contain:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.joe-stretch .contain:hover svg{fill:var(--theme)}.joe-stretch .contain:hover::before{border-color:var(--theme)}.joe-stretch.active{display:block}

结语

教程到这里就结束了,此教程不仅Joe主题可以使用,也可以用在其他主题,灵活变通一下就可以了

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

7
打赏

评论 (11)

取消
  1. 头像
    pengyu
    Windows 10 · Google Chrome

    人生得意须尽欢,莫让金樽空对月。

    回复 待审 垃圾
  2. 头像
    xsssgge
    Windows 10 · Google Chrome

    重要的事情,你怎么不做呢?

    回复 待审 垃圾
  3. 头像
    xjmeng
    Windows 10 · Google Chrome

    在这里放弃的话,比赛就结束了。

    回复 待审 垃圾
  4. 头像
    1111
    Windows 10 · Google Chrome

    沒有永远下不停的雨。

    回复 待审 垃圾
  5. 头像
    1
    Windows 10 · Google Chrome

    你知道吗?得不出结果就是所谓的无能。

    回复 待审 垃圾
  6. 头像
    墨客
    Windows 10 · Google Chrome

    郁闷,用了个笨法子,新建了个JS文件,然后在页脚文件中引入了,按照教程来的话,点击没效果,不知道哪里出问题了

    回复 待审 垃圾
  7. 头像
    amiisk
    Windows 10 · Google Chrome

    来是偶然的,走是必然的。所以你必须,随缘不变,不变随缘

    回复 待审 垃圾
  8. 头像
    墨客
    Android · QQ Browser

    多谢大佬的分享,为了这还专门下载了老版本的主题研究,一直没成功。哈哈。昨天晚上再次请求大佬出教程,没想到…嘿嘿,谢谢了

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ 墨客

      客气了,其实我这个方法很拙劣,能帮到你就好!QQ

      回复 待审 垃圾
      1. 头像
        墨客
        Windows 10 · Google Chrome
        @ 六六丶

        大佬,不知道哪里问题,显示是显示了,只是点击没反应QQ

        回复 待审 垃圾
      2. 头像
        墨客
        Windows 10 · Google Chrome
        @ 六六丶

        其实发现老版本的主题确实很好,只是有些地方没搞明白,有些东西想加进去又不知道怎么下手,哎
        无意间看到贵站,就一直收藏了起来,也每天前来观摩。学习到很多东西,在此再次感谢博主

        回复 待审 垃圾
文章目录