首页
微语
统计
友链
留言
memos
圈子
图床
推荐
相册
网站监控
VPS监控
Search
1
为Typecho添加webp解析
37,713 阅读
2
实现typecho微信时光机功能的图文教程
31,013 阅读
3
emlog数据成功迁移到typecho
18,675 阅读
4
typecho 时光机单页 typecho-whisper
13,312 阅读
5
湖南移动5G特惠流量月包5元5GB/10元10GB
11,220 阅读
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
排行榜    
登录
/
注册
Search
标签搜索
wordpress
发布
插件
免费
教程
typecho
EMlog
PHP
代码
CSS
华为
图片
代码修改
安装
评论
手机
诺基亚
微信
文章
智能
Chen'mo
累计撰写
1,265
篇文章
累计收到
367
条评论
首页
栏目
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
页面
微语
统计
友链
留言
memos
推荐
相册
网站监控
VPS监控
搜索到
1
篇与
的结果
2023-04-01
Joe主题文章添加文章目录树
前言去年写过一篇 Joe主题开启文章目录结构 ,最近感觉有点难看,而且默认是隐藏的,每次都得用鼠标点一下。网上找了其他的目录树方案教程,都很老了。设置了都没有效果。参考着别人的网站,折腾了一下午终于弄好了,特此记录下来。效果修改post.php加载js和css<!--加在头部--> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/jfloor.min.css'); ?>"> <!-- body标签 最下面 --> <?php if ($this->options->jfloor === 'on') : ?> <!-- 目录树 --> <script src="<?php $this->options->themeUrl('assets/js/jfloor.min.js'); ?>"></script> <?php endif; ?>加载功能代码,大概41行 <div class="joe_container j-post"> <section class="j-adaption" style="height: auto !important;"> <?php if ($this->options->jfloor === 'on') : ?> <?php GetCatalog(); ?> <?php endif; ?> ... </div>functions.php后台功能开关 //开启文章目录树显示 $jfloor = new Typecho_Widget_Helper_Form_Element_Select( 'jfloor', array( 'off' => '关闭(默认)', 'on' => '开启', ), 'off', '是否启用文章目录树显示', '介绍:开启之后 在文章最左侧显示目录树(手机端不显示)' ); $jfloor->setAttribute('class', 'joe_content joe_post'); $form->addInput($jfloor->multiMode());core/function.php目录树函数,放在文件最后/*生成文章目录树*/ function CreateCatalog($obj) { global $catalog; global $catalog_count; $catalog = array(); $catalog_count = 0; $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function ($obj) { global $catalog; global $catalog_count; $catalog_count++; $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count); return '<h' . $obj[1] . $obj[2] . ' id="cl-' . $catalog_count . '"><span>' . $obj[3] . '</span></h' . $obj[1] . '>'; }, $obj); return $obj; } /*获取文章目录树*/ function GetCatalog() { global $catalog; $index = ''; if ($catalog) { $index = '<ul>'; $prev_depth = ''; $to_depth = 0; foreach ($catalog as $catalog_item) { $catalog_depth = $catalog_item['depth']; if ($prev_depth) { if ($catalog_depth == $prev_depth) { $index .= '</li>'; } elseif ($catalog_depth > $prev_depth) { $to_depth++; $index .= '<ul>'; } else { $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth; if ($to_depth2) { for ($i = 0; $i < $to_depth2; $i++) { $index .= '</li></ul>'; $to_depth--; } } $index .= '</li>'; } } $index .= '<li><a href="#cl-' . $catalog_item['count'] . '" data-href="#cl-' . $catalog_item['count'] . '">' . $catalog_item['text'] . '</a>'; $prev_depth = $catalog_item['depth']; } for ($i = 0; $i <= $to_depth; $i++) { $index .= '</li></ul>'; } $index = '<div class="j-floor s-j-floor"><div class="contain" id="jFloor" style="top: 126px;"><div class="title">文章目录</div>' . $index . '<svg class="toc-marker" xmlns="http://www.w3.org/2000/svg"><path stroke="var(--theme)" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" /></svg></div></div>'; } echo $index; }core/core.php文章页面相应位置(初始化函数themeInit)加载,大约第83行 /* 文章目录树 */ if ($self->is('single')) { $self->content = CreateCatalog($self->content); }需要的资源文件jfloor.min.css //样式jfloor.min.js //功能实现下载{cloud title="JOE文章目录树" type="bd" url="https://pan.baidu.com/s/1o83oneH3WumzrmtUVdQM7w" password="w4ut"/}本站备份下载[attach]1405[/attach]
2023年04月01日
7,993 阅读
3 评论
0 点赞