apollo html bootstrap
Apollo Initial Release
Apollo 是一個乾淨且最小的響應式 Bootstrap 5 管理範本。
查看示範 |下載壓縮包
如果您不打算使用模板原始程式碼（這意味著您不會編譯它或執行 Webpack 開發伺服器），則無需安裝任何內容。您只需導航到 dist 資料夾並開始編輯文件即可。
大多數開發人員將編輯原始程式碼，並且還將運行 Webpack 來重新編譯模板檔案。如果是這種情況，請確保您已安裝 Node.js。您可以從這裡下載
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install 。npm start啟動 Webpack devserver。npm run build 此範本由以下頁面組成：
以及以下小工具：
為了將程式碼重複降至最低，我們使用 Handlebars.js 作為模板引擎和部分來快速將相同的程式碼新增到不同的頁面。我們還使用 JSON 資料的 Handlebars 外掛程式 - 這允許我們使用循環並輸出單個 HTML 程式碼區塊，而不是重複相同的 HTML。
示範網址
請注意，這只是一個 HTML 模板。它不會連接到資料庫，並且不會自動在內容管理系統（Wordpress 等）中運作。您需要將我們的程式碼合併到您的應用程式中。
？ 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 部分的一些重要注意事項：
我們使用的 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@pixelrocket.store
