README

该项目将不再维护。由于 Zurb Foundation 已停止活跃开发，我建议您基于另一个框架（如 Semantic UI 或 Bootstrap）构建前端代码。

感谢多年来为 FoundationPress 做出贡献的所有人：谢谢你们！

– Ole Fredrik

FoundationPress

这是一个基于 Zurb 的 Foundation for Sites 6 的 WordPress 入门主题，它是世界上最先进的响应式（移动优先）框架。FoundationPress 的目的是作为一个小巧方便的工具箱，包含构建任何设计所需的基本元素。FoundationPress 旨在作为一个起点，而不是最终产品。

请随意分支、复制、修改、删除、共享或做任何您喜欢的事情。

欢迎所有贡献！

要求

此项目需要在您的机器上安装 Node.js v6.x.x 或 11.6.x。 请注意，如果您使用的是最新的 Node 版本（尖端版本），可能会遇到安装问题。

FoundationPress 使用 Sass（具有超能力的 CSS）。简而言之，Sass 是一种 CSS 预处理器，允许您更有效地编写样式并使其整洁。

Sass 使用 libsass 编译，这需要在您的机器上安装 GCC。Windows 用户可以通过 MinGW 安装它，Mac 用户可以通过 Xcode 命令行工具安装它。

如果您之前没有使用过基于 Sass 的工作流程，我建议您阅读 FoundationPress for beginners，这是一篇简短的博客文章，解释了您需要了解的内容。

快速入门

1. 克隆仓库并使用 npm 安装

$ cd my-wordpress-folder/wp-content/themes/
$ git clone https://github.com/olefredrik/FoundationPress.git
$ cd FoundationPress
$ npm install

2. 配置

YAML 配置文件

FoundationPress 包含一个 config-default.yml 文件。要修改配置，请复制 config-default.yml 并将其重命名为 config.yml，然后修改该文件。config.yml 文件由 git 忽略，以便每个环境都可以使用相同的 git 仓库的不同配置。

在构建过程的开始，会检查是否存在一个 config.yml 文件。如果存在 config.yml 文件，配置将从此文件加载。如果不存在 config.yml 文件，将使用 config-default.yml 作为后备。

Browsersync 配置

如果您想利用 Browsersync（保存文件时自动刷新浏览器），只需在上一步骤创建后打开您的 config.yml 文件，并将您的本地开发服务器地址和端口（例如 https://:8888）放在 BROWSERSYNC 对象下的 url 属性中。

静态资源哈希 / 缓存破坏者

如果您想确保用户在重新部署主题后看到最新的更改，您可以启用静态资源哈希。在您的 config.yml 中，设置 REVISIONING: true;。哈希将在 npm run build 和 npm run dev 命令上工作。它不会应用于带有 Browsersync 的启动命令。这是设计上的。只有在文件实际发生变化时，哈希才会更改。

3. 开始

$ npm start

4. 编译生产环境资产

在为生产环境构建时，CSS 和 JS 将被压缩。要压缩 /dist 文件夹中的资产，运行

$ npm run build

要创建主题的 .zip 文件，运行

$ npm run package

运行此命令将构建并压缩主题的资产，并将主题的 .zip 归档放在 packaged 目录中。这将排除主题中的开发文件/目录，如 /node_modules、/src 等，以保持主题轻量，便于将主题传输到预发布或生产服务器。

项目结构

在 /src 文件夹中，您将找到所有资产的作业文件。每次您对 Gulp 监视的文件进行更改时，输出都将保存到 /dist 文件夹中。此文件夹的内容是您不应触摸的编译代码（除非您有很好的理由这样做）。

/page-templates 文件夹包含可以在 WordPress 管理面板的“页面”部分选择的模板。要创建新的页面模板，只需在此文件夹中创建一个新文件，并确保给它一个模板名称。

我想其余部分相当直观。如果您感到困惑，请随时提问。

样式和 Sass 编译

style.css：不要担心这个文件。（由于某种原因）它由 WordPress 所需。所有样式都由下面的 Sass 文件处理
src/assets/scss/app.scss：在此处导入所有样式
src/assets/scss/global/*.scss：全局设置
src/assets/scss/components/*.scss：按钮等。
src/assets/scss/modules/*.scss：顶部栏、页脚等。
src/assets/scss/templates/*.scss：页面模板样式
dist/assets/css/app.css：此文件在文档的 <head> 部分中加载，并包含项目的编译样式。

如果您是 Sass 新手，请注意，您需要在后台运行 Gulp（《npm start》），以便将您的 scss 文件编译到 app.css。

JavaScript 编译

所有 JavaScript 文件，包括 Foundation 的模块，都通过 src/assets/js/app.js 文件导入。这些文件使用 webpack 作为模块打包器进行模块依赖导入。

如果您不熟悉模块和模块打包，请查看此资源以了解 Node 风格的 require/exports 和此资源以了解 ES6 模块。

Foundation 模块在 src/assets/js/app.js 文件中加载。默认情况下，所有组件都会被加载。您也可以选择包含哪些模块。只需遵循文件中的说明即可。

如果您需要输出与 app.js 分离的附加 JavaScript 文件，请按照以下步骤操作

在 src/assets/js/ 中创建新的 custom.js 文件。如果您将使用 jQuery，请将 import $ from 'jquery'; 添加到文件的顶部。
在 config.yml 中，将 src/assets/js/custom.js 添加到 PATHS.entries。
构建 (npm start)
现在您将在 dist/assets/js/ 目录中输出 custom.js 文件。

演示

本地开发

我们建议您使用以下设置之一进行本地 WordPress 开发

MAMP (macOS)
WAMP (Windows)
LAMP (Linux)
Local (macOS/Windows)
VVV (Varying Vagrant Vagrants) (Vagrant Box)
Trellis

教程

文档

展示

归功于所有那些出色的设计师和开发者。您是否有网站应该出现在这个列表上？请让我知道

贡献

以下是一些参与方式

给项目星标！
回答通过 GitHub issues 提出的问题
报告您找到的任何错误
分享您基于 FoundationPress 构建的任何主题
推文并博客您使用 FoundationPress 的体验。

拉取请求

非常欢迎提交拉取请求。请遵循以下指南：

解决问题。特性很棒，但更好的是清理和修复你在代码中发现的问题
确保你的代码无错误，并且不会引入新的错误
创建一个拉取请求
验证所有 Travis-CI 构建检查是否通过

olefredrik / foundationpress

维护者

详细信息