前言

最近发现主题的目录树很多地方不是很满意，一方面是自己对于php的知识不是很好，大部分都是从网上分析的代码中拿取cv一下就用了，加上重构主题是一个比较大的工程，所以有些地方都是奔着先跑起来再说的思路。

像极了项目开发时的场景，先上线再说，用户量大了我们再优化！

昨晚我看了下typecho的目录树，都使用了一个全局变量：

global $catalog;

$catalog是一个扁平化的数组，里面存放着按顺序提取的页面h1-h6标题数据，由于php的数组可视化巨难看，我们先通过ts的方式去了解和实现这个处理。

教程

此处内容已隐藏回复后方可阅读。

效果图

这是一个我自己实现的效果，还是很不错的，有兴趣的可以自己研究更多玩法。

分类： Typecho博客教程 标签： typecho目录树
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

全部评论 27

  1. bambooo
    bambooo
    Google Chrome Windows 10
    学习学习学习
    回复
    1. 鼠子
      鼠子
      Google Chrome Windows 10
      @bambooo学习一下！
      回复
  2. 学生的
    学生的
    Google Chrome Windows 10
    大大大大撒大撒
    回复
  3. qwqmoxi
    qwqmoxi
    Google Chrome Windows 10
    网上大部分内容都是互相抄出来的，而且很多要用jq的，麻烦
    回复
  4. skyone
    skyone
    Google Chrome Windows 10
    学习一下。
    回复
  5. 小A
    小A
    Google Chrome Windows 10
    最近也想给自己的加个目录树，试了好些个还有自己写的也试了，最后还是选择了outline.js库来实现
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @小A纯前端时间没有seo
      回复
  6. 苏顾.
    苏顾.
    Google Chrome Windows 10
    学习学习.....
    回复
  7. test
    test
    Google Chrome Android
    希望下一个版本能够直接在控制台中便捷的修改fanvion图标和heard图标地址[爱心]
    回复
  8. kirari
    kirari
    Google Chrome Windows 10
    围观一下啊
    回复
  9. jungle
    jungle
    FireFox Windows 7
    学习、学习。
    回复
  10. yj
    yj
    Google Chrome Windows 10
    看看大佬们的操作
    回复
  1. 1
  2. 2
  3. 3

相关推荐

Typecho 使用highlight.js代码高亮如何实现代码行号

木灵鱼儿 3061 9 20
typecho 代码高亮 highlight.js

Typecho掘金编辑器《Typecho_Plugin_JJEditor》

木灵鱼儿 3029 1 11
插件 编辑器 typecho

开源主题-高仿掘金《JJ》V2.0

木灵鱼儿 50399 551 133
typecho 开源 博客主题

typecho 自定义分类和分类高亮处理

木灵鱼儿 4374 0 17
主题 typecho 分类

利用typescript实现原生css变量的主题切换功能类

木灵鱼儿 1521 0 0
typecho TypeScript 主题切换

typecho主题开发：基于webpack5的多页面打包项目

木灵鱼儿 3320 0 6
typecho 主题开发 webpack5

让typecho支持特殊字符

木灵鱼儿 1551 0 0
typecho 特殊字符 emoji

typecho 真的很简单的自定义评论列表

木灵鱼儿 45982 0 99
typecho 评论 自定义评论

Lay 响应式Typecho博客主题 V1.1.2

木灵鱼儿 15393 0 8
主题 typecho 博客主题

typecho 超完美上一篇下一篇文章加文章缩略图

木灵鱼儿 48115 0 88
typecho 上一篇 下一篇
获得点赞 100
文章被阅读 6,783
最后更新 23-06-04 0:06:46

目录

目录