typecho导航调用分类,并实现折叠效果

最近开始尝试开发typecho模板,说实话是相当容易了,大多数的功能百度一下都有解决方案的教程,所以制作起来也算容易,只不过没有模板引擎的缘故,各种标签其实就是php的代码。然后对于博客新的页面,希望以更加直观的方式呈现分类,所以要实现折叠显示的效果,其实效果这些css就可以解决,主要还是数据的循环调用问题,查阅了很多的资料,进行多次调试之后,才完善起来,所以决定记录下来。

代码如下:

<?php $this->widget('Widget_Metas_Category_List')->to($categorys); ?>
<?php while($categorys->next()): ?>
<?php if ($categorys->levels === 0): ?>
<?php $children = $categorys->getAllChildren($categorys->mid); ?>
<?php if (empty($children)) { ?>
<li id="menu-item-<?php $categorys->mid(); ?>" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-<?php $categorys->mid(); ?>"><a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a></li>
<?php } else { ?>
<li id="menu-item-<?php $categorys->mid(); ?>" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-<?php $categorys->mid(); ?>"><a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?><span class="caret"></span></a>
<ul class="sub-menu">
<?php foreach ($children as $mid) { ?>
<?php $child = $categorys->getCategory($mid); ?>
<li id="menu-item-<?php echo $child['mid'] ?>" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-<?php echo $child['mid'] ?>"><a href="<?php echo $child['permalink'] ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php endif; ?>
<?php endwhile; ?>

循环出的html代码截图,可以看到子类在父类标签内部被循环调出:
1.png

最终效果如下:
2.png

【最后,请期待一下博客的新界面吧】

您的大名:
万水千山总是情,给个打赏行不行。 打赏
原创文章,作者:不暇,如若转载,请注明出处:https://www.ruletree.club/archives/865/
规则之树博客,界面改版预告
« 上一篇 12-13
梦里会有一首诗,它很长,也很慢
下一篇 » 12-17

发表评论

已有 13 条评论

  1. guodxLv.1 说道:

    好像三级目录会有问题

    1. 不暇VLv.6 说道:

      这个教程只支持到二级目录,三级的话可能要另想办法

  2. 暗忆Lv.1 说道:

    dalao,分类都显示了,但是它没有折叠,还有这个分类排序能不能是横向的?

    1. 不暇VLv.6 说道:

      折叠和张开效果是要js和css配合的,不是php输出就可以搞定。至于横向,也是通过css样式搞定啊。

      1. 暗忆Lv.1 说道:

        我能说不知道js和css怎么写吗

        1. 不暇VLv.6 说道:

          那就尴尬咯,毕竟每个模板都可能是有所不同的css全局样式,所以这个效果也基本没有通用的解决方案。

  3. 柳泊风Lv.1 说道:

    搞不懂搞不懂 折腾的折叠打开效果有了 但是点击却是所有的折叠都打开关闭

    1. 不暇VLv.6 说道:

      这个肯定是需要js和css的配合进行处理的啊。

      1. 柳泊风Lv.1 说道:

        配合了搞不定搞不定~~~

  4. 沐北Lv.1 说道:

    路过

  5. qLv.1 说道:

    这个好

  6. 蓝卡Lv.1 说道:

    学习了

    1. 不暇VLv.6 说道:

      能帮到你我也很高兴

作者信息

热门文章

标签TAG

热评文章