这篇文章发布前的2分钟,心情瞬间不好了,工信部发来信息说我前几天上交的4个域名的备案申请被驳回,备案这么多次,这是第一次被驳回,桑心🙁

回正题,没事就是折腾,给主题加Pinghsu了个文章分类菜单,具体效果看这里,话不多说,直接上菜。

文章分类下拉菜单预览

修改functions.php

这一步是添加设置选项

设置选项界面预览

ctrl+F找到下面这一行

$form->addInput($searchPage->addRule('xssCheck', _t('请不要在链接中使用特殊字符')));

在他下面另起一行,添加以下内容

    $categorysMenu = new Typecho_Widget_Helper_Form_Element_Radio('categorysMenu',
        array('able' => _t('启用'),
            'disable' => _t('禁止'),
        ),
        'disable', _t('文章分类下拉菜单'), _t('默认禁止,启用则在导航栏显示文章分类下拉菜单’'));
    $form->addInput($categorysMenu);
    $categorysText = new Typecho_Widget_Helper_Form_Element_Text('categorysText', NULL, NULL, _t('文章分类下拉菜单显示名称(启用“文章分类下拉菜单”后生效)'), _t('在这里输入导航栏分类菜单的显示名称,留空则默认显示为“分类”'));
    $form->addInput($categorysText);
    $categorysPage = new Typecho_Widget_Helper_Form_Element_Text('categorysPage', NULL, NULL, _t('文章分类页面地址(启用“文章分类下拉菜单”后生效)'), _t('输入你的 Template Page of Categorys Archives 的页面地址(未创建此页面或不想使用跳转的可留空),记得带上 http:// 或 https://'));
    $form->addInput($categorysPage->addRule('xssCheck', _t('请不要在链接中使用特殊字符')));

修改header.php

ctrl+F找到下面这一行(注意有2处位置!)

<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>

第1处位置上面(注意是上面!)另起一行,添加以下内容

            <?php if ($this->options->categorysMenu == 'able'): ?>
            <?php $this->widget('Widget_Metas_Category_List')->to($categorys);?>
            <?php if ($categorys->have()): ?>
            <div>
                <a <?php if($this->options->categorysPage): ?>href="<?php $this->options->categorysPage(); ?>"<?php endif;?>><?php if($this->options->categorysText): $this->options->categorysText(); else: ?>分类<?php endif;?></a>
                <ul>
                    <?php while($categorys->next()): ?>
                    <li><a <?php if($this->is('category', $categorys->slug)): ?>class="current" <?php endif; ?>href="<?php $categorys->permalink();?>"><?php $categorys->name();?></a></li>
                    <?php endwhile; ?>
                </ul>
            </div>
            <?php endif; ?>
            <?php endif; ?>

第2处位置上面(注意是上面!)另起一行,添加以下内容

                <?php if( ($this->options->categorysMenu == 'able') && ($categorys->have()) ): ?>
                <li class="navbar-menu-categorys">
                    <a <?php if($this->options->categorysPage): ?>href="<?php $this->options->categorysPage(); ?>"<?php endif;?>><?php if($this->options->categorysText): $this->options->categorysText(); else: ?>分类<?php endif;?></a>
                    <ul>
                        <?php while($categorys->next()): ?>
                        <li><a <?php if($this->is('category', $categorys->slug)): ?>class="current" <?php endif; ?>href="<?php $categorys->permalink();?>"><?php $categorys->name();?></a></li>
                        <?php endwhile; ?>
                    </ul>
                </li>
                <?php endif; ?>

修改style.min.css

由于CSS是压缩的,修改的时候要仔细。

ctrl+F找到下面这个位置

.navbar-menu a.current{color:#eb5055}

在他后面添加以下内容

.navbar-menu div{display:inline-block;position:relative}.navbar-menu div:hover>ul{opacity:1;visibility:visible}.navbar-menu div a{font-size:14px;padding:0 15px}.navbar-menu div ul{position:absolute;left:50%;width:120px;margin:-10px 0 0 -60px;padding:0;border-radius:15px;background-color:rgba(238,238,238,.95);opacity:0;visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.3);box-shadow:0 2px 4px rgba(0,0,0,.3)}.navbar-menu div ul:before{position:absolute;top:-7px;left:53px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid rgba(238,238,238,.95);content:''}.navbar-menu div li{position:relative;display:inline;margin:0;text-decoration:none}.navbar-menu div ul li a{font-size:15px;line-height:1;display:block;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:15px 25px}.navbar-mobile-menu .navbar-menu-categorys ul{position:absolute;top:0;left:0;right:unset;width:100px;margin:5px 0 0 -95px;border-radius:15px;background-color:rgba(255,255,255,.95);-webkit-transition:.5s;transition:.5s}.navbar-mobile-menu .navbar-menu-categorys ul:before{position:absolute;top:9px;right:-7px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(255,255,255,.95);content:''}

ctrl+F找到下面的内容(此处修改是为了更好地兼容各种现代浏览器,建议修改)

.navbar-mobile-menu li{position:relative;display:inline;margin:0;text-decoration:none}

将其中的display:inline;修改为display:block;

就是改成下面这样

.navbar-mobile-menu li{position:relative;display:block;margin:0;text-decoration:none}

至此,完成,去试试效果吧😜

其他说明

依然是基础方法(必改内容),目前还是没有在原版主题上测试,应该是没问题的,就算有问题应该也是CSS方面的小问题,有点动手能力的都可以自己轻松解决,请放心食用,如过真的有什么解决不了的问题,请留言吧!😎