wordpress自动生成文章目录

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

① 进入网站后台;

② 点击外观 → 小工具;

③ 文章边栏添加自定义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样式,就从主题加,如果主题加不了,就从外观 → 自定义 → 额外css样式加如下代码:

.entry .entry-content code, .entry .entry-content kbd {
    color: #e96900;
    font-size: 13px;
}

.wp-block-wpcom-accordion .panel-heading .panel-title a{
	font-weight: 600;
	font-size: 16px;
}

.wp-block-wpcom-acco.panel.panel-default {
	border: 1px solid #d2d2d2;
	padding: 0px 10px 0px 10px;
	border-radius: 3px;
	margin-bottom: 3px;
}

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; /* 文章左侧分页样式结束 */
}

/* 网站目录样式开始 */
#toc {
      max-height: 570px;
      overflow-y: auto;
	  border: 1px solid hsla(var(--theme-color-hsl), .2);
      border-radius: var(--theme-border-radius-s);
}

#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;
    background-color: #edd5ba;
}

div#toc::-webkit-scrollbar {
    display: none;
}

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

#toc .level-4 {
    padding-left: 45px; /* h4 的缩进 */
	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;
}
/* 网站目录样式 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 */

本样式符合本主题,自己也可以随意修改。

原创文章,作者:霍欣标,如若转载,请注明出处:https://www.bigengwu.cn/shu/63.html

霍欣标的头像霍欣标
上一篇 2024-07-02
下一篇 2024-07-02

相关推荐

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com