Joe主题美化 文章页添加伸缩侧边栏的小挂件

源码介绍

Joe主题 博客中有侧边栏伸缩功能，点击摆动的挂件即可实现，为网站增加一个互动小功能。

一、 添加后台开关

在 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