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

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

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

前言

其实这个小挂件在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主题可以使用,也可以用在其他主题,灵活变通一下就可以了

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

11
打赏
gzh

评论 (23)

语录
图片
取消
  1. 头像
    云志
    Windows 10 · QQ Browser

    眉若远山,目运星河。

    回复
  2. 头像
    君莫笑
    Windows 10 · Google Chrome

    画图

    回复
  3. 头像
    xcshare
    Windows 10 · Google Chrome

    老大,要文章目录的介绍

    回复
  4. 头像
    s1240
    Windows 10 · Google Chrome

    即使得不到旁人的认同,即使不曾拥有像样的地位,我们小小的双手也一定,能为明天的某人带去笑容。

    回复
  5. 头像
    Windows 10 · Google Chrome

    红豆生南国,春来发几枝。表情

    回复
  6. 头像
    smile
    Windows 10 · Google Chrome

    如果你都不知道自己想去哪里,那去哪里都是一样的。

    回复
  7. 头像
    vian
    Windows 10 · Google Chrome

    微风摇曳着窗帘,夕阳斜射入教室,在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友,不行吗?」

    回复
  8. 头像
    Windows 10 · Google Chrome

    我本可以忍受黑暗,如果我不曾见过太阳……然而阳光已使我的荒凉,成为更新的荒凉。

    回复
  9. 头像
    boss
    Windows 10 · QQ Browser

    亦恶亦怜薛成美,半生恶尽半生痴。

    回复
  10. 头像
    boss
    Windows 10 · QQ Browser

    世事漫随流水,算来一梦浮生。

    回复
  11. 头像
    无心v
    Windows 10 · Google Chrome

    回复
  12. 头像
    无心v
    Windows 10 · Google Chrome

    画图

    回复
  13. 头像
    pengyu
    Windows 10 · Google Chrome

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

    回复
  14. 头像
    xsssgge
    Windows 10 · Google Chrome

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

    回复
  15. 头像
    xjmeng
    Windows 10 · Google Chrome

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

    回复
  16. 头像
    1111
    Windows 10 · Google Chrome

    沒有永远下不停的雨。

    回复
  17. 头像
    1
    Windows 10 · Google Chrome

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

    回复
  18. 头像
    墨客
    Windows 10 · Google Chrome

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

    回复
  19. 头像
    amiisk
    Windows 10 · Google Chrome

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

    回复
  20. 头像
    墨客
    Android · QQ Browser

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

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

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

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

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

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

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

        回复
文章目录