安裝

請依照以下步驟開始：

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

網格

基於最新的 Bootstrap，並使用 12 列網格系統作為每個部分的基礎結構。網格的每次使用都應同時包含在容器和列元素中。下方是一個包含三個相等欄位的區段的簡短範例（平板電腦及以上為 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 使用輔助類別來間隔頁面上的元素。輔助類別用於使用外框和內距來間隔元素。這使得在不需額外 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 Fonts Library。您可以在所有 .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 行更改電子郵件地址：

围绕虎扑足球，虎扑体育持续打磨更优质的服务。

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 行的引號之間，並將您的客戶 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 日