安裝

請依照以下步驟開始：

• 1. 開啟 HTML 資料夾以尋找所有範本檔案。
• 2. 開始新增您的內容並自訂 html 檔案。
• 3. 使用 Filezilla 等 FTP 程式將這些檔案上傳到您的網頁伺服器。
請務必上傳下方所列的必要檔案與資料夾：
• HTML/css 樣式表資料夾
• HTML/fonts 字體資料夾
• HTML/img 圖片資料夾
• HTML/js 腳本資料夾
• HTML/php PHP 函數資料夾
• HTML/index.html 首頁
其他檔案可依您的偏好使用。
• 現在您已成功啟動並執行您全新美觀且功能齊全的網站。

您可以選擇 6 種標頭樣式。只需將標頭樣式 CSS 類別新增到標頭標籤即可啟用標頭樣式。下方提供標頭樣式類別及其說明的列表供您參考：

<nav class="navbar navbar-default">	預設標頭，具有白色背景和深色選單。
<nav class="navbar navbar-default fullwidth">	全寬標頭
<nav class="navbar navbar-default transparent">	透明轉為較小，帶有白色背景
<nav class="navbar navbar-default transparent-dark">	透明轉為較小，帶有深色背景
<nav class="navbar navbar-default dark">	深色標頭，帶有淺色選單。
<header class="navbar navbar-default transparent dark-menu">	帶有深色選單的透明標頭。

Wander 使用輔助類別來間隔頁面上的元素。輔助類別用於間隔具有外邊距和內邊距的元素。這使得在不需額外 CSS 的情況下，更容易在 HTML 中建立您自己的元素並適當排列。

範例：您有一個標題，希望透過新增底部外邊距將其與後續內容隔開 100px。您可以使用間距類別來協助：

<h1 class="mb100">I'm a heading</h1>

間距以 10 的倍數運作。這表示您可以使用類似以下的類別： mb10, mb20, mb30, mb40, mb50 依此類推，最高可達 mb100.

• 'mb' 指的是 'margin-bottom'
• 'mt' 指的是 'margin-top'
• 'ml' 指的是 'margin-left'
• 'mr' 指的是 'margin-right'

對於內邊距，我們使用 'pb' 而非 'mb'，其中 'pb' 指的是 'padding-bottom'。

• 'pb' 指的是 'padding-bottom'
• 'pt' 指的是 'padding-top'
• 'pl' 指的是 'padding-left'
• 'pr' 指的是 'padding-right'

Wander 隨附 4 種英雄首頁區塊類型：圖片、滑塊、內容滑塊和影片英雄。

您可以在下方列出的檔案中找到它們：

• - 全螢幕滑塊 /home-slider-fullscreen.html
• - 全寬滑塊 /home-slider-fullwidth.html
• - 全螢幕內容滑塊 /home-content-slider-fullscreen.html
• - 全寬內容滑塊 /home-content-slider-fullwidth.html
• - 全螢幕影片 /home-video-fullscreen.html
• - 全寬影片 /home-video-fullwidth.html
• - 全螢幕視差 /index.html
• - 全寬視差 /home-parallax-fullwidth.html

Wander 使用 Owl Carousel jQuery 外掛程式來處理所有滑塊行為，包括圖片滑塊和英雄滑塊。
所有滑塊均支援行動裝置觸控，且在桌面模式下具有導覽箭頭。

圖片滑塊可以在 features-slider-columns.html 檔案中找到，且結構一律為：

            				
    <div class="image-slider1 owl-carousel navigation-thin pagination-in">
        <div><img src="image-link" class="img-responsive" alt="#"></div> 
        <div><img src="image-link" class="img-responsive" alt="#"></div> 
            ... 
    </div>
            				        

許多區塊具有覆蓋背景的圖片，這些背景可以是視差或靜態的。
背景圖片透過 CSS 類別連結，例如 bg-img-1, bg-img-2 依此類推。您可以在 css/custom.css 檔案中找到所有這些。

範例：要為區塊放置背景圖片並使其靜態，請新增圖片類別 bg-img-1:

            				
    <section class="bg-img-1">
        ...
    </section>
            				        

要使其成為視差，請新增類別 parallax

            				
    <section class="parallax bg-img-1">
        ...
    </section>
            				        

您也可以新增類別 overlay 來用深色透明圓點圖案覆蓋圖片。

            				
    <section class="parallax overlay bg-img-1">
        ...
    </section>
            				        

