主题自带的菜单只支持一级菜单,如果设置了二级目录,则会作为一级目录直接显示在菜单栏上。同时,点击一级菜单的时候会出现错误。
没辙,只能自己动手修复BUG。

在网上搜了一下,发现海胖有提供一段代码实现二级目录的遍历。但是使用中发现有点问题,为了适配DUX的主题,还需要做一些修改。

操作header.php文件

在后台打开header.php文件,然后找到下面这段代码

红框中的代码就是原主题自带的生成菜单的代码。将这个循环体删除。如果想保险一点,提前备份header.php文件。
然后将下面的代码复制到原先代码的位置。

<!-- 二级菜单 -->
<?php $this->widget('Widget_Metas_Category_List')->to($categorys); ?>
<?php  $i=-1;while($categorys->next()): ?>
    <?php if ($categorys->levels === 0): ?>
        <?php $i++; ?>
        <?php $children = $categorys->getAllChildren($categorys->mid); ?>
        <?php if (empty($children)) { ?>
            <li <?php if($this->is('category', $categorys->slug)): ?> class="active"<?php endif; ?>>
                <a href="<?php $categorys->permalink(); ?>" title="<?php $categorys->name(); ?>"> <?php echo fa_ico(1,$i); ?> <?php $categorys->name(); ?>
                </a>

            </li>
        <?php } else { ?>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" data-target="#"><?php echo fa_ico(1,$i); ?><?php $categorys->name(); ?> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <?php $j=0;foreach ($children as $mid) { ?>
                        <?php $child = $categorys->getCategory($mid); ?>
                        <li <?php if($this->is('category', $mid)): ?> class="active"<?php endif; ?>>
                            <a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo fa_ico(2,$j); ?><?php echo $child['name']; ?>
                            </a>
                        <?php $j++; ?>
                        </li>
                    <?php } ?>
                </ul>
            </li>
        <?php } ?>
    <?php endif; ?>

<?php endwhile; ?>

<!-- 二级菜单结束 -->

修改functions.php文件

原主题自带的fa_ico函数也有点问题,为了配合我们上面的代码,我们还要修改fucntions.php文件中的fa_ico代码,以实现更好的菜单图标功能。
后台打开fucntions.php文件,找到其中的fa_ico函数

用下面的fa_ico代替原代码。

//导航fa图标
function fa_ico($type, $num) {
    $options = Typecho_Widget::widget('Widget_Options');
    if ($type == 1) {
        if (!empty($options->fatext)) {
            $text = $options->fatext;
            $fa_arr = explode(";", $text);
            // 获得设置的图标的数量
            $icon_count = count($fa_arr);
            if ($num < $icon_count){
            // 如果设置了图标
            return $fa_arr[$num];
            }
            // 如果没有设置图标,使用默认的
            else{
            $text='<i class="fa fa-book"></i>';
            return $text;
            }
            // return $fa_arr[$num];
        }
        else {
            $text='<i class="fa fa-book"></i>';
            return $text;
        }
    }
    else {
        if (!empty($options->pagefatext)) {
            $text = $options->pagefatext;
            $fa_arr = explode("\n", $text);
            return $fa_arr[$num];
        }
        else {
            $text='<i class="fa fa-file-text-o"></i>';
            return $text;
        }
    }
}

设置菜单图标

然后就可以在后台的主题设置中,将想设置的菜单的图标设置上去,中间以“;”间隔。

保存后,刷新网站,就可以看到一级菜单前如果设置了图标,则显示的是设置的图标,如果没有设置,则显示的默认图标。
二级菜单目前使用的设置中给独立页面的图标。后续header.php中的代码还可以优化,让二级菜单也可以自定义图标。

Last modification:October 15, 2018
如果觉得文章对你有用,请随意赞赏