当前位置：网站首页>"Original" "Tutorial" to add a small pendant of the telescopic sidebar to the Joe theme article page

"Original" "Tutorial" to add a small pendant of the telescopic sidebar to the Joe theme article page

2022-08-05 13:02:00 【Fuuuy】

前言

In fact, this little pendant is thereJoe4.X的时候有的,Just an upgrade5.0The author has since removed it

I also transplanted it,Last month, a friend saw it and liked it very much,Let me make a tutorial

l5afj5zr.png

It was a happy promise at the time,But there was oneFlag,The second half of the month has been very busy,Until today, my friend came to ask me again,我才想起Flagnot pulled yet :$(发呆)

l5afkkhr.png

What was promised can't be put off any longer,I haven't updated my blog for a long time,正好今天有空,Just write it

效果展示

l5afvgoa.png

教程开始

一、 Add background switch

l5ag8e44.png

在 Joe/functions.php 里添加一下代码（当然,If you have seen my other tutorials,引入了 Joe/public/custom.php这个文件,You can also add it directly to this ）

// Retractable sidebar switch
$AsideStretch = new Typecho_Widget_Helper_Form_Element_Select(
    'AsideStretch',
    array(
        'off' => '关闭（默认）',
        'on' => '开启',
    ),
    'on',
    'Whether to enable the retractable sidebar switch function',
    '介绍：开启后,A module with a retractable sidebar appears on the page'
);
$AsideStretch->setAttribute('class', 'joe_content joe_change'); //如未生效,需将joe_change换成joe_other
$form->addInput($AsideStretch->multiMode());

二、添加按钮

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

添加代码

<!-- Retractable sidebar -->
<?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; ?>

添加位置

l5ahqpu6.png

其他页面,如留言、Talk about and other pages are the same to add to the corresponding position on the line

三、添加JS和CSS

1、添加JS代码

在 Joe/assets/js/joe.post_page.min.js Add the following code before the last bracket

（Of course you can also add in Joe/assets/js/joe.post_page.js ,然后用minifyAfter the plugin is compressed, it can be replaced）

// Retractable sidebar
  {
    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}