Wander 使用 2 組精美的優質圖標字體： Ion Icons, 和 Et Line Icons.
使用圖標需要您遵循簡單的語法，使用預定義的圖標代碼：

    <i class="ion-heart"> 

所有可用圖標代碼的列表請參閱下方頁面：

• /elements-icons-ion.html
• /elements-icons-et-icons.html

預設情況下，圖標將以非常小的尺寸顯示。您可以透過新增一些尺寸類別來調整：

• size-1x
• size-2x
• size-3x
• size-4x
• size-5x
• size-6x
• size-7x
• size-8x

    <i class="ion-heart size-4x"> 

Wander 提供了一種非常優雅的方式來展示您的作品。您可以從主資料夾中選擇多種作品集變體。
若要設定新的作品集，請使用以下代碼：

作品集篩選器設定：

    <div class="portfolio-filters-center cbp-l-filters-button" id="js-filters">

        <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
        <div data-filter=".branding" class="cbp-filter-item">Branding</div>
        <div data-filter=".graphic" class="cbp-filter-item">Graphic</div>
        <div data-filter=".web" class="cbp-filter-item">Web</div>

    </div>  

作品集項目設定：

    <div class="portfolio-grid-fullwidth cbp" id="js-grid">

        <div class="cbp-item branding web">
            <a href="portfolio-project-carousel.html" class="cbp-caption">
                <div class="cbp-caption-defaultWrap">
                    <img src="img/portfolio/grid/1.webp">
                </div>
                <div class="cbp-caption-activeWrap">
                    <div class="cbp-l-caption-alignCenter">
                        <div class="cbp-l-caption-body">
                            <div class="cbp-l-caption-title">Rewind Watch App</div>
                            <div class="cbp-l-caption-decs">Branding, Web</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

    </div>  

Wander 隨附 10 種預設配色方案，它們位於 css/colors/ 資料夾中。若要使用其中一種，請依照以下步驟操作。

您可以即時變更您網站的配色方案：

開啟您的 html 檔案，在 head 中您會找到連結的 blue.css 樣式表：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Wander Multipurpose HTML Template</title>
            <link rel="icon" href="img/assets/favicon.webp" type="image/png">
                ...
            <link href="css/colors/blue.css" id="color-scheme" rel="stylesheet" type="text/css"> 
        </head>

只需將 blue.css 連結變更為 10 種預設配色方案中的任何一種：

<link href="css/colors/red.css" id="color-scheme" rel="stylesheet" type="text/css">

Wander 使用 Raleway、Lovelo 和 Open Sans 這 3 種字體，來自 Google 字體庫。您可以在所有 .html 檔案的 head 標籤中找到字體檔案的連結。

<link href="fonts/lovelo/stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400%7COpen+Sans:400,300' rel='stylesheet' type='text/css'>

若要新增或變更字體，您需要新增新的 Google 字體連結，或將上述連結替換為您的新 Google 字體。之後，在 css/theme.css 檔案中，您可以將所有 font-family: 名稱變更為您的新字體名稱。

若要變更 Google 地圖地址，請開啟包含 Google 地圖區塊的 html 檔案，並將您的地址或座標放入 "map-coordinates" 和 "marker-coordinates" 屬性中：

<!-- Google Map -->
<section 
     map-coordinates="40.776773, -73.981351" 
     marker-coordinates="40.775075, -73.981179" 
     info="Come visit us today!<br>4th West St, New York" 
     id="map" class="map-style-1 height500">
</section>
<!-- End Google Map -->

訂閱表單已整合 Mailchimp 電子報名單。您需要擁有一個有效的 Mailchimp 帳戶並建立一個名單。

一旦您擁有 Mailchimp 帳戶和名單，您就必須使用您的 API 金鑰和名單 ID 來設定訂閱檔案。在 php 資料夾中開啟 subscribe-mailchimp.php 檔案並變更變數：

// Authentication
$api_key    = 'your-api-key';
$list_id    = 'your-list-id';

- 如何尋找或產生您的 API 金鑰 * http://kb.mailchimp.com/accounts/management/about-api-keys
- 如何尋找您的名單 ID * http://kb.mailchimp.com/lists/managing-subscribers/find-your-list-id

注意：php 檔案只能在您的伺服器上運作，因此在測試時請將網站上傳到您的伺服器。

