jkjoy
/
farallon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

fix 目录样式

This commit is contained in:
浪子 2024-07-16 16:43:09 +08:00
parent 372828a290
commit a065f44da4
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
post.php
View File

@ -1,19 +1,12 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?> <?php $this->need('header.php'); ?>
<style> <style>
#toc ul li { #toc {font-size:14px;padding:10px 15px;background-color:var(--farallon-background-gray);border-radius:10px;margin-bottom:20px}
list-style-type: none; #toc summary{cursor:pointer}
margin-bottom: -5px; #toc toc-title{font-weight:600}
margin-top: -10px; #toc ul{padding-left:10px;margin-bottom:10px}
} #toc ul li::before{content:"·";margin-right:5px}
#toc ul { #toc ul li>ul{margin-left:10px;font-size:12px}
list-style-type: none;
margin-bottom: -5px;
margin-top: -10px;
}
#toc ul li a {
text-decoration: none;
}
</style> </style>
<main class="site--main"> <main class="site--main">
<article class="post--single"> <article class="post--single">
@ -168,11 +161,12 @@
</main> </main>
<script> <script>
document.addEventListener('DOMContentLoaded', (event) => { document.addEventListener('DOMContentLoaded', (event) => {
const targetClassElement = document.querySelector('.post--single__title');
const postContent = document.querySelector('.post--single__content'); const postContent = document.querySelector('.post--single__content');
if (!postContent) return; if (!postContent) return;
let found = false; let found = false;
for (let i = 1; i <= 6 && !found; i++) { for (let i = 1; i <= 6 &&!found; i++) {
if (postContent.querySelector(`h${i}`)) { if (postContent.querySelector(`h${i}`)) {
found = true; found = true;
} }
@ -184,17 +178,19 @@ document.addEventListener('DOMContentLoaded', (event) => {
toc.id = 'toc'; toc.id = 'toc';
toc.innerHTML = '<details class="toc" open><summary class="toc-title">目录</summary><nav id="TableOfContents"><ul></ul></nav></details>'; toc.innerHTML = '<details class="toc" open><summary class="toc-title">目录</summary><nav id="TableOfContents"><ul></ul></nav></details>';
// 插入到文章内容的开头 // 插入到指定 class 元素之后
postContent.insertBefore(toc, postContent.firstChild); if (targetClassElement) {
targetClassElement.parentNode.insertBefore(toc, targetClassElement.nextSibling);
}
let currentLevel = 0; let currentLevel = 0;
let currentList = toc.querySelector('ul'); let currentList = toc.querySelector('ul');
let levelCounts = [0]; // 初始化层级计数器 let levelCounts = [0];
heads.forEach((head, index) => { heads.forEach((head, index) => {
const level = parseInt(head.tagName.substring(1)); const level = parseInt(head.tagName.substring(1));
if (levelCounts[level] === undefined) { if (levelCounts[level] === undefined) {
levelCounts[level] = 1; // 初始化该层级计数 levelCounts[level] = 1;
} else { } else {
levelCounts[level]++; levelCounts[level]++;
} }
@ -212,7 +208,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
} }
currentList = newList; currentList = newList;
currentLevel++; currentLevel++;
levelCounts[currentLevel] = 1; // 初始化下一层级的计数器 levelCounts[currentLevel] = 1;
} }
while (level < currentLevel) { while (level < currentLevel) {
currentList = currentList.parentElement; currentList = currentList.parentElement;
@ -221,12 +217,12 @@ document.addEventListener('DOMContentLoaded', (event) => {
} }
currentLevel--; currentLevel--;
} }
const anchor = head.textContent.trim().replace(/\s+/g, '-'); // 使用标题内容生成锚链接 const anchor = head.textContent.trim().replace(/\s+/g, '-');
head.id = anchor; head.id = anchor;
const item = document.createElement('li'); const item = document.createElement('li');
const link = document.createElement('a'); const link = document.createElement('a');
link.href = `#${anchor}`; link.href = `#${anchor}`;
link.textContent = `${head.textContent}`; link.textContent = `${head.textContent}`;
link.style.textDecoration = 'none'; link.style.textDecoration = 'none';
item.appendChild(link); item.appendChild(link);
currentList.appendChild(item); currentList.appendChild(item);