rails6 ダッシュボードテンプレート「Cleopatra」を適応させる

rails6 ダッシュボードテンプレート「Cleopatra」を適応させる

rails6ダッシュボードテンプレート「Cleopatra」を適応させるまでの手順を記述してます。Railsのバージョンは6.1.3を使用してます。

環境

  • OS CentOS Linux release 7.9.2009 (Core)
  • Ruby 3.0.0
  • Rails 6.1.3

Cleopatraテンプレート入手

github上にテンプレートは、あがっているのでこれを使用してます。

CSS・js適応

まずは、cssとjsから適応させていきます。「app/javascript/packs」配下に
「style.css」と「scripts.js」ファイルを配置します。

同じ階層にある、webpackのデフォルトのエントリーポイント「application.js」に以下を追加します。

次に「app/views/layouts」配下にある「application.html.erb」に以下のコードを追加します。

jsは、bodyダグの閉じタグの上に追加してます。

共通テンプレート作成

テンプレートをヘッダーとサイドで共通化しておきます。

まず「app/views/layouts」配下に「shared」ディレクトリを作成します。

次に、読み込むテンプレート「_header.html.erb」と「_side.html.erb」というファイルを作成します。
※ファイル名には必ず「_」が必要となります。

「_header.html.erb」を以下のように編集します。

「_side.html.erb」を以下のように編集します。

最後に「application.html.erb」を、以下のようにします。

画像アップ

画像を「assets/images」にアップしておきます。

確認

これで、全て適応したので、適当なページで確認してます。

テンプレートが適応されていることが書くにできます。