B2主题中用代码做个悬浮目录

第一步

您可以使用以下步骤在B2主题中创建一个悬浮目录：

1. 在主题文件夹中创建一个新的JavaScript文件，例如“floating-menu.js”。
2. 在该文件中编写以下代码：

3. jQuery(document).ready(function($) {
     // 创建目录
     var toc = '';
     var level = 0;
     var maxLevel = 3;
     $('#content').find('h1, h2, h3, h4, h5, h6').each(function() {
       // 获取标题级别
       level = parseInt(this.tagName.substring(1));
       // 如果标题级别小于最大级别，则添加到目录中
       if (level <= maxLevel) {
         // 添加锚点
         $(this).attr('id', 'heading-' + level + '-' + $(this).index());
         // 添加目录项
         toc += '<li class="toc-level-' + level + '"><a href="#heading-' + level + '-' + $(this).index() + '">' + $(this).text() + '</a></li>';
       }
     });
     // 如果目录不为空，则创建悬浮目录
     if (toc !== '') {
       var tocHtml = '<ul class="toc">' + toc + '</ul>';
       $('body').append('<div id="floating-menu">' + tocHtml + '</div>');
       // 设置目录项的样式
       $('#floating-menu .toc li').each(function() {
         $(this).css('margin-left', (parseInt($(this).attr('class').substring(10)) - 1) * 20 + 'px');
       });
       // 监听窗口滚动事件
       $(window).scroll(function() {
         // 如果滚动距离大于目录位置，则显示悬浮目录
         if ($(window).scrollTop() > $('#floating-menu').offset().top) {
           $('#floating-menu').addClass('floating');
         } else {
           $('#floating-menu').removeClass('floating');
         }
         // 更新当前目录项的样式
         $('#floating-menu .toc li').removeClass('current');
         $('#content').find('h1, h2, h3, h4, h5, h6').each(function() {
           // 获取标题级别
           level = parseInt(this.tagName.substring(1));
           // 如果标题级别小于最大级别，则更新当前目录项的样式
           if (level <= maxLevel && $(window).scrollTop() >= $(this).offset().top - 20) {
             $('#floating-menu .toc li').removeClass('current');
             $('#floating-menu .toc li:nth-child(' + ($(this).index() + 1) + ')').addClass('current');
           }
         });
       });
     }
   });
   

4. 第二步

   
   在主题的“functions.php”文件中添加以下代码，将JavaScript文件添加到主题中：

5. function b2_enqueue_scripts() {
     wp_enqueue_script('floating-menu', get_template_directory_uri() . '/floating-menu.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'b2_enqueue_scripts');
   

6. 在主题的“style.css”文件中添加以下代码，定义悬浮目录的样式：

7. #floating-menu {
     position: fixed;
     top: 50%;
     left: 20px;
     transform: translateY(-50%);
     z-index: 9999;
   }
   #floating-menu.floating {
     top: 20px;
   }
   #floating-menu .toc {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   #floating-menu .toc li {
     margin-bottom: 5px;
     transition: all 0.2s ease;
   }
   #floating-menu .toc li.current {
     font-weight: bold;
   }
   

8. 第三步

   保存文件并刷新网站，您应该可以看到一个悬浮目录出现在页面的左侧。当您滚动页面时，目录将保持固定位置并更新当前目录项的样式。