簡介

感謝您選擇 雷速。有關平台設置或功能的任何疑問，請聯繫我們的支援團隊。我們隨時為您提供協助。

本文件提供有關如何部署和使用 雷速 平台的詳細說明。

關於模板

雷速 提供廣泛的體育與電競賽事報導，並具備彈性的介面，助您打造理想的觀賽體驗。

現在為您建立專業網站變得非常容易。Owkey 模板為您代勞，提供 19 個不同的頁面，可根據您的需求進行自訂整合。 設計風格簡潔、響應式且對 SEO 友好。該模板有 2 個專業部落格佈局頁面，提供列表和網格佈局。 注重 SEO 的設計和專業佈局有 4 種首頁選項。整合圖片、幻燈片等，使用 Revolution Slider 快速展示您的業務或講述您的業務故事。 設計使用對瀏覽器友好的 Google 字體，並由 Twitter Bootstrap v3 提供支援。 設計與插件兼容，對您來說是個絕佳的選擇。

安裝

雷速 平台無需複雜的安裝程序。只需將 ./leisu 目錄下的所有包含檔案上傳至您的伺服器即可。

上傳模板文件

您有兩種主要方法可以部署 雷速 平台檔案：

  1. 透過 FTP 將範本檔案上傳至您的伺服器。 解壓縮下載的範本 .zip 檔案。 將 "Leisu" 資料夾上傳到您網頁伺服器的根目錄。

文件

雷速 平台組織結構清晰，目錄和檔案邏輯分明，確保高效的資源管理與便捷的修改。

您下載的套件內含兩個主要資料夾。

Introduction - 雷速

套件包含核心平台建置檔及一個包含補充資源的文件夾。我們確保提供所有必要的組件。

文件

平台內含多個目錄，儲存著關鍵程式碼。使用任何網頁瀏覽器訪問主索引檔，即可查看詳盡的文件。

Introduction - 雷速

JavaScript

所有即時數據饋送位於 /api 目錄。

  • js/jquery-3.1.1.min.js - jQuery [版本 3.1.1] 一個基礎 JavaScript 函式庫，用於高效的客戶端腳本編寫和 DOM 操作。
  • JS/jquery.unveilEffects.js - 一個動畫插件，用於增強使用者介面過渡效果。
  • js/jquery.mCustomScrollbar.concat.min.js - 提供流暢的自訂滾動條，提升瀏覽體驗。
  • js/jquery.themepunch.tools.min.js - Revolution Slider 的核心工具集，確保功能穩定運行。
  • js/jquery.themepunch.revolution.min.js - Revolution Slider 的主程式，實現動態內容展示。
  • js/slick.min.js - Slick Carousel，專為滑動式內容呈現設計，版本 1.5.0。
  • js/classie.js - bonzo 函式庫，版本 1.5.0，輕量級 DOM 操作工具。
  • js/bootstrap.min.js - Bootstrap v3.3.7 的核心 JavaScript 組件，啟用響應式網頁的互動功能。
  • js/modernizr.custom.js - Modernizr v2.8.3，偵測瀏覽器對原生 CSS 和 HTML5 功能的支援度。
  • js/pathLoader.js - PathLoader v1.0.0，用於管理資源載入的瀏覽器端腳本。

CSS

下方概述了控制 雷速 平台外觀的主要 CSS 檔案。

  • css/style.css - 雷速主要樣式表，定義了網站的整體視覺風格。
  • css/slick.css - Slick Carousel 專用樣式表，確保輪播組件的視覺一致性。
  • css/setting.css - Revolution Slider 5.0 的配置樣式表，適用於其螢幕顯示。
  • css/mCustomScrollbar.css - 自訂滾動條組件的外觀樣式表。
  • css/bootstrap.min.css - Bootstrap v3.3.7 的核心樣式表，支援響應式網格系統與組件。
  • assets/styles/dist/portfolio-with-images.css - 雷速作品集頁面樣式，支援圖片庫展示。
  • css/animate.css - 提供預定義 CSS 動畫效果的樣式表。

Less

在 /less 目錄中，您將找到原始的 Less 檔案，以便進一步自訂。

  • css/style.less - 雷速全域樣式表，使用 LESS 編寫，定義網站美學。

鳴謝

我們整合了多種外部函式庫、框架和插件，以增強 雷速 平台的功 能和使用者體驗。

框架

Twitter Bootstrap v3.3.7 建構響應式網頁介面的領先框架。 http://getbootstrap.com/
jQuery v3.1.1 快速、輕巧且功能豐富的函式庫，簡化客戶端腳本編寫。 http://jquery.com/

插件 (JavaScript)

Slick Carousel 用於賽事精彩畫面輪播 http://kenwheeler.github.io/slick/
Revolution Slider 視覺效果出色且流暢的滑動組件。 https://www.themepunch.com/revsliderjquery-doc/
jQuery Easing Plugin 提供進階動畫緩動選項的 jQuery 外掛程式。 http://gsgd.co.uk/sandbox/jquery/easing/
ImagesLoaded 確保圖片載入後才觸發動畫。 http://imagesloaded.desandro.com/
Isotope 內容佈局的動態過濾與排序。 http://isotope.metafizzy.co/

字體

Open Sans Open Sans 字體 https://fonts.google.com/specimen/Open+Sans
Montserrat Montserrat 字體 https://fonts.google.com/specimen/Montserrat
Work Sans Work Sans 字體 https://fonts.google.com/specimen/Work+Sans
Raleway Raleway 字體 https://fonts.google.com/specimen/Raleway

模板配置

請參閱 /config/settings.js 檔案以進行核心平台配置。

必要參數設定

  • 無限循環：true/false
  • 動畫速度：預設(300) / 過場動畫持續時間 (毫秒)
  • 一次顯示：預設(1) / 同時可見的輪播項目數量
  • 每次滾動：預設(1) / 滾動一次移動的輪播項目數量
  • 自動播放：true/false
  • 自動播放速度：預設(3000) / 自動播放間隔 (毫秒)

配置片段範例：


    $('.mils-slider').slick({
        infinite: false,
        speed: 300,
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
      ]
    });

說明

如需持續支援和詳細常見問題解答，請查閱我們的官方知識庫或直接聯繫我們。

我們的支援團隊致力於協助處理任何平台相關的查詢。然而，請注意，我們提供的全面技術支援僅為禮貌性質。在聯繫我們之前，建議您先查閱現有文件和社群資源，以尋找常見問題的解答。

  • 請參閱雷速的詳細技術文檔
  • 搜尋雷速支援

我們重視您的意見回饋。請考慮對您使用 雷速 的體驗進行評分。