typecho 给文章创建目录树

最新推荐文章于 2024-08-25 07:58:50 发布

ymz316

最新推荐文章于 2024-08-25 07:58:50 发布

阅读量803

点赞数 8

分类专栏：前端文章标签： typecho 博客 css php

本文链接：https://blog.csdn.net/ymz641/article/details/136280793

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

受益于 shortcode 短代码插件和泽泽短代码中目录树的显示样式，形成了自己实现添加文章目录的思路：

一、文章目录树的结构

<div id="toc">
    <div class="toc-left">
        <div class="toc-btn" type="button" onclick="changetoc()">></div>
    </div>
    <div class="TOC">目录树区域</div>
</div>

上面用到点击显示目录树的js代码为:

// 推拉toc
function changetoc() {
  var e = document.getElementById("toc");
  if (e.classList.contains("tocwidth")) {
    e.classList.remove("tocwidth");
  } else {
    e.classList.add("tocwidth");
  }
}

二、给文章目录树创建CSS样式

/* -----------------------------------
## 目录树 
------------------------------------*/
#toc {
  --toc-width: 260px;
  position: fixed;
  top: 0;
  /* right: 0px; */
  right: calc(-1 * var(--toc-width));
  height: 100vh;
  width: var(--toc-width);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  z-index: 5;
  transition: 0.5s;
  -webkit-transition: 0.5s; /* Safari */
}
.tocwidth {
  right: 0px !important;
}

.toc-left {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  margin-left: -25px;
  margin-right: -25px;
  z-index: 6;
}
.toc-left .toc-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bd-main);
  cursor: pointer;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.15);
}

.toc {
  display: flex;
  flex-wrap: nowrap;
  height: auto;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bd-main);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.15);
}

.toc > span {
  background-color: var(--bd-main);/*自定义背景色*/
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  font-size: larger;
  font-weight: bolder;
  text-align: left;
  padding: 10px;
  margin-bottom: 2px;
  margin-left: 20px;
}

.toc ol {
  list-style-type: none;
  margin-left: 20px;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.toc ol li {
  flex: 0 0 auto;
  width: 100%;
  padding-left: 0px;
}

.toc ol ol {
  padding-left: 5px;
}

.toc li li {
  padding-left: 5px;
}

.toc ol li a {
  display: block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.toc ol li a:hover {
  background-color: var(--bd-main);
  color: white;
}

三、在 function.php 中建立目录树实现函数


//生成目录树
function toc($content)
{
    $html = '';
    $dom =  new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML('<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><body>' . $content . '</body>');
    libxml_use_internal_errors(false);
    $xpath = new DOMXPath($dom);
    $objs = $xpath->query('//h1|//h2|//h3|//h4|//h5|//h6');
    if ($objs->length) {
        $arr = [];
        $html = '<div class="toc"><span>目录</span>';
        foreach ($objs as $n => $obj) {
            $obj->setAttribute('id', 'TOC' . $n);
            handleToc($obj, $n, $arr, $html);
        }
        foreach ($arr as $n)
            $html .= '</li></ol>';
        $html .= '</div>';
        $html = '<div id="toc"><div class="toc-left"><div class="toc-btn" type="button" οnclick="changetoc()">></div></div>' . $html .'</div>';
    }
    return $html;
}

//处理目录树
function handleToc($obj, $n, &$arr, &$html)
{
    $i = str_replace('h', '', $obj->tagName);
    $j = end($arr);
    if ($i > $j) {
        $arr[] = $i;
        $html .= '<ol>';
    } else if ($i == $j)
        $html .= '</li>';
    else if (in_array($i, $arr)) {
        $html .= '</li></ol>';
        array_pop($arr);
        handleToc($obj, $n, $arr, $html);
        return;
    } else {
        $arr = [$i];
        $html .= '</li>';
    }
    $html .= '<li><a href="#TOC' . $n . '">' . $obj->textContent . '</a>';
}

四、在 post.php 中调用目录树函数

<!-- 输出文章目录 -->
<?php echo toc($this->content); ?>

五、大功告成，体验效果如下

在这里插入图片描述