Confluence 文章增加水印功能

如上。confluence是一個非常不錯的企業內部文檔管理分享工具。但是目前文章區域找不到添加水印的插件。

網上了解，confluence可以自定義頁面外觀，且使用的是Velocity語言進行開發。

通過confluence空間管理-外觀，可以對任意頁面的樣式進行修改。

例如我這裏需要對文章區域進行水印添加，選擇

點擊自定義按鈕進行編輯：

找到這個頁面位置，在下方插入下面的代碼：

       <div id="main-content" class="wiki-content">
           $body
       </div>
       <script>
       //在下面增加頁面水印
       function addWaterMarker(str){
          var can = document.createElement('canvas');
          var body = document.getElementById('main-content');

          body.appendChild(can);

         can.width=250;
         can.height=280;
         can.style.display='none';
         var cans = can.getContext('2d');
         cans.rotate(-20*Math.PI/180);
         cans.font = "16px Microsoft JhengHei"; 
         cans.fillStyle = "rgba(17, 17, 17, 0.20)";
         cans.textAlign = 'left'; 
         cans.textBaseline = 'Middle';
         //繪製兩行文字
         cans.fillText(str, can.width/3-40, can.height/2,200);
         cans.fillText("版權所有，請勿外傳", can.width/3-40, can.height/2+40,200);
         body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
       }
       //右鍵點擊事件
       function click(){
          if(event.button==2){
　　        alert("版權所有，請勿外傳");
               return false;
　　      }
　　    }
       //不允許點擊右鍵
　　    document.oncontextmenu =click
       </script>
      
      #if($spaceKey)
　    <script>
        //頁面水印中添加空間分組的key和用戶全名
　　     addWaterMarker('$!spaceKey'+"-"+"$!action.remoteUser.fullName")
　    </script>

實現的效果如下圖：

目前的方法其實就是等於通過canvas繪製一張背景圖，然後給整個文章區域添加這張背景圖，高度可定製。

當然，這個只是防君子不防小人，程序員想將內容拷貝出來的方法有好多。最好這裏可以加上一個頁面重繪的解決方法，當用戶取消了背景圖時自動再加上，但是我覺得應該用處不大。