【Growi】左サイドバーにメニューを設置する方法

GROWIを構築しているのですが、左のサイドバーにメニューを追加することができません。
「create」と書かれていますが、何も設定することができないので、調べて設置することにしました。

↓↓↓「エンジニア」無料のおすすめ学習・開発環境の詳細↓↓↓

「GROWI」左サイドバーにメニュー・リンクを設置するスクリプト

GROWIの左サイドばーを編集するには、現時点では無い様です。
いろいろ調べると、「カスタムスクリプト」からスクリプトを書いて編集できることがわかりましたので、メモしておきます。

サイドバーを編集できるスクリプトの設定手順

「GROWI」右上にある「管理（ａｄｍｉｎ）」をクリックし、管理画面に切り替え、中央左のメニューから「カスタマイズ」を選択します。

「カスタマイズ」設定画面の一番下に「カスタムスクリプト」編集画面があります。
赤枠で囲まれたところにスクリプトを追記し、「更新」ボタンを押します。

左メニューを編集できるスクリプト

左サイドバーでメニュー表示するには以下のスクリプトを貼り付けるだけです。
今回は事前に作成したページのリンクを左サイドバーにメニュー表示させます。

参考にさせて頂いたスクリプトは以下となります。

参考URL
https://demo.growi.org/Sidebar

// sidebarのリンク
var links = [
  ["/user/menu/Network", "Network"],
  ["/user/menu/Server", "Server"],
  ["/user/menu/security", "Security"],
  ["/user/menu/仮想基盤", "仮想基盤"],
  ["/user/menu/storage", "strage"],
  ["/admin/customize", "(customize this)"],
]
/*
 sidebarにリンク作る
 */
var sidemenu = document.querySelector('#side-menu');
if (sidemenu) {
  var li = function(href, name){
    return '<li class="tbd"><a href="' + href + '">' + name + '</a></li>'
  }
  innerHTML = ""
  for (var i=0; i<links.length; i++){
    innerHTML += li(links[i][0], links[i][1])
  }
  sidemenu.innerHTML = innerHTML;
}

上記を貼り付けて「更新」をするだけで、左メニューにリンクが表示される様になります。
追加のメニューは「var links」配下で行を追加してリンクを貼り付けるだけとなります。

関連記事サーバーエンジニアへの構築手順書

2020.05.29

「Udemy」で無料でサーバーエンジニアの講座を受講

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