シンプルなCMS「JS CMS」とは？特徴や基本的な使い方を解説

JS CMSをカスタマイズして使う方法

JS CMSでより詳細なカスタマイズを行いたい場合、ローカル開発環境で細かな調整を行ってから、サーバーにアップする方法が推奨されます。

ローカル開発環境を構築する方法と、カスタマイズの一例は以下の通りです。

ローカル開発環境の構築

PC上にローカル開発環境を構築すると、サーバー上にデータをアップすることなくJS CMSによるサイト制作ができます。また、ローカル開発環境で作成したデータは、サーバーにアップすることでインターネット上への公開が可能です。

ローカル開発環境を構築するためのソフトとして、Windowsでは「XAMPP」、Macでは「MAMP」などが挙げられます。

XAMPPを使用してローカル環境でJS CMSを編集する方法は次の通りです。

XAMPPの公式サイトからインストーラーをダウンロード

出典：XAMPP Installers and Downloads for Apache Friends

まずは、XAMPPの公式サイトからインストーラーをダウンロードしましょう。インストーラーを開き、メニュー画面の表示に従ってXAMPPをインストールしてください。

XAMPPの設定画面からサーバーを起動する

XAMPPが起動したら、設定画面の「Apache」と書かれた行にある「Start」ボタンを選択し、サーバーを起動しましょう。

サーバーの起動に成功していれば、ブラウザのアドレスバーに「localhost」と入力することで、XAMPPの画面が表示されます。

ローカル開発環境のディレクトリにJS CMSのデータを保存する

ローカル開発環境では、XAMPPをインストールしたフォルダにある「htdocs」というディレクトリに配置されたデータがページとして表示されます。

例えば、Cドライブの直下にXAMPPをインストールした場合、「Cドライブ/xampp/htdocs/」のディレクトリにJS CMSのデータを保存しましょう。

その後、ブラウザから「localhost/_cms/」のディレクトリを開くことで、JS CMSの管理画面にアクセスできます。管理画面の使用方法は、Webサーバー上にインストールした場合と同様です。

タグの編集によるカスタマイズ例

JS CMSの管理画面では、テキストや画像だけでなく、HTMLのコードも編集できます。JS CMSでは専用のタグを記述することで、表示内容のカスタマイズが可能です。

例えば、「default.html」というテンプレートは、「編集」ボタンを選択することで書き換えられます。

試しに、ページのコンテンツ部分にパンくずリストを表す「 {{PAGE_BREADLIST}} 」 というタグを記入し、保存したうえで公開してみましょう。

上記の編集を行うと、ページ内のコンテンツ上部にパンくずリストが表示されるようになります。

このように、管理画面からHTMLのコードを編集することで、必要な機能を追加できます。使用できるタグはほかにも数多く存在するため、詳しくはJS CMSの公式サイトを参照してください。

参考：JS CMS公式サイト