Wagtail 教程 4：自动生成文章右侧TOC导航

最新推荐文章于 2025-06-02 09:00:28 发布

慢读慢写

最新推荐文章于 2025-06-02 09:00:28 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：教程文章标签： wagtail django python TOC

本文链接：https://blog.youkuaiyun.com/ibmall/article/details/86351893

Wagtail 教程系列 记录了基于 Wagtail 搭建博客站点的整个过程，博客站点 所呈现的即是搭建过程的最新效果。

更多 Wagtail 内容：https://slowread.cn/wagtail-tutorials

自动生成文章右侧TOC导航

此部分属于通用内容，非 Wagtail 必需内容，是为了完善/优化基于 Wagtail 搭建的博客。

说明

需要在文章页面中创建一对 DIV 标签，涵盖范围为需要自动生成TOC导航的文章内容部分，ID 为 JS 脚本中设定的名字 sowread_post_body。
JS 脚本自动查找第一个标题级别，只显示两级目录。

CSS


/* TOC 导航 */

#TOCbar{
   
   
    text-align:left; position:fixed; width: auto; color:#2F7CFF;
    height: auto; top:4em; right:0; margin: 0.25em /*离页面顶部与右侧的距离*/
}
#TOCbarTab{
   
   
    float:left; width: 2.5em; border:1px solid #e5e5e5; border-right:none;
    text-align:center; background:#ffffff;
}
#TOCbarContents{
   
   
    float:left; overflow:auto; overflow-x:hidden; padding: 0.5em; color:#2F7CFF;
    width:18em; min-height:6em; max-height:50em;
    border:1px solid #e5e5e5; border-right:none; background:#ffffff;
}
#TOCbarContents dl{
   
    margin:0; padding:0; }
#TOCbarContents dt{
   
    margin-left: 0;}
#TOCbarContents dd{
   
    padding-left: 1.5em; margin-bottom: 0;}
#TOCbarContents dd, dt {
   
    cursor: pointer; }
#TOCbarContents dd:hover, dt:hover {
   
    color:#ffffff;background:#2F7CFF;}

/* TOC 导航 */

JavaScript


// 自动生成 TOC 导航

var BlogDirectory = {
   
   
  /*
      获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
  */
  getElementPosition:function (ele) {
   
   
      var topPosition = 0;
      var leftPosition = 0;
      while (ele){
   
   
          topPosition += ele.offsetTop;
          leftPosition += ele.offsetLeft;
          ele = ele.offsetParent;
      }
      return {
   
   top:topPosition, left:leftPosi