注册
『原创』『教程』为Joe主题文章页添加伸缩侧边栏的小挂件
Brains - 灵感乌托邦

『原创』『教程』为Joe主题文章页添加伸缩侧边栏的小挂件

六六丶
2022-07-07 / 49 评论 / 13,647 阅读 / 收录检测中...
广告
温馨提示:
本文最后更新于2022年09月14日,已超过815天没有更新,若内容或图片失效,请留言反馈。

前言

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

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

62f662bd53369.png

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

62f662c3a636b.png

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

效果展示

62fafa42b85fa.png

教程开始

一、 添加后台开关

62f662e144b49.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主题可以使用,也可以用在其他主题,灵活变通一下就可以了

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

19
打赏
gzh

评论 (49)

图片
私语
取消
  1. 头像
    发大幅度
    湖北省 Windows 10 · Google Chrome
    样式啥的都添加上了 但是点击挂件不收回

    回复
    1. 头像
      六六丶 作者
      浙江省杭州市 Windows 10 · Google Chrome
      @ 发大幅度
      强制刷新试试Ctrl+F5

      回复
  2. 头像
    曈曈too
    四川省成都市 Windows 10 · Google Chrome
    Choose , and choose wisely . Or others shall choose for you .

    回复
  3. 头像
    A
    湖北省武汉市 Windows 10 · Google Chrome
    战争只在历史书籍历书写了四页,却撕掉了将近一半的世界。

    回复
  4. 头像
    kingkare
    山西省晋中市 Windows 7 · Google Chrome
    样式啥的都添加上了 但是点击挂件不收回

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 10 · Google Chrome
      @ kingkare
      强制刷新看看有没有生效,不行的话看看开发者工具内的报错信息,再根据报错修改

      回复
  5. 头像
    kingkare
    山西省晋中市 Windows 7 · Google Chrome
    我按照教程试了一遍不行啊貌似QQ

    回复
  6. 头像
    甜筒
    美国 Windows 10 · Google Chrome
    双马尾是最好的方向盘

    回复
    1. 头像
      六六丶 作者
      重庆市 Windows 10 · Google Chrome
      @ 甜筒
      朋友,这可不兴说呀QQ

      回复
  7. 头像
    逍遥
    四川省成都市 Windows 10 · Google Chrome
    月色与雪色之间,你是第三种绝色。

    回复
  8. 头像
    学姐
    河南省南阳市 Android · Google Chrome
    风萧萧兮易水寒,壮士一去兮不复还。

    回复
  9. 头像
    执念、
    广东省梅州市 Linux · Google Chrome
    契约者不会做梦。

    回复
  10. 头像
    君上
    上海市 Windows 10 · Google Chrome
    在茫茫人海中,同样是高中生,同乘7点50分的电车,看着同一片海…那个瞬间不就是如奇迹般的邂逅吗。

    回复
文章目录