kavlan html bootstrap

Kavlan - Bootstrap 5 HTML 響應式管理模板

概述

Kavlan 是完美的深色管理面板模板，可讓您的管理系統輕鬆導航和維護。 Kavlan 簡潔、響應靈敏且易於使用，提供的使用者體驗將幫助您創建成功的介面。最重要的是，它是免費的！

查看示範 |下載壓縮包

目錄

• 要求

• 快速入門

• 模板頁面

• 示範連結

• 模板主要特點

• 範本文件結構

• 車把

• 範本 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。

示範連結

示範網址

請注意，這只是一個 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”而不是“breadcrumbs.html”

範本 JSON 數據

我們使用的 Webpack Handlebars 插件附帶了一個非常方便的實用程序，它允許我們傳入 JSON 檔案作為模板資料。

請導航至：src/data。這是我們的模板資料 JSON 檔案所在的位置。您可以編輯、刪除或新增您自己的資料夾到此資料夾。

自訂模板樣式

模板的所有來源 CSS/SASS 檔案都保存在模板的 asset 資料夾中。導航到 src/assets/scss。使用編輯器開啟 theme.scss。

這是所有其他 SASS/CSS 文件的主要入口點。

建立新頁面

若要建立新頁面，請在程式碼編輯器中導覽至：src/html。為了更容易獲得正確的 HTML，請克隆現有頁面。將新建立的檔案重新命名為您需要的任何 URL。就是這樣。現在，您可以使用程式碼編輯器開啟新頁面，進行更改，然後儲存檔案。退出 Webpack devserver 並重新啟動以顯示頁面。

引導文檔

Bootstrap 已經有一個全面的文件站點，它將指導您設定和使用所有預設的 Bootstrap 功能。 Bootstrap 5 完全整合到我們模板的源代碼中。請先參閱 Bootstrap 的文檔站點，以了解任何預設的 Bootstrap 功能：造訪 Bootstrap 的文檔站點

製作人員

引導程式

圖表.js

未飛濺

像素

皮克斯

Simplebar.js

聯絡我們

您可以在此處找到我們的網站，也可以發送電子郵件至 support@pi​​xelrocket.store