題記の通り、AdminLTE3を.NET Coreのテンプレに上書きして、使えるようにしただけのお話。
似たような話はいろんな所で書かれているんだろうけど、メモ書き程度に残す。
ていうか残さないと忘れそう。まだまだ初心者だし。
て、さっさと結論を書くと、以下の手順に沿って実装。
- AdminLTE3ダウンロード
- AdminLTE3を配置
- ヘッダ書き換え
- スクリプト書き換え
- body書き換え
うん、いたって普通ですね････
ぶっちゃけスクリプトのパスさえ間違えなければ誰でもできるんだろうな････
というわけで、順に雑に説明していく。
1. AdminLTE3のダウンロード
Googleさんに聞いて、公式サイトからダウンロード。
2. AdminLTE3の配置
zipを解凍すると、いろんなフォルダが出現する。使うのは、以下2つ。
- dist
- plugins
この2つを配置する･･･
テンプレートの「wwwroot」の直下に「AdminLTE3」というフォルダを作成し、その下に「dist」と「plugins」をコピーする。
3. ヘッダの書き換え
解答したファイル群の中にある「starter.html」の中身をコピペしていく。
テンプレの
...を、まるまるAdminLTE3の...と置き換える。このとき、パスの記載を以下のように変えておく。
<!-- Font Awesome Icons --><linkrel="stylesheet"href="~/AdminLTE3/plugins/fontawesome-free/css/all.min.css"><!-- Theme style --><linkrel="stylesheet"href="~/AdminLTE3/css/adminlte.min.css">4.スクリプトの書き換え
「starter.html」の <!-- REQUIRED SCRIPTS --> のとこにある3つのスクリプトのパスをコピー。
テンプレートの ...のところを、まるまる以下に置き換える。
<!-- jQuery --><script src="~/AdminLTE3/plugins/jquery/jquery.min.js"></script><!-- Bootstrap 4 --><script src="~/AdminLTE3/plugins/bootstrap/js/bootstrap.bundle.min.js"></script><!-- AdminLTE App --><script src="~/AdminLTE3/js/adminlte.min.js"></script>5. bodyの置き換え
「starter.html」の
からまでをコピペして、テンプレートの
からの直前までを上書き。6.まとめ
この通りにやれば、bodyの最初は以下のような感じになるはず。
...(中略)
<!-- Font Awesome Icons --><linkrel="stylesheet"href="~/AdminLTE-3.0.2/plugins/fontawesome-free/css/all.min.css"><!-- Theme style --><linkrel="stylesheet"href="~/AdminLTE-3.0.2/css/adminlte.min.css"><!-- Google Font: Source Sans Pro --><linkhref="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"rel="stylesheet"></head><bodyclass="hold-transition sidebar-mini"><divclass="wrapper">
...(中略)
で、最後のほうがこんな感じ。
...
<p>Sidebar content</p></div></aside><partialname="_CookieConsentPartial"/><divclass="container body-content">
@RenderBody()
<hr/><footer><p>© 2019 - AzureWebTest</p></footer></div></div><!-- ./wrapper --><!-- jQuery --><script src="~/AdminLTE3/plugins/jquery/jquery.min.js"></script>
...
テンプレやらAdminLTE3の画像やらが微妙に残ったりしてて、デザインが崩れたりするので、そこらへんはテキトーにいじってなんとかすればOK･･･
とりあえずこうしたらスクリプトとかは無事動いたので、あとは自分の好みで画像変えたりなんだりして遊ぶ感じですねー。
とりあえずこれでいろいろとHTML5やJavaScriptのお勉強を進められそうだ･･･