Confluence浮动导航目录

Confluence 页面添加浮动导航目录

添加自定义用户宏

一、设置 > 一般配置 > 用户宏 > 创建用户宏

1、填写用户宏名称（用户宏名称只能包含以下字符: a-z, 0-9 以及 -）
2、填写用户宏标题
3、选择用户宏目录
4、填写用户宏模板代码

5、完成后点击保存

二、用户宏模板添加一下代码：
代码github：
https://github.com/Poil/confluence-usermacro/blob/master/toc-righ

## Macro title: toc-right
 ## Macro has a body:  N
 ##
 ## Developed by: Benjamin DUPUIS
 ## Date created: 05/08/2011
 ## Date Updated: 30/11/2016
 ## Installed by: Benjamin DUPUIS
 ## @param Maxlvl:title=MaxLvl|type=int|required=true|desc=Max Level|default=5
 ## @param Float:title=Float|type=boolean|required=true|desc=Float/Fixed Position|default=true
 ## @param Hidable:title=Hidable|type=boolean|required=true|desc=Hidable (Float menu only)|default=true
#set($globalHelper=$action.getHelper())
#if ($content.id == $globalHelper.getPage().id)

#if (!$paramMaxlvl)
  #set ($paramMaxlvl=5)
#end

#set($mytoc=$globalHelper.renderConfluenceMacro("{toc:maxLevel=$paramMaxlvl}"))

#if ($paramFloat == true)
  #if ($paramHidable == true)
    <div id="show_customtoc" style="right:15px; top:100px; position:fixed; z-index:99; margin-left:8px; padding:10px; background:#ae0015; border-radius: 3px; writing-mode: vertical-lr; display: none">
      <a style="color:white; cursor:pointer" onclick="jQuery('#customtoc').toggle(true); jQuery('#show_customtoc').toggle(false)">显 示 目 录</a>
    </div>
  #end
<div id="customtoc" style="right:25px; top:100px; position:fixed; max-height: 80%; z-index:99; overflow: auto; margin-left:8px;background:white">
#else
  #if ($paramHidable == true)
    <div id="show_customtoc" style="float:right; margin-left:8px; padding:10px; background:#ae0015; border-radius: 3px; writing-mode: vertical-lr; display: none">
      <a style="color:white; cursor:pointer" onclick="jQuery('#customtoc').toggle(true); jQuery('#show_customtoc').toggle(false)">显 示 目 录</a>
    </div>
  #end
<div id="customtoc" style="float:right; margin-left:8px;background:white">
#end
  <table>
    <thead>
      <tr>
       <th style="text-align:center;">目 录
#if ($paramHidable == true)
           <a style="margin: -5px; padding: 0; float: right; font-weight:bold; font-size:2em; line-height: 1em" onclick="jQuery('#customtoc').toggle(false); jQuery('#show_customtoc').toggle(true)">×</a>
#end
       </th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>
           $mytoc
         </td>
      </tr>
    </tbody>
  </table>
</div>

#if ($paramHidable == true)
<script type="text/javascript">
     $(document).ready(function(){
        $("#customtoc a").click(function(event) {
          jQuery('#customtoc').toggle(false);
          jQuery('#show_customtoc').toggle(true);
        });
     });
#end
</script>
#end

在页面中添加导航目录

编辑文章时，插入其他宏，选择 浮动导航 即可。

导航栏展开效果：

导航栏折叠效果：