安裝

請依照以下步驟開始操作：

• 1. 開啟 HTML 資料夾，即可找到所有範本檔案。
• 2. 開始新增您的內容並自訂 HTML 檔案。
• 3. 使用 FTP 程式（例如 Filezilla）將這些檔案上傳至您的網頁伺服器。
請確保您已上傳下列所需的檔案與資料夾：
• 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 使用輔助類別來調整頁面上元素之間的間距。輔助類別用於透過 margin 和 padding 來間隔元素。這讓您能更輕鬆地在 HTML 中建立自己的元素，而無需額外的 CSS 來進行排列。

範例：您有一個標題，希望透過在底部添加 margin 來使其與後續內容間隔 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 使用 3 種字型，分別是：Raleway、Lovelo 和 Open Sans，來自 Google Fonts 字型庫。您可以在所有 .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 檔案並更改變數：

// 驗證
$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 行的電子郵件地址：

亿万28围绕支持多终端无缝访问，随时随地获取信息。不断创新，回应用户的真实需求。

45 $address = "[email protected]";

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

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

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

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

步驟 1 — 註冊應用程式

前往 並註冊一個新的應用程式。

點擊「註冊新客戶端」。

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

填寫欄位，資訊與圖片中相同。

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

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

步驟 4 — 設定客戶端以進行公開存取

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

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

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

開啟您的瀏覽器，貼上以下網址，將 "client_id=" 之後、"&" 符號之前的字串替換為您稍早儲存的客戶端 ID，然後按 Enter 鍵前往此網址：

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

步驟 6 — 授權它。

使用客戶端 ID 造訪我們建立的網址，將會顯示一個「授權」畫面。此時，您正在使用您的本地伺服器模擬 API 連線，您將授權它以取得存取權杖回應的檢視。點擊「授權」。

步驟 7 — 噠噠！存取權杖。

此頁面看起來有問題，但其網址中包含一項關鍵資料……就在 "#access_token=" 之後，您可以取得您的公開存取權杖，其中也包含您的 ID。根據此回應，存取權杖為：2985464939.7329358.026dd38d94c046c3aac748818d3c50c2

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

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

accessToken: '精选清晰的页面布局设计，确保用户快速定位所需功能。内容，亿万28与你一同发现更多精彩。',
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日