安裝

請依照以下步驟開始：

1. 開啟 HTML 資料夾以找到所有範本檔案。
2. 開始新增您的內容並自訂 html 檔案。
3. 使用 Filezilla 等 FTP 程式將這些檔案上傳到您的網路伺服器。

請務必上傳下方列出的必要檔案與資料夾：

HTML/css 樣式表資料夾
HTML/fonts 字體資料夾
HTML/img 圖片資料夾
HTML/js 腳本資料夾
HTML/php PHP 函數資料夾
HTML/index.html 首頁

其他檔案可依您的偏好使用。

您現在已成功啟動並執行您全新美麗且功能齊全的網站。

頁頭樣式

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

`<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">`	帶有深色選單的透明頁頭。

網格

基於最新的 Bootstrap，並使用 12 列網格系統作為每個區塊的基礎結構。網格的每次使用都應包含在 container 和 row 元素中。下方是一個包含三個相等欄位的區塊的簡短範例（平板電腦及以上為 3，智慧型手機為 6）。

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-12

如需 Bootstrap 網格的更詳細說明，請參閱 Bootstrap 文件 Bootstrap 網格

間距

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

範例：您有一個標題，您希望透過在底部新增 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'

對於 padding，我們使用了 '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 地圖地址，請開啟包含 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 帳戶並建立一個列表。

一旦您擁有 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 行的電子郵件地址：

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

45 $address = "[email protected]";

Twitter 動態消息

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

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

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

Instagram 動態消息

為了從您的 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 行之間貼上您的存取權杖號碼，並在 clientID 行貼上您的客戶 ID 號碼。
完成後，將 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 日