聯絡表單已完全設定好，唯一需要使其正常運作的就是填入您的電子郵件地址。
在 php 資料夾中開啟 contact-form.php 檔案並變更第 45 行的電子郵件地址：

爱体育围绕深度洞察体育市场，提供前瞻性策略。不断创新，回应用户的真实需求。

45 $address = "[email protected]";

若要顯示您的 Twitter 動態消息，您需要將 html 檔案中的 Twitter 小工具 ID 替換為您自己的：

• - 首先，正常登入 www.twitter.com，然後前往您的設定頁面。
• - 在左側前往「小工具」。
• - 為您需要的內容建立一個新小工具，例如「使用者時間軸」或「搜尋」等。
• - 現在回到設定頁面，然後再回到小工具頁面，您應該會看到您剛建立的小工具。
• - 點擊編輯。
• - 查看您網頁瀏覽器中的 URL，您會看到一個長數字，例如：345735908357048478
• - 在下方將此數字作為您的 ID 使用！

<div id="twitter-feed" data-twitter-widget-id="455427632419442688"></div>

若要從您的 Instagram 使用者帳戶獲取動態消息，您需要在 Instagram 開發者網站上註冊一個應用程式。
請依照以下步驟操作：

步驟 1  — 註冊應用程式

造訪 並註冊一個新應用程式。

點擊註冊新用戶端。

步驟 2  — 註冊新應用程式用戶端

填寫與圖片中相同的資訊。

步驟 3  — 複製或儲存用戶端 ID

在此複製用戶端 ID，或至少保持此分頁開啟，您很快就會需要用戶端 ID。

步驟 4  — 設定用戶端以公開存取

從「管理用戶端」畫面點擊您的應用程式的「編輯」，然後開啟「安全性」分頁，取消勾選「停用隱含 OAuth」，因為我們希望公眾能夠看到我們的動態消息。

再次點擊您的應用程式的「編輯」，然後開啟「沙盒」分頁，並確認您是此應用程式的「管理員」。

步驟 5  — 在瀏覽器中使用此 API URL

開啟您的瀏覽器並貼上以下 URL，將 "client_id=" 後面和 "&" 符號前面的字串替換為您先前儲存的用戶端 ID，然後按下 Enter 以造訪此 URL：

請記住：將此 URL 中的 "7329358a04c0403c8389201ef5e4733b" 部分替換為您的用戶端 ID。您可以從 Instagram 開發者網站的「管理用戶端」頁面再次存取用戶端 ID。

步驟 6  — 授權。

造訪我們使用用戶端 ID 建立的 URL 將會出現「授權」畫面。此時，您正在使用您的本機伺服器模擬 API 連線，您將會授權它以查看存取權杖回應。點擊「授權」。

步驟 7  — 搞定！存取權杖。

此頁面似乎損壞，但 URL 中有一個關鍵資料… 在 "#access_token=" 後面，您可以取得您的公開存取權杖，其中也包含您的 ID。根據此回應，存取權杖為：2985464939.7329358.026dd38d94c046c3aac748818d3c50c2

步驟 8  — 使用您的存取權杖和用戶端 ID

開啟「js」資料夾中的 scripts.js 檔案並搜尋 instagram。
將您的存取權杖號碼貼在 accessToken 行的引號之間，並將您的用戶端 ID 號碼貼在 clientID 行。
完成後，將 vossen_inc 使用者名稱替換為您的。

accessToken: '2985464939.7329358.026dd38d94c046c3aac748818d3c50c2',
clientID: '7329358a04c0403c8389201ef5e4733b',

query: 'vossen_inc',

在此下載

---

v1.1.2

更新於 2016 年 6 月 4 日

- 已修正 - Instagram 存取權杖

變更檔案：

• - js/scripts.js

---

v1.1

更新於 2016 年 4 月 30 日

- 已修正 - YT 影片背景響應式設計

- 已修正 - 標頭導覽單一連結

- 已修正 - 團隊圖片懸停卡頓

- 已新增 - 單頁選單滾動範例

- 已新增 - 簡單標頭功能檔案

變更檔案：

• - css/theme.css
• - js/plugins.js
• - js/scripts.js

新增檔案：

• - home-one-scroll.html
• - features-header-simple.html

---

初始版本 v1.0

發佈於 2016 年 4 月 26 日