README

使用 Laravel 的 Blade 模板引擎创建主题

Cutlass 是一个包含 Laravel Blade 模板引擎的 WordPress 初始主题，使您能够比以往任何时候都更快地开发 WordPress 网站。它默认包含 HTML5 语法、Bootstrap 和 Font Awesome。

更喜欢 Twig？试试 Sprig！

由 Zach Adams 设计，Cutlass 基于以下内容构建：Roots WordPress 初始主题和 Blade WordPress 插件

特别感谢 Mikael Mattsson 和 Roots 团队制作 Blade WordPress 插件和 Roots 初始主题

功能

Laravel 的 Blade 模板引擎，用于更快地进行 WordPress 主题开发
Gulp 用于 SASS 编译、文件连接、图片压缩、JavaScript 丑化以及实时刷新
Bower 用于前端包管理
Bootstrap 兼容
HTML5 兼容
得益于 Roots，提供了大量有用的功能和主题激活

要求

PHP 5.5 或更高版本
Apache 或 nginx
WordPress 3.0.0 或更高版本

安装

克隆此仓库 - git clone git@github.com:zach-adams/cutlass-wp-theme.git 或下载 zip 文件并像常规 WordPress 主题一样安装。
进入主题目录并运行 sudo npm install 或 npm install
运行 bower install 以安装依赖项
运行 gulp dev 以编译初始 CSS 和 JS 或仅运行 gulp 以编译初始 CSS 和 JS 然后运行监视任务

主题开发

目录结构

+-- dist/ - Distribution/Production files, Gulp takes care of this folder
+-- inc/ - Various helpful functions and Blade code. All included in function.php
+-- lang/ - Language code
+-- src/ - Development Files
|   +-- fonts/ - Font Files
|   +-- img/ - Pre-optimized images (images optimized by gulp)
|   +-- js/ - Javascript files
|   +-- sass/ - Default SASS directory
|	|	+-- base/ - Basic CSS styles for HTML, Typography, Colors, etc.
|	|	+-- components/ - Wordpress Specific code, tables, buttons, etc.
|	|	+-- helpers/ - SASS helpers, variables, mixins, paths
|	|	+-- layout/ - Header, Footer, Navigation, Site, etc.
|	|	+-- pages/ - Page specific code (home, contact, etc.)
|   +-- vendor/ - Where your vendor code goes (Bower install's here)
+-- templates/ - Blade templating
|   +-- content/ - Main content for the templates
|   +-- includes/ - Various includes (Header, Footer, etc.)
|   +-- layouts/ - Fundamental layouts of the templates

安装 Gulp 和 Bower

使用 npm install -g gulp 安装 Gulp，使用 npm install -g bower 安装 Bower

Gulp 任务

gulp dev - 编译 SASS（不压缩），连接包含在 Bower 中的 CSS（在 Bower 部分中阅读），复制 main.js
gulp build - 编译 SASS（压缩），连接并压缩包含在 Bower 中的 CSS（在 Bower 部分中阅读），复制 main.js
gulp watch - 监视 src/ 和 dist/ 目录中的更改（以及所有 PHP 和 Blade 文件），并在检测到更改时触发实时刷新
gulp image - 在 src/img/ 中压缩图片到 dist/img/
gulp image-clear - 清除 dist/img/ 中的所有图片并重新压缩它们
gulp - 运行 gulp dev 然后 gulp watch

Bower

有关 Bower 的更多信息，请参阅此处。Bower 安装到 src/vendor 目录。

如何将依赖项添加到 vendor.css/vendor.js

在 Gulp 中有一个名为 main-bower-files 的插件，可以读取每个 bower 安装中的主要文件，从而确定您正在寻找哪个。在安装 Bower 包的过程中，大部分操作应自动完成，然而，有时您可能不希望某些包包含在 vendor.css 或 vendor.js 中，或者您可能希望修改默认包含的文件。以下是完成此操作的步骤。

打开您的 bower.json 文件
添加如下所示的 "overrides" 部分

{
  "overrides": {
    "BOWER-PACKAGE-NAME-GOES-HERE": {
    	"main": "**/*.js",
      	ignore": true
    }
  }
}

输入 Bower 包的名称
main 是传递给 Gulp 以进行压缩的 JavaScript 文件名称，您可以通过编辑 Bower 默认选择的文件来更改它
ignore，如果设置为 true，将在 Gulp 查找时忽略该包

Bootstrap 导航

该主题包含由 twittem 开发的 Bootstrap Nav Walker。有关如何进行更改，请参阅 Github 页面。

什么是 Blade？

引用 Laravel 的网站

Blade 是 Laravel 提供的一个简单而强大的模板引擎。与控制器布局不同，Blade 由模板继承和部分驱动。所有 Blade 模板都应该使用 .blade.php 扩展名。

幸运的是，Mikael Mattsson 开发了 Blade WordPress 插件，该插件包含了一些我们可用的自定义 WordPress Blade 部分，因此我们不必编写

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<a href="<?php the_permalink() ?>"><?php the_title() ?></a><br>
<?php endwhile; else: ?>
	<p>404</p>
<?php endif; ?>

我们可以使用

@wpposts
	<a href="{{the_permalink()}}">{{the_title()}}</a><br>
@wpempty
	<p>404</p>
@wpend

更多信息请参阅 wiki！

Blade 在本主题中如何使用？

当主题加载时，它会将自己附加到模板加载器，并通过包含的便捷 Blade 引擎运行指定的模板。您会注意到所有常规主题开发文件都位于其默认位置（single.php、page.php 等），然而，如果我们查看 page.php，它们看起来相当奇怪

@layout( 'templates.layouts.normal' )

@section('page-content')

	@include('templates.content.page')

@endsection

Layout 标签告诉 Blade 在 templates/layouts/ 中查找名为 normal.blade.php 的文件。所有正斜杠都可以替换为点以获得更好的可读性。

如果我们查看 normal.blade.php 文件，我们会发现其中还有一个告诉 Blade 加载 base.blade.php 的 Layout 标签。

基本布局是 HTML 的基本结构。它包含头部文件，设置 Body 标签，包含头部，将内容包裹在 div 中，包含页脚，并结束 HTML 文档。基本布局在调用模板时使用。

您会在 base.blade.php 的中间看到称为 @yield('content') 的标签，该标签告诉此布局允许其他 Blade 文件将内容放在那里。如果我们回到 normal.blade.php，您可以看到标签 @section('content')。这告诉 Blade，我们想在 normal.blade.php 中的 'content' 放入 base.blade.php 中的 @yield('content') 部分。

您还可以在 normal.blade.php 中看到另一个 yield。为什么这样做？这是一个很好的问题。Normal.blade.php 的目的是完全如此。一个正常布局。这是您在 WordPress 中设计典型页面的一种方式。Full-width.blade.php 的目的是一个全宽模板。当然。如果我们查看它，其中没有设置宽度并将内容居中的 'container' div。Sidebar.blade.php 是一个带有侧边的页面。看，这并没有什么困难！

回到 normal.blade.php 中的 yield。如果我们回到 page.php，您可以看到 'page-content' 部分链接到 templates/content/ 和名为 front-page.blade.php 的文件。'Content' 文件夹是您放置所有主要内容的地方，例如默认页面、单篇文章、主页和索引。

这就只剩下 Includes 文件夹了。在这里，您可以找到模板需要的各种包含文件，例如头部和页脚。

就是这样！如果你有任何问题，请告诉我，我一定会回答！zach.adams383@gmail.com

问题

查看维基了解当前已知问题

ycms / theme-base

维护者

详情