关于我们
- 项目名称：世界杯官网中文站 - 响应式赛事资讯模板
- 版本：v 1.0
- 作者：世界杯官网
感谢您购买本模板，并成为我们的忠实用户！您拥有本产品终身免费更新及作者专属支持的权利。
本帮助文档旨在指导您完成每一步定制。请仔细阅读，以便理解本模板的构建方式及如何正确编辑。定制本模板需要具备基础的HTML和CSS知识，您可以通过以下链接学习基础知识。
学习 HTML 基础- http://www.w3schools.com/
- https://developer.mozilla.org/
- http://learn.shayhowe.com/html-css/
- https://www.tutorialspoint.com/html/
定制本站所需条件
您需要以下软件来定制本模板。
- 代码编辑软件（例如：Dreamweaver, Sublime Text 或 Notepad++）
- 用于测试的网页浏览器（例如：Google Chrome 或 Mozilla Firefox）
- 用于上传文件的FTP工具（例如：FileZilla）
快速入门
如果您能本地打开本帮助文档，则说明您已成功下载并解压了安装包。文件结构如下：
Paysilo/
├── Documentation/
├── www/
│ ├── css/
│ │ ├──/
│ ├── fonts/
│ ├── images/
│ ├── js/
│ │ ├──/
│ │
│ ├── php/
您需要定制的是HTML文件夹。请从安装包中复制HTML文件夹并粘贴到您的项目文件夹中。（此举可避免覆盖原始文件，若出错，您仍可在此找到原始文件。）
页面列表
本模板包含以下HTML页面列表
- 首页 index.html
页面设置
确定您偏好的首页布局后，请将文件名重命名为index.html。上传至服务器时，此名称是作为默认页面的必需项。
表单设置
联系表单
设置联系表单，请遵循以下步骤。
要接收邮件，首先需要设置您的邮箱地址。请在代码编辑器中打开/php/contact.php文件，然后修改邮箱ID和主题。请参考示例如下：
/* * ------------------------------------ * Contact Form Configuration * ------------------------------------ */ define( "RECIPIENT_EMAIL", "info.thememor@gmail.com" ); // Your email ID here
成功跳转（感谢页）
如果您希望用户在成功提交表单后跳转至其他页面（如感谢页或成功页），本模板可轻松实现。打开index.html，只需在<form>元素中添加data-redirect="/path/to/thanks.html"即可。例如：
<!-- // NOTE THE data-redirect attribute --> <form action="php/contact.php" method="POST" data-redirect="success.html">
或者，如果您不希望用户跳转，而是停留在当前页面，只需将data-redirect属性值更改为none即可。
订阅表单
此步骤用于设置页脚的Mailchimp订阅表单。您首先需要从Mailchimp获取一些信息。
- Mailchimp API密钥
- 邮件列表ID
获取API和列表ID后，请打开/php/subscribe.php文件，添加您的API密钥和列表ID。您还可以配置其他选项，如双重确认、发送欢迎邮件以及名字、姓氏等MMERGE标签。请参考示例如下：
/* * ------------------------------------ * Mailchimp Email Configuration * ------------------------------------ */ $apiKey = 'YOUR_MAILCHIMP_API_KEYS_HERE'; /*Your Mailchiimp API Key*/ $listId = 'LIST_ID_HERE'; /*Mailchimp List ID*/ $double_optin = true; /*Set False if you don't need to verify user enmail */ $send_welcome = true; /* Send Welcome email to new users */ $email = $_POST['email']; $fname = ''; $lname = '';
成功跳转（感谢页）
如果您希望用户在成功提交表单后跳转至其他页面（如感谢页或成功页），本模板可轻松实现。打开index.html，只需在<form>元素中添加data-redirect="/path/to/thanks.html"即可。例如：
<!-- // NOTE THE data-redirect attribute --> <form action="php/subscribe.php" method="POST" data-redirect="success.html">
或者，如果您不希望用户跳转，而是停留在当前页面，只需将data-redirect属性值更改为none即可。
其他设置
谷歌地图
本模板包含一个样式化的谷歌地图。要显示您设置的地图，您需要从谷歌地图获取iframe代码。
扩展功能
网站托管
完成所有定制后，下一步是将您的“即将上线”模板上传到实时托管服务器。为此，您需要从服务提供商处购买托管计划和域名。
从ilmosys托管购买托管服务
服务器上传
Once you have registered a domain name and Hosting, You will get FTP details from your hosting provider. Use that login details to connect with your server. You will need an FTP Software for this such as FileZilla. Connect with your server and open /public_html folder in your server. Then copy all HTML, CSS and JS files from your local machine to your root /public_html folder in
your server. Please note the HTML files should be in the Server's root folder. If your local project is in /your-folder/ Do not upload the folder directly. Instead open the folder and select all HTML files and
CSS, JS folders and upload.
网站优化技巧
一个快速优化的网站有几个因素需要实施才能达到预期效果。有多种优化技术可供选择，它们无疑会对您的网站性能产生积极影响，我们想与您分享其中一些：
-
gZip压缩与浏览器缓存
This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. GZip 压缩 is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as 浏览器缓存 also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.
gZip压缩和浏览器缓存可通过Apache Web服务器上的.htaccess文件启用。您可以从此处获取代码：https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess 以在您的服务器上启用这些模块。
-
图片压缩与优化
We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- 调整图片尺寸： Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's
<img>Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of1200pxx800pxin a Content Size of300pxx200pxas this is unnecessary. Resize it to300pxx200px - 图片格式：网页图片常用三种文件类型：JPEG、GIF 和 PNG。JPEG 适用于纯色背景图片，PNG 适用于透明背景图片，GIF 适用于动图。请根据图片特性选择合适格式，以优化加载速度和显示效果。
- 压缩图片： Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
MAC 系统 use ImageOptim
Windows 系统 use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
- 调整图片尺寸： Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's
-
CSS与jQuery压缩
It is also recommended that you 合并与压缩 all your CSS Files to a single CSS File & all Javascript Files to a single JS File since 压缩（Minification） reduces the size of the File and 合并（Combining） the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
CSS use CSS 压缩工具 and JavaScript use JavaScript 压缩工具. -
内容分发网络
You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. 注意： CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs. Cloudflare also has a Free plan, you can try that for free.
- 高速服务器托管 服务器性能对网站至关重要，建议选择提供稳定、高速托管服务的公司。您也可考虑我们的共享主机方案，详情请见上方介绍。
检查Google Page Speed 检查Gtmetrix评分
鸣谢
我们非常感谢以下框架、插件和图片的制作者。我们使用它们使此登陆页面更具功能性。由于版权限制，现场演示中看到的演示图片不包含在下载包中。
框架
- Bootstrap
插件
- Isotope
- Magnific Popup
- Owl Carousel
- Parallax JS
- Wow JS
- Animate.css
- jQuery Validate
- Font Awesome
库
- jQuery
图片/视频
- Unsplash
- Coverr
其他
- PHPMailer
更新日志
如何升级
If you have purchased an earlier version and want to upgrade your website to the newwer version of this template, You can follow the steps. In each update, we will keep a changelog or version history, where we will keep the log of all changes made. We will list out the Changes made, Features added and Pages modified. So it will be easier for you to replace the existing. If you have modified a file which has latest update, for example, CSS, Open both page in a code editor and use a Comparison Sofware or an Online Tool like Diff Now to compare changes in both files. Then you can manually copy paste the changed lines without affecting your file. NOTE: We recommend that you keep a separate file for new additions or changes if possible.
版本 1.0 (2019年3月13日)
Initial Version
评分
如果您喜欢此模板，请访问您的下载页面：http://themeforest.net/downloads 对其进行评分。这对我很重要 :)
支持
请记住，您购买的是一个非常实惠的模板，而不是全职网页设计机构的服务。偶尔我们会协助进行小的调整，但由于其性质，这些请求的优先级会较低。请耐心、礼貌和尊重。我们将尽快回复您的问题。
我的产品支持范围包括：- 解答关于产品及其功能的疑问
- 修复已知 Bug 和用户反馈的问题
- 提供更新以确保与新软件版本兼容
- 定制化与安装服务
- 第三方软件与插件支持
- 请确保您的问题是有效需求，而非定制化请求。
- 在寻求支持前，请务必仔细阅读文档及相关指南。
- 尝试使用搜索引擎查找常见问题，通常能更快获得解答。
联系技术支持
感谢
再次感谢您购买此模板并成为我们的忠实客户。