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

原创

六六丶

修改于 2022-08-05 11:47:59

8990

修改于 2022-08-05 11:47:59

文章被收录于专栏：Brains - 灵感乌托邦Brains - 灵感乌托邦

前言

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

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

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

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

效果展示

教程开始

一、添加后台开关

在 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 中

添加代码

<!-- 伸缩侧边栏 -->
<?php if ($this->options->AsideStretch === 'on') : ?>
  <div class="joe-stretch">
    <div class="contain">
      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M1024 894.976c0 71.68-51.2 129.024-114.688 129.024H116.736c-63.488 0-114.688-57.344-114.688-129.024V129.024C0 57.344 51.2 0 116.736 0h790.528c63.488 0 114.688 57.344 114.688 129.024v765.952zM987.136 155.648c0-65.536-47.104-118.784-106.496-118.784H145.408c-59.392 0-108.544 53.248-108.544 118.784v712.704c0 65.536 47.104 118.784 106.496 118.784h735.232c59.392 0 106.496-53.248 106.496-118.784V155.648z m0 0" p-id="17709"></path>
        <path d="M923.648 288.768c0 32.768-24.576 57.344-55.296 57.344H165.888c-30.72 0-55.296-26.624-55.296-57.344V172.032c0-32.768 24.576-57.344 55.296-57.344h702.464c30.72 0 55.296 26.624 55.296 57.344v116.736z m0 0M638.976 851.968a57.344 57.344 0 0 1-57.344 57.344H169.984a57.344 57.344 0 0 1-57.344-57.344V475.136a57.344 57.344 0 0 1 57.344-57.344h411.648a57.344 57.344 0 0 1 57.344 57.344v376.832z m0 0M931.84 851.968a57.344 57.344 0 0 1-57.344 57.344h-112.64a57.344 57.344 0 0 1-57.344-57.344V475.136a57.344 57.344 0 0 1 57.344-57.344h112.64a57.344 57.344 0 0 1 57.344 57.344v376.832z m0 0" p-id="17710"></path>
      </svg>
     </div>
  </div>
<?php endif; ?>

添加位置

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

三、添加JS和CSS

1、添加JS代码

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

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

// 伸缩侧栏
  {
    if ($(".joe_post div").hasClass("joe-stretch")) {
      $(".joe-stretch .contain").css("top", $(".joe_header").height() + 40);
      $(".joe-stretch").on("click", function () {
        $(".joe_aside").toggleClass("inactive");
      });
    }
  }

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

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

本文链接

灵感乌托邦

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html5

php

javascript

css

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度