moncton / jointswp
该软件包最新版本(v5.3.3)没有可用的许可证信息。
v5.3.3
2019-03-14 16:46 UTC
Requires
- composer/installers: ~1.0
This package is auto-updated.
Last update: 2024-09-21 02:19:29 UTC
README
目前使用Foundation 6.5.1。
JointsWP 要求
JointsWP 需要 Node.js v6.9.x 或更高版本。这并不意味着你需要理解 Node(甚至 Gulp)- 这只是我们确保所有开发工具都已安装的步骤。
入门
下载 JointsWP 并使用 npm 安装依赖项
$ cd my-wordpress-folder/wp-content/themes/ $ git clone https://github.com/JeremyEnglert/JointsWP.git $ cd JointsWP $ npm install
此时,JointsWP 应该已安装并在您的本地机器上完全运行。如果您更喜欢手动安装主题,也可以这样做 - 只需确保在将文件手动移动到 /themes/
目录后运行 npm install
。
使用 JointsWP
监控变化
$ npm run watch
- 监控
assets/styles/scss
目录中的变化。当文件发生变化时,SCSS 文件将被编译,与 Foundation 文件连接,并保存到/styles
目录。将创建源映射。 - 监控
assets/scripts/js
目录中的变化。当文件发生变化时,JS 文件将被编译,与 Foundation JS 文件连接,并保存到/scripts
目录。将创建源映射。 - 监控
assets/images
目录中的变化。当文件发生变化时,图像文件将被优化并覆盖原始图像保存。
使用 Browsersync 监控变化
$ npm run browsersync
这将监控与 npm run watch
相同的文件,但利用 Browsersync 进行实时重新加载和样式注入。请确保在 gulpfile.js
中更新 URL
变量以匹配您的本地安装 URL。
编译和压缩所有主题资源
$ npm run build
编译并压缩所有脚本和样式。
编译特定资源
$ npm run styles
- 编译assets/styles/scss
目录中的所有 SCSS 文件。$ npm run scripts
- 编译assets/scripts/js
目录中的所有 JS 文件。$ npm run images
- 优化assets/images
目录中的所有图像文件。
文件结构 - "放置东西的位置"
自定义样式
style.css
- 此文件实际上从未被加载,但这是设置主题名称的地方,并且是 WordPress 所必需的assets/styles/scss/style.scss
- 在这里导入所有样式。如果您创建了额外的 SCSS 文件,请确保将其导入此处。assets/styles/scss/_main.scss
- 将所有自定义样式放置于此。assets/styles/scss/_settings.scss
- 在此处调整 Foundation 样式设置。assets/styles/scss/login.scss
- 在此处放置自定义登录样式。这将生成它自己的样式表。
自定义脚本
assets/scripts/js/
- 将您的自定义脚本放置于此。每次构建过程运行时,每个 .JS 文件都将被编译和连接。
图像
assets/images/
- 将您的主题图像放置于此。每次构建过程运行时,每个图像都将被优化。