confluenceの古い記事をQiitaっぽく、〜年以上経過しています、とヘッダに表示する方法

はじめに

Confluenceはドキュメント管理ツールとしては結構書きやすいのですが、問題点がいくつかあります。

• 検索がし辛い（検索機能がひどすぎる・記事が全然HITせん）
• 古い記事がわかりにくい

ので、これらをQiitaの記事みたいに、〜年以上経過しています、みたいに表示した方法について書きます。

ちなみに、表示したいのはこんなやつです。
Qiitaでよく見るやつですね。

方法

色々検索したらこちらに情報が載っていました。

ただ、前もって権限が必要だったので、うちの会社の情シス系の人に手伝ってもらいました。

以下のことをやる必要がありますが、これらはすべて
Confluenceのグローバル管理者である必要があります。

• CSSをカスタマイズする
• ルックアンドフィールのコンテンツレイアウトを変更する

記事の内容は少し古かったので、適用してみたところ正常に出てきませんでした。
ので、パーソナルスペースで色々試した結果が、こちらです。

コンテンツレイアウトの修正

<script type="text/javascript">

    AJS.toInit(function(){
        diff = getDiff();
		console.log("diff = " + diff);
        if (diff >= 1095) {
            AJS.$('div.page-metadata').append('<div class="alert alert-warning"><i class="aui-icon aui-icon-small aui-iconfont-time"></i>最終更新日から3年以上経過しています /  This page has not been updated in over 3 year.</div>');
        } 
     });    

function getDiff() {
		 last_modified = AJS.$('a.last-modified:first');
	    updated_at = last_modified[0].innerHTML;
      today = new Date();
        msDiff = today.getTime() - new Date(updated_at).getTime();
		console.log("msDiff = " + msDiff);
        daysDiff = Math.floor(msDiff / (1000 * 60 * 60 * 24));
		console.log("daysDiff = " + daysDiff);
        return ++daysDiff;
    }
</script>

数値はわりかし適当です。調整してください。
どっかの記事を参考にしたような気もします・・。記憶がおぼろげです。

とにかく、これによって判定ができるようになりました。

CSSの修正

CSSの修正を入れないと、パネルの色が表示されないので、適用します。

/* --- 更新状況Message -- */
#content > div.page-metadata > div.alert {
    padding: 10px;
    padding-left: 12px;
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}
 
#content > div.page-metadata > div.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
 
#content > div.page-metadata > div.alert-warning > i { 
   right: 5px; 
   color: #8a6d3b; 
} 
 
div.alert-warning > div.message-content { 
   color: #8a6d3b; 
} 
 
#content > div.page-metadata > div.alert-success {
    background: #f3f9f4;
    border-color: #91c89c;
    color: #333;
}
#content > div.page-metadata > div.alert-success > i { 
   right: 5px; 
   color: #2D7273; 
}

で、これらを適用すると以下のような見た目になります。

うん、良し！

気になる方は、是非、やってみてください。

ところで、英語、3 yearsな気がする。今見て思ったけど。権限ないから、スルーしておくか・・。