主题添加移动端下边栏

joe 主题移动样式下面无法登录，所以索性给 joe 主题加上下边栏

1.首先在component文件夹里新建一个footer.navimobi.php，其中JNavigation是我自己之前美化加的，你可以换成自己的链接。

    <?php
    /**
     * 手机底部列表菜单
     */
    if (!Helper::options()->JMobiset) return;
    //$settings = Helper::options()->JNavmobi;
    $all = Typecho_Plugin::export();
    $loginUrl = $this->options->loginUrl;

    if (array_key_exists('TePass', $all['activated'])){
        if ($this->user->hasLogin()) $loginUrl = $this->options->index.'/admin/extending.php?panel=TePass/theme/ucenter/profile.php';
        else $loginUrl = $this->options->index.'/tepass/signin';
    }
    ?>
    <nav class="navigation-tab">
    <!--    --><?php
    //    $navtops_list = array();
    //    if (strpos($settings,'||')) {
    //        //解析关键词数组
    //        $kwsets = array_filter(preg_split("/(\r|\n|\r\n)/",$settings));
    //        foreach ($kwsets as $kwset) {
    //            $navtops_list[] = explode('||',trim($kwset));
    //        }
    //    }
    //    ?>
        <div class="navigation-tab-item"><a href="<?php echo $this->options->index ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-zhuye"></i></span></a></div>
        <div class="navigation-tab-item"><a href="<?php echo $loginUrl ?>" target="_blank"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-denglu"></i></span></a></div>
        <div class="navigation-tab-item <?php if ($this->is('page')) _e('active'); ?>" id="load_mobinav"><a href="<?php echo $this->options->JNavigation ?>" target="_self"><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-paihangbang"></i></span></a></div>
        <div class="navigation-tab-item" id="mob_goTop"><a><span class="navigation-tab__icon"><i class="iconfont icon-iconfont icon-gotop"></i></span></a></div>
        <div class="navigation-tab-overlay"></div>
    </nav>

2.然后在functions.php里面加上一个开关

        // 手机底部导航栏样式
        $JMobiset = new Typecho_Widget_Helper_Form_Element_Select('JMobiset',array(0=>'不开启',1=>'开启'),0,'<h2>移动设置 Info</h2><hr>移动底部菜单设置','移动端页脚底部菜单');
        $JMobiset->setAttribute('class', 'j-setting-content j-setting-index');
        $form->addInput($JMobiset);

3.在 public/config.php 里面（顶部）引入我们刚刚的文件

<?php $this->need('component/footer.navmobi.php'); ?>

最后加上控制js和 样式css

    $(".navigation-tab-item").bind('click',function() {
        $(".navigation-tab-item").removeClass("active");
        $(this).addClass("active");
        $(".navigation-tab-overlay").css({
            left: 25 * $(this).prevAll().length + "%"
        })
    })
    $("#mob_goTop").click(function () {
        $("#backToTop").click()
    })
    let load_mobi = $('#load_mobinav')
    if (load_mobi.hasClass('active')){
        $(".navigation-tab-overlay").css({
            left: 25 * load_mobi.prevAll().length + "%"
        })
    }

4.以下代码为scss ，自己手动转css

    @media (max-width: 768px) {
        .navigation-tab {
            display: flex !important;
        }
    }
    /* navigation-tab */
    .navigation-tab{
        height: 60px;
        width: 100%;
        line-height: 1;
        background-color: #fff;
        box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
        overflow: hidden;
        border: 10px solid #fff;
        display: none;
        flex-shrink: 0;
        position: fixed;
        bottom: 0;
        z-index: 40;
        .navigation-tab-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            flex-shrink: 0;
            line-height: 1;
            cursor: pointer;
            transition: 0.3s;
            position: relative;
            z-index: 2;

            &.active {
                width: 25%;
            }
            .navigation-tab__icon {
                display: block;
                color: #4298e7;
                transition-duration: 0.3s;
                line-height: 1;
                svg{
                    width: 24px;
                    height: 24px;
                    fill:#4298e7;
                }
                i{
                    font-size: 24px;
                }
            }
        }
        .navigation-tab-overlay {
            border-radius: 20px;
            background-color: #e4f2ff;
            height: 100%;
            width: 25%;
            position: absolute;
            left: 0;
            top: 0;
            transition: 0.3s;
        }

    }