什么颜色做网站显的大气网站开发流程分为哪三个阶段
1、进入后台文章编辑页面，将需要生成目录的标题改为h2
2、进入文章详情页elementor编辑页，在文章详情上新增一个html容器，放入以下内容
<!-- 进度条容器 -->
<div id="progress-container"><div id="progress-bar"></div>
</div><!-- 目录容器 -->
<div id="toc-container"><h2>目录</h2><ul id="toc-list"></ul>
</div><script>// 自动生成目录document.addEventListener('DOMContentLoaded', function() {const tocContainer = document.getElementById('toc-container');const tocList = document.getElementById('toc-list');// 获取页面上所有的 h2 标签const headings = document.querySelectorAll('.elementor-widget-theme-post-content h2');// 遍历 h2 标签并创建目录项headings.forEach((heading, index) => {// 获取标题文本和ID（如果没有ID则使用默认的ID）const title = heading.textContent || heading.innerText;const id = heading.id || `heading-${index}`;// 如果没有 id，则生成一个if (!heading.id) {heading.id = id;}// 创建目录列表项const listItem = document.createElement('li');const link = document.createElement('a');link.href = `#${id}`;link.textContent = title;// 把链接添加到列表项中listItem.appendChild(link);tocList.appendChild(listItem);});// 给目录链接添加点击事件，实现页面滚动tocList.addEventListener('click', function(event) {if (event.target.tagName === 'A') {const targetId = event.target.getAttribute('href').substring(1);const targetElement = document.getElementById(targetId);if (targetElement) {window.scrollTo({top: targetElement.offsetTop - 10, // 适当调整偏移量behavior: 'smooth' // 平滑滚动});event.preventDefault(); // 防止跳转}}});});// 进度条逻辑const progressBar = document.getElementById('progress-bar');window.addEventListener('scroll', function() {const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;const windowHeight = window.innerHeight || document.documentElement.clientHeight;const scrollProgress = (scrollTop / (documentHeight - windowHeight)) * 100;progressBar.style.width = `${scrollProgress}%`;});
</script><style>/* 进度条容器 */#progress-container {position: fixed; top: 0;left: 0;width: 100%;height: 5px;background-color: #f3f3f3;z-index: 9999; }/* 进度条 */#progress-bar {height: 100%;width: 0%; background-color: #4caf50;transition: width 0.2s ease; }/* 目录样式 */#toc-container {margin-top: 30px;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;width: 100%;}#toc-container h2 {font-size: 18px;margin-bottom: 10px;}#toc-list {list-style: none;padding: 0;}#toc-list li {margin-bottom: 8px;}#toc-list a {text-decoration: none;color: #333;}#toc-list a:hover {color: #0066cc;}
</style>
3、保存发布，查看前台效果。
4、有些页面可能定位不准确，可以修改代码中的51行偏移量进行调整
5、也可以修改生成目录的标签， 改为h3或者h4等，视情况调整。