範本資料夾 Sland 位於下載的壓縮檔內。需要解壓縮壓縮檔,才能找到範本及說明文件資料夾。

The 檔案與資料夾結構 類似於以下內容:

  1. assets/css — 包含 CSS 檔案的資料夾。
  2. assets/fonts — 包含字型檔案的資料夾。
  3. assets/images — 包含圖片檔案的資料夾。
  4. assets/js — 包含 Javascript 檔案的資料夾。

使用如 FileZilla 等 FTP 用戶端,將範本檔案上傳至伺服器。

檔案編輯與上傳:

個別頁面可透過在 VS Code 等程式碼編輯器中開啟進行自訂。完成所有自訂後,若要讓網站上線,需將更新後的專案檔案上傳至您自有域名的虛擬主機伺服器。檔案可使用如 FileZilla 等 FTP 用戶端上傳。

以下是 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">

以下是 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>

The Sland 是一個響應式模板,基於 Bootstrap 框架。如需更多資訊,您可以查看 Bootstrap CSS.

整個模板的通用結構保持一致,每個部分都位於一個帶有區段 ID 名稱的區段下。以下是 通用結構:

雷速是一個專業的體育直播平台,致力於為用戶提供全面的賽事直播和即時體育資訊。透過雷速官網,您可以輕鬆找到各類熱門賽事的資訊和直播安排,並便捷地進行雷速下載,享受流暢的觀賽體驗。無論您對足球、籃球還是其他體育項目感興趣,雷速都能滿足您的需求,提供即時比分、賽程更新和精彩回放。加入雷速,體驗每一場比賽的激情與樂趣,讓您時刻與體育盛事緊密相連!

字型代碼可在「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;

檔案路徑: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,
    });
}  


更多資訊請瀏覽連結: 快速文件選項

請移除或註解下方程式碼檔案路徑: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/..

- CSS Minifier

請壓縮所有JS檔案路徑:assets/js/..

- Javascript Minifier

請前往圖片檔案「路徑:assets/images/...」,依照佔位符圖片的尺寸與名稱,替換為您想要的圖片

一段時間後,我們會根據最新技術更新專案,但若您需要更新您的模板,則需自行處理。

注意: 所有 圖片 僅用於 預覽 用途 ,且 不包含 在 最終購買 檔案中。

圖片來源:
https://www.freepik.com/
https://pixabay.com/
https://unsplash.com/

字型:
Inter
Poppins

IconFont
Fontawesome
Flaticon