confluence文档添加右侧浮动导航

最新推荐文章于 2023-02-21 14:23:27 发布

H_MZ

最新推荐文章于 2023-02-21 14:23:27 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sixloop/p/confluence_toc.html

本文介绍如何在Confluence中实现右侧浮动目录，通过简单的代码修改，让TOC目录从固定位置变为右侧可滚动显示，增强文档浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

confluence文档添加右侧浮动导航

confluence默认toc目录是插入到文档的固定位置的，很不方便。
所以我们通过几行代码让它能够右侧浮动显示。

首先需要插入目录宏，
然后插入html宏，在里面添加如下内容：

<div id='my_toc' style="border:1px solid black;width: 350px;height:600px; overflow:auto; position: fixed; bottom: 20px;right: 25px; z-index: 100; background:url(http://sandbox.runjs.cn/uploads/rs/424/omg6xh6h/o_body_bg_new.jpg);"> </div>

<!-- <input type='button' id="btn1" value='把div1内容插入到div2' onclick='mv_div()'/> -->
  <div style="border:1px solid black;width: 70px;height:30px;  position: fixed; bottom: 20px;right: 25px; z-index: 110; text-align:center;line-height:30px; background-color:white;"  onclick="toggle_toc()">
隐藏/显示
 </div>
<script>
function mv_div(){
    var html = $('.toc-macro');
    $('#my_toc').append(html);
};
$(mv_div)


function toggle_toc(){
  if($("#my_toc").is(":hidden")){
       $("#my_toc").show();    //如果元素为隐藏,则将它显现
  }else{
      $("#my_toc").hide();     //如果元素为显现,则将其隐藏
  }
}
</script>

保存，ok。

转载于:https://www.cnblogs.com/sixloop/p/confluence_toc.html