kavlan html bootstrap

Kavlan - Bootstrap 5 HTML レスポンシブ管理テンプレート

概要

Kavlan は、管理システムの操作と保守を容易にする、完璧なダーク管理パネル テンプレートです。 Kavlan は、クリーンで応答性が高く、使いやすい、優れたインターフェイスの作成に役立つユーザー エクスペリエンスを提供します。そして何より、無料です！

デモを見る | ZIPをダウンロード

目次

• 要件

• クイックスタート

• テンプレートページ

• デモリンク

• テンプレートの主な機能

• テンプレートファイルの構造

• ハンドルバー

• テンプレートの JSON データ

• テンプレートのスタイルをカスタマイズする

• 新しいページを作成する

• ブートストラップのドキュメント

• クレジット

• お問い合わせ

要件

テンプレートのソース コードを使用する予定がない場合 (つまり、テンプレートのソース コードをコンパイルしたり、Webpack 開発サーバーを実行したりする予定がない場合)、何もインストールする必要はありません。 dist フォルダーに移動するだけで、ファイルの編集を開始できます。

ほとんどの開発者はソース コードを編集し、Webpack を実行してテンプレート ファイルを再コンパイルします。その場合は、Node.js がインストールされていることを確認してください。ここからダウンロードできます

クイックスタート

• 最新リリースをダウンロードするか、リポジトリのクローンを作成します: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git

• システムに Node.js がまだない場合は、インストールします。

• コマンドラインでプロジェクトのルートを開きます。

• コマンドラインでnpm install実行します。

• npm start実行して Webpack devserver を起動します。

• テンプレート ファイル (dist フォルダーに出力される) を再コンパイルする場合は、 npm run buildを実行します。

テンプレートページ

テンプレートは 6 ページで構成されています。

• ダッシュボード

• ログインページ

• 登録ページ

• パスワードを忘れた場合のページ

• 404ページ

• 空白のページ

コードの繰り返しを最小限に抑えるために、テンプレート エンジンとパーシャルとして Handlebars.js を使用して、同じコードを異なるページにすばやく追加しました。また、JSON データには Handlebars プラグインを使用します。これにより、ループを使用して、同じ HTML を繰り返す代わりに単一の HTML コード ブロックを出力できます。

デモリンク

デモURL

これは HTML テンプレートのみであることに注意してください。データベースには接続せず、コンテンツ管理システム (Wordpress など) では自動的に動作しません。私たちのコードをアプリケーションに組み込む必要があります。

テンプレートの主な機能

• Chart.js と 3 つの異なるグラフ タイプの統合

• Bootstrap 5 で構築

• 完全に応答可能

• 最新の注文コンポーネント

• 折りたたみ可能なサイドバー (ブラウザのサイズ変更時に自動的に折りたたまれます)

• 通知コンポーネント

• アバターコンポーネント

• ログイン/コンポーネントの登録

テンプレートファイルの構造

dist - テンプレートの生成されたバージョン。テンプレートのソース コードを使用したくない場合は、ここにアクセスしてください。ただし、注意してください。このフォルダー内の何かを直接カスタマイズし、後で webpack を使用してテンプレートを再コンパイルした場合、dist フォルダーをテンプレートから移動しない限り、変更は上書きされます。

node_modules - NPM が依存関係をインストールするディレクトリ。テンプレートのインストールが完了するまで、このフォルダーは表示されません。このフォルダーを作成する必要はありません。

src - テンプレートのソース コード。テンプレートをカスタマイズするには、ここにアクセスしてください。

src/assets - CSS、JS、画像などのテンプレート アセット。

src/data - テンプレート JSON データ ファイル。これらの JSON ファイルを使用して、テンプレートにコンテンツを挿入する作業を容易にします。

src/html - テンプレート ページ。既存のページを編集するか、新しいページを追加するには、ここにアクセスしてください。

src/partials - ハンドルバーの部分テンプレート。

ハンドルバー

Handlebars は、テンプレートのソース コードを可能な限り整理され、クリーンな状態に保つことを可能にするテンプレート エンジンです。コードの重複を削減し、ヘルパー関数を使用することで、テンプレート開発者は最小限のコードで大量のデータを非常に迅速に出力できます。詳細については、こちらをご覧ください。

ハンドルバーの一部の例

テンプレート内のファイル src/html/index.html を開きます。

21 行目あたりに次のコードがあります。

{{> content/breadcrumbs }}

それはハンドルバーの部分です。このコードは、Handlebars に、content というフォルダー (partials フォルダー内にあります) 内を調べ、次に、breadcrumbs というファイルを見つけて、コンパイル時にindex.html ファイルに挿入するように指示します。

Handlebars パーシャルの使用については、いくつかの重要な注意事項があります。

• すべてのパーシャルは src/partials 内に保存されます。部分部分を他の場所に配置しないでください。

• 部分的なファイル拡張子として .html を使用します。有効な部分ファイル拡張子として .svg も追加しました。

• 部分フォルダー内のフォルダー内にフォルダーがある場合は、部分フォルダーが存在するフォルダーのみを参照します。そのため、「partials/header/navbars/navbar.html」は「navbars/navbar」として参照されます。

• ファイル拡張子の部分は含めないでください。上の例では、「breadcrumbs.html」ではなく「breadcrumbs」を出力していることに注意してください。

テンプレートの JSON データ

私たちが使用する Webpack Handlebars プラグインには、JSON ファイルをテンプレート データとして渡すことができる非常に便利なユーティリティが付属しています。

src/data に移動してください。ここにテンプレート データの JSON ファイルが存在します。このフォルダーを編集、削除、または独自のフォルダーを追加できます。

テンプレートのスタイルをカスタマイズする

テンプレートのソース CSS/SASS ファイルはすべて、テンプレートのアセット フォルダー内に保存されます。 src/assets/scss に移動します。エディタでtheme.scssを開きます。

これは、他のすべての SASS/CSS ファイルのメイン エントリ ポイントです。

新しいページを作成する

新しいページを作成するには、コード エディターで src/html に移動します。適切な HTML を簡単に取得できるように、既存のページのクローンを作成します。新しく作成したファイルの名前を必要な URL に変更します。それで終わりです。これで、コード エディタで新しいページを自由に開き、変更を加えてファイルを保存できるようになりました。 Webpack devserver を終了し、再起動するとページが表示されます。

ブートストラップのドキュメント

Bootstrap には、すべてのデフォルトの Bootstrap 機能の設定と使用方法を説明する包括的なドキュメント サイトがすでにあります。 Bootstrap 5 は、テンプレートのソース コードに完全に統合されています。デフォルトの Bootstrap 機能については、まず Bootstrap のドキュメント サイトを参照してください。 Bootstrap のドキュメント サイトにアクセスしてください。

クレジット

ブートストラップ

チャート.js

アンスプラッシュ

ペクセル

ピクサベイ

シンプルバー.js

お問い合わせ

当社のウェブサイトはこちらからご覧いただくか、support@pi​​xelrocket.store までメールでお問い合わせください。