号外号外！重磅升级！Typecho&Aria迎来你所期待的分类导航

西柚dzh

发布于 2022-06-09 15:38:52

2430

发布于 2022-06-09 15:38:52

文章被收录于专栏：dcmickey小站

前言

由于本人使用的Aria主题，一款很精致的主题。重点是这么好的主题还免费。比起其他好看的收费主题还是好很多。但是苦于一直没有个分类导航页面，就很苦恼。在主题站摸索一段时间，找到一款同样很优秀的主题Mirages,可是要收费。对于抠钱的我来说，果断就放弃了。虽然人家值这个钱，但是和免费的一对比优势瞬间没了。

那好，我就自己摸索，看看能不能搞上分类。

鬼知道我经历了什么

1.网上搜了一段代码，尝试贴进header中，失败告终。

2.灵光一闪，下载个别的有分类的主题，研究下人家怎么搞进去的。失败告终

3.哈哈，终于上面的虽然失败了，但是启发了我。why not 研究自己主题里面的导航怎么设置进去的呢？？？

4.于是乎，我打开源代码，翻看header.php，不断调试，找到如下代码：

<div id="nav-right">
        <ul class="nav-right-list">
            <?php Utils::showNav(1,$slugs); ?>
        </ul>
    <div id="nav-btns">
        <i class="iconfont icon-aria-menu" id="nav-menu-btn" onclick="toggleNav();"></i>
        <i class="iconfont icon-aria-search" id="nav-search-btn"></i>
    </div>
    </div>

没错这段代码就是真身，上面的ul是提供出来供博主再控制台配置的导航栏，下面的是搜索位，因此我决定到Utils.php这个工具类文件里看看showNav如何实现的

5.重点来了，我照着showNav中的格式，自己写了这样一段代码，插入适当位置。

 $html .= "<li class=$navclass><a href='#' ><i class='iconfont icon-aria-category'></i>分类</a>";
                $html .= "<ul class=$ulSubclass>";
                $category = Typecho_Widget::widget('Widget_Metas_Category_List')->to($category);
                while(!empty($category->next())){
                    $html .= "<li class=$lisubClass><a class='nav-link' href=$category->permalink >$category->name</a></li>";  
                }
                $html .= "</ul>";
                $html .= "</li>";

完整代码请看下面，替换原有即可。再原作者基础上重构了一下该方法，(强迫症的自行格式化吧)：

/**
     * 根据配置的JSON数据输出导航栏
     * @param int $mode
     * @param string $slugs
     * 
     * @return void
     */
    public static function showNav($mode, $slugs)
    {
        $data = self::convertConfigData('navConfig', true);
        if (!$data) {
            return;
        }

        $text = null;
        $href = null;
        $icon = null;
        $target = null;
        $sub = null;

        if ($data) {
            $html = '';
            $navclass=$mode?"nav-right-item":"nav-vertical-item";
            $ulSubclass=$mode?"nav-sub":"nav-vertical-sub";
            $lisubClass=$mode?"sub-item":"vertical-sub-item";
                foreach ($data as $v) {
                    $text = array_key_exists('text', $v) ? $v['text'] : "";
                    $href = array_key_exists('href', $v) ? 'href="' . $v['href'] . '"' : "";
                    $icon = array_key_exists('icon', $v) ? 'class="' . $v['icon'] . '"' : "";
                    $target = array_key_exists('target', $v) ? 'target="' . $v['target'] . '"' : "";
                    $slug = (array_key_exists('slug', $v) && $slugs && array_key_exists($v['slug'], $slugs)) ? $slugs[$v['slug']] : false;
                    if ($slug) {
                        $href = 'href="' . $slug['permarlink'] . '"';
                        $text = $slug['title'];
                    }
                    $html .= "<li class=$navclass><a $href $target><i $icon></i>$text</a>";
                    if (array_key_exists('sub', $v)) {
                        $html .= "<ul class=$ulSubclass>";
                        foreach ($v['sub'] as $_k => $_v) {
                            $text = array_key_exists('text', $_v) ? $_v['text'] : "";
                            $href = array_key_exists('href', $_v) ? 'href="' . $_v['href'] . '"' : "";
                            $icon = array_key_exists('icon', $_v) ? 'class="' . $_v['icon'] . '"' : "";
                            $target = array_key_exists('target', $_v) ? 'target="' . $_v['target'] . '"' : "";
                            $slug = (array_key_exists('slug', $_v) && $slugs && array_key_exists($_v['slug'], $slugs)) ? $slugs[$_v['slug']] : false;
                            if ($slug) {
                                $href = 'href="' . $slug['permarlink'] . '"';
                                $text = $slug['title'];
                            }
                            $html .= "<li class=$lisubClass><a $href $target><i $icon></i>$text</a></li>";
                        }
                        $html .= "</ul>";
                    }
                    $html .= "</li>";
                }
                $html .= "<li class=$navclass><a href='#' ><i class='iconfont icon-aria-category'></i>分类</a>";
                $html .= "<ul class=$ulSubclass>";
                $category = Typecho_Widget::widget('Widget_Metas_Category_List')->to($category);
                while(!empty($category->next())){
                    $html .= "<li class=$lisubClass><a class='nav-link' href=$category->permalink >$category->name</a></li>";  
                }
               
                $html .= "</ul>";
                $html .= "</li>";
            echo $html;
        }
        //转换失败
        echo false;
    }

~~6.以下代码段是初次修改方式，存在手机和PC兼容问题，已废弃不用看（仅作为修改历史显示）~~

<div id="nav-right">
        <ul class="nav-right-list">
            <?php Utils::showNav(1,$slugs); ?>
<li class="nav-right-item"><a href="#"><i></i>分类</a>
<ul class="nav-sub">
<?php $this->widget('Widget_Metas_Category_List')->to($category);?>
<?php while($category->next()):?>
<li class="sub-item <?php if($this->is('category', $category->slug)): ?>active<?php endif;?>">
<a class="nav-link" href="<?php $category->permalink();?>" title="<?php $category->name();?>"><?php $category->name();?></a>
</li>
<?php endwhile;?>
</ul>
</li>
        </ul>
    <div id="nav-btns">
        <i class="iconfont icon-aria-menu" id="nav-menu-btn" onclick="toggleNav();"></i>
        <i class="iconfont icon-aria-search" id="nav-search-btn"></i>
    </div>
    </div>

7.到此完美：