投稿
  1. 欣标博客首页
  2. SEO

wordpress 自定义生成网站目录

• SEO

是的，JavaScript 可以自动生成标题锚点目录。为了自动生成目录，你需要确保页面中的每个标题元素（如 <h1>, <h2>, 等）都有一个唯一的 id。然后，你可以使用 JavaScript 遍历这些标题元素，为它们创建链接，并将这些链接组织成一个目录结构。

初始代码

以下是一个更完整的示例，展示如何使用 JavaScript 自动生成标题锚点目录：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>自动生成目录示例</title>  
<style>  
  #toc {  
    margin-bottom: 20px;  
  }  
  #toc ul {  
    list-style-type: none;  
    padding-left: 0;  
  }  
  #toc li {  
    position: relative;  
    padding-left: 20px; /* 基础缩进 */  
  }  
  #toc li::before {  
    content: "•"; /* 列表项前的标记 */  
    position: absolute;  
    left: 0;  
  }  
  /* 为不同级别的标题添加不同的缩进 */  
  #toc .level-1 {  
    padding-left: 0; /* h1 没有额外缩进 */  
  }  
  #toc .level-2 {  
    padding-left: 20px; /* h2 的缩进 */  
  }  
  #toc .level-3 {  
    padding-left: 40px; /* h3 的缩进，以此类推 */  
  }  
  /* 可以继续为 level-4, level-5, level-6 添加样式 */  
  /* 还可以调整链接的样式 */  
  #toc a {  
    text-decoration: none;  
  }  
</style>  
</head>  
<body>  
  
<div id="toc"></div> <!-- 目录容器 -->  
  
<h1 id="section1">标题 1</h1>  
<p>一些内容...</p>  
  
<h2 id="section1-1">标题 1.1</h2>  
<p>一些内容...</p>  
  
<h3 id="section1-1-1">标题 1.1.1</h3>  
<p>一些内容...</p>  
  
<h2 id="section1-2">标题 1.2</h2>  
<p>一些内容...</p>  
  
<h1 id="section2">标题 2</h1>  
<p>一些内容...</p>  
  
<script>  
// 获取目录容器元素  
const tocContainer = document.getElementById('toc');  
  
// 创建一个新的无序列表元素作为目录  
const tocList = document.createElement('ul');  
  
// 获取页面中的所有标题元素  
const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');  
  
// 遍历标题元素并创建目录项  
headers.forEach((header) => {  
  // 创建目录项  
  const tocItem = document.createElement('li');  
    
  // 根据标题级别添加不同的 class  
  const level = parseInt(header.tagName.slice(1), 10); // 获取标题级别（h1 为 1，h2 为 2，依此类推）  
  tocItem.className = `level-${level}`;  
    
  // 创建链接元素并设置其 href 和文本内容  
  const link = document.createElement('a');  
  link.href = `#${header.id}`;  
  link.textContent = header.textContent;  
    
  // 将链接添加到目录项中  
  tocItem.appendChild(link);  
    
  // 将目录项添加到目录中  
  tocList.appendChild(tocItem);  
});  
  
// 将目录添加到容器中  
tocContainer.appendChild(tocList);  
</script>  
  
</body>  
</html>

小工具代码

<div id="toc"></div> <!-- 目录容器 -->

<script>  
// 获取目录容器元素  
const tocContainer = document.getElementById('toc');  
  
// 创建一个新的无序列表元素作为目录  
const tocList = document.createElement('ul');  
  
// 获取页面中的所有标题元素  
const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');  
  
// 遍历标题元素并创建目录项  
headers.forEach((header) => {  
  // 创建目录项  
  const tocItem = document.createElement('li');  
    
  // 根据标题级别添加不同的 class  
  const level = parseInt(header.tagName.slice(1), 10); // 获取标题级别（h1 为 1，h2 为 2，依此类推）  
  tocItem.className = `level-${level}`;  
    
  // 创建链接元素并设置其 href 和文本内容  
  const link = document.createElement('a');  
  link.href = `#${header.id}`;  
  link.textContent = header.textContent;  
    
  // 将链接添加到目录项中  
  tocItem.appendChild(link);  
    
  // 将目录项添加到目录中  
  tocList.appendChild(tocItem);  
});  
  
