apollo html bootstrap

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

概要

Apollo は、クリーンで最小限の応答性を備えた Bootstrap 5 管理テンプレートです。

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

目次

• 要件
• クイックスタート
• テンプレートページ
• デモリンク
• テンプレートの主な機能
• テンプレートファイルの構造
• ハンドルバー
• テンプレートの JSON データ
• テンプレートのスタイルをカスタマイズする
• 新しいページを作成する
• ブートストラップのドキュメント
• クレジット
• お問い合わせ

要件

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

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

クイックスタート

• 最新リリースをダウンロードするか、リポジトリのクローンを作成します: git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.git
• システムに Node.js がまだない場合は、インストールします。
• コマンドラインでプロジェクトのルートを開きます。
• コマンドラインでnpm install実行します。
• npm start実行して Webpack devserver を起動します。
• テンプレート ファイル (dist フォルダーに出力される) を再コンパイルする場合は、 npm run buildを実行します。

テンプレートページ

テンプレートは次のページで構成されます。

• ダッシュボード
• ユーザー管理ページ
• チャートのサンプルページ
• ログインページ
• 登録ページ
• パスワードを忘れた場合のページ
• 404ページ
• 空白のページ

次のウィジェットと同様に:

• ユーザー設定ドロップダウン
• ユーザーアクティビティドロップダウン
• ユーザーメッセージドロップダウン
• ユーザー通知ドロップダウン
• さまざまな Chart.js ウィジェット
• 国別の訪問者数
• OS システム別の訪問者数

コードの繰り返しを最小限に抑えるために、テンプレート エンジンとパーシャルとして 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 までメールでお問い合わせください。