開始使用
範本資料夾 Sland 位於下載的壓縮檔內。需要解壓縮該壓縮檔才能找到範本以及說明文件資料夾。
The 檔案與資料夾結構 類似於以下內容：
- assets/css — 包含 CSS 檔案的資料夾。
- assets/fonts — 包含字型檔案的資料夾。
- assets/images — 包含圖片檔案的資料夾。
- assets/js — 包含 Javascript 檔案的資料夾。
使用如 FileZilla 等 FTP 用戶端，將範本檔案上傳至伺服器。
檔案編輯與上傳：
個別頁面可透過在 VS Code 等程式碼編輯器中開啟進行自訂。完成所有自訂後，若要讓網站上線，您需要將更新後的專案檔案上傳至您自己網域的虛擬主機伺服器。檔案可使用如 FileZilla 等 FTP 用戶端上傳。
HEAD CSS 結構
以下是 css 在 Head 區段:
<!--====== Font Awesome ======-->
<link rel="stylesheet" href="assets/css/fontawesome.5.9.0.min.css">
<!--====== Flaticon CSS ======-->
<link rel="stylesheet" href="assets/css/flaticon.css">
<!--====== Bootstrap css ======-->
<link rel="stylesheet" href="assets/css/bootstrap.4.5.3.min.css">
<!--====== Magnific Popup ======-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--====== Slick Slider ======-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--====== Animate CSS ======-->
<link rel="stylesheet" href="assets/css/animate.min.css">
<!--====== Nice Select ======-->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!--====== Padding Margin ======-->
<link rel="stylesheet" href="assets/css/spacing.min.css">
<!--====== Menu css ======-->
<link rel="stylesheet" href="assets/css/menu.css">
<!--====== Main css ======-->
<link rel="stylesheet" href="assets/css/style.css">
<!--====== Responsive css ======-->
<link rel="stylesheet" href="assets/css/responsive.css">
Javascript 結構
以下是 JS 檔案，這些檔案在 HEAD 或 BODY 區段之前載入：.
<!--====== Jquery ======-->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap ======-->
<script src="assets/js/bootstrap.4.5.3.min.js"></script>
<!--====== Appear js ======-->
<script src="assets/js/appear.js"></script>
<!--====== WOW js ======-->
<script src="assets/js/wow.min.js"></script>
<!--====== Isotope ======-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Circle Progress ======-->
<script src="assets/js/circle-progress.min.js"></script>
<!--====== Image loaded ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!--====== Nice Select ======-->
<script src="assets/js/jquery.nice-select.min.js"></script>
<!--====== Magnific ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Slick Slider ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Main JS ======-->
<script src="assets/js/script.js"></script>
HTML 結構
整個範本的通用結構相同，每個部分都位於一個帶有區段 ID 名稱的區段下。以下是其 通用結構：
PG模拟器基於PG電子娛樂體系，打造專業遊戲試玩平台，涵蓋多樣化電子內容與基礎玩法介紹。用戶可快速體驗遊戲特色、了解操作邏輯，平台訪問順暢、介面清晰，提供穩定安心的試玩服務。
使用的字型
字型程式碼可以在「style.css」檔案路徑中找到：assets/css/style.css
// Font Family
--base-font: 'Inter', sans-serif;
--heading-font: 'Poppins', sans-serif;
主要顏色變更選項
檔案路徑：assets/css/style.css
// colors
--base-color: #5b5675;
--heading-color: #141125;
--primary-color: #5138ee;
--light-color: #f8f7fc;
--yellow-color: #ffc800;
--border-color: #edebfd;
Slick 編輯選項
檔案路徑：assets/js/script.js
// 08. Feedback Slider One
if ($('.feedback-wrap').length) {
$('.feedback-wrap').slick({
dots: true,
infinite: false,
autoplay: true,
fade: true,
autoplaySpeed: 5000,
arrows: false,
centerMode: false,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
});
}
更多資訊請瀏覽連結： Slick 文件選項
如何隱藏滾動動畫
請移除或註解掉以下程式碼檔案路徑：assets/js/script.js
// 15. WOW Animation
if ($('.wow').length) {
var wow = new WOW({
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true // act on asynchronously loaded content (default is true)
});
wow.init();
}
速度最佳化
請最佳化所有圖片（KB、MB 單位），同時使用佔位符檔案路徑所對應的圖片尺寸：assets/images/..
- Tinypng
請壓縮所有 CSS 檔案路徑：assets/css/..
請壓縮所有 JS 檔案路徑：assets/js/..
如何更換圖片？
請前往圖片檔案「路徑：assets/images/...」，依照佔位圖片的尺寸與名稱，替換您想要的圖片。
如何為現有範本新增更新？
一段時間後，我們會根據最新技術更新我們的專案，但您的範本需要您自行更新（如果您願意的話）。
致謝
注意： 所有 圖片 僅用於 預覽 目的，且 不包含在 未包含在 最終購買 檔案中。
圖片來源：
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/
IconFont
Fontawesome
Flaticon