// 将目录添加到容器中  
tocContainer.appendChild(tocList);  

</script> 

<script>
    // li元素的行块上并点击时，将会触发对应的链接
    document.addEventListener('DOMContentLoaded', function () {
        var listItems = document.querySelectorAll('li');
        listItems.forEach(function (listItem) {
            listItem.addEventListener('click', function () {
                var link = this.querySelector('a');
                if (link) {
                    window.location.href = link.href;
                }
            });
        });
    });
</script>

<script>
    // 获取所有<a>标签  
    var links = document.querySelectorAll('a[href="#"]');

    // 遍历这些链接  
    links.forEach(function (link) {
        // 检查href属性是否确实为#  
        if (link.getAttribute('href') === '#') {
            // 将href属性更改为javascript:;  
            link.setAttribute('href', 'javascript:;');
        }
    });
</script>

配套的css样式

/* 网站目录样式开始 */
#toc {
      max-height: 570px;
      overflow-y: auto;
      padding: 3px 3px 0px 3px;
}

#toc ul {
      list-style-type: none;
}

#toc li {
    position: relative;
    padding-left: 20px; /* 基础缩进 */
}

#toc li::before {
    position: absolute;
    left: -15px;
}

#toc .level-1 {
    padding-left: 5px; /* h1 的缩进 */
    display: none;
}

#toc .level-2 {
    margin-bottom: 3px;
    padding-left: 15px; /* h2 的缩进 */
    height: 30px;
    border-radius: 5px;
    background-color: #edd5ba;
}

#toc .level-3 {
    padding-left: 30px; /* h3 的缩进 */
    border-radius: 5px;
		height: 30px;
		margin-bottom: 3px;
}

#toc .level-4 {
    padding-left: 45px; /* h4 的缩进 */
    border-radius: 5px;
		height: 30px;
		margin-bottom: 3px;
}

#toc .level-3 a::before {
    background-color: var(--theme-color); /* 给目录描文本标题3添加小图标*/
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .15), transparent);
    border-radius: 3px;
    content: "";
    height: calc(100% - 15px);
    left: 17px;
    position: absolute;
    top: 7px;
    width: 3px;
}

#toc a {
    text-decoration: none; /* 还可以调整链接的样式 */
    color: black;
}

#toc li:hover {
		background-color: #364ACD; 
}

#toc li:hover a{
		color: white;
}

#toc ul li:nth-last-child(1) {
    display: none; /* 隐藏倒数第一个小li*/
}

#toc ul li:nth-last-child(2) {
    display: none;
}

#toc ul li:nth-last-child(3) {
    display: none;
}
/* 网站目录样式 end */

/* 目录目录滚动捕获 开始 */
.entry .entry-content .h2, .entry .entry-content h2 {
	scroll-margin-top: 70px;
}

.entry .entry-content>.h3, .entry .entry-content>h3 {
	scroll-margin-top: 70px;
}

.entry .entry-content h4, .entry .entry-content h5 {
	scroll-margin-top: 70px;
}
/* 目录滚动捕获 end */

添加章节html

<div id="section">
    <ul>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
        <li class="level-a"><a href="#">@</a></li>
    </ul>
</div>

添加章节样式

div#section {
    position: fixed; /* 文章左侧分页样式开始 */
    top: 149px;
    left: 2px;
    width: 136px;
    background-color: #304bd5;
    border-radius: 5px;
    border: 2px solid hsl(230.18deg 66.27% 51.18%);
}

#section ul {
    padding-left: 0em;
    margin: 0px 0px -2px 0px;
}

li.level-a {
    list-style-type: none;
    font-size: 14px;
    background-color: #ffffff;
    padding: 5px;
    margin-bottom: 2px !important;
    border-radius: 3px; 
}

li.level-a a {
    color: black; /* 文章左侧分页样式结束 */
}

原创文章，作者：鹤轩，如若转载，请注明出处：https://www.yijing21.cn/seo/246.html

1
上一篇 2024 年 5 月 17 日 18:19
下一篇 2023 年 12 月 2 日 23:35

相关推荐