安装

按照以下步骤开始：

1. 打开 HTML 文件夹以查找所有模板文件。
2. 开始添加您的内容并自定义 html 文件。
3. 使用 Filezilla 等 FTP 程序将这些文件上传到您的 Web 服务器。

确保您上传了下面列出的必需文件和文件夹：

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 使用辅助类来分隔页面上的元素。辅助类用于使用外边距和内边距来分隔元素。这使得在 HTML 中创建自己的元素更加容易，而无需额外的 CSS 来适当地排列它们。

示例：您有一个标题，您想通过在底部添加外边距将其与后续内容隔开 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'>

为了添加或更改字体，您需要添加新的谷歌字体链接或用您的新谷歌字体替换上面的链接。之后在 css/theme.css 文件中，您可以将所有 font-family: 名称更改为您的新字体名称。

谷歌地图

要更改谷歌地图地址，请打开包含谷歌地图部分的 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 Feed

要显示您的 Twitter Feed，您需要将 html 文件中的 Twitter 小部件 ID 替换为您自己的：

- 首先正常登录 www.twitter.com，然后转到您的设置页面。
- 在左侧转到“小部件”。
- 为您需要的内容创建一个新小部件，例如“用户时间线”或“搜索”等。
- 现在返回设置页面，然后返回小部件页面，您应该会看到您刚刚创建的小部件。
- 点击编辑。
- 查看您浏览器中的 URL，您会看到一个长数字，例如：345735908357048478
- 在下面使用此 ID 作为您的 ID！

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

Instagram Feed

为了从您的 Instagram 用户帐户获取 Feed，您需要注册一个 Instagram 开发者网站上的应用程序。
请按照以下步骤操作：

步骤 1 — 注册应用程序

访问并注册一个新应用程序。

点击注册新客户端。

步骤 2 — 注册新应用程序客户端

填写与图片相同的信息。

步骤 3 — 复制或保存客户端 ID

在此处复制客户端 ID，或至少保持此选项卡打开，您很快就会需要客户端 ID。

步骤 4 — 配置客户端以公开访问

从“管理客户端”屏幕点击您的应用程序上的“编辑”，然后打开“安全”选项卡，取消选中“禁用隐式 OAuth”，因为我们希望公众能够看到我们的 Feed。

再次点击应用程序上的“编辑”，然后打开“沙盒”选项卡，并确认您是该应用程序的“管理员”。

步骤 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 日