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 入门主题所做的工作

功能

用于更快 WordPress 主题开发的 Laravel 的 Blade 模板引擎
用于 SASS 编译、文件合并、图像压缩、JavaScript 粗化以及实时预览的 Gulp
用于前端包管理的 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文件中查看，我们会发现另一个Layout标签告诉Blade加载base.blade.php。

基本布局是HTML的基本结构。它包括Head文件，设置Body标签，包含Header，将内容包裹在div中，包含footer，并结束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是一个全宽度的模板。Duh。如果我们查看它，我们可以看到没有设置宽度和中心内容的'container' div。Sidebar.blade.php是一个带有侧边的页面。看，这并没有什么太难的地方！

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

这就只剩下Includes文件夹了。在这里，你可以找到模板需要使用的各种包含文件，如Header和Footer。

这就差不多啦！如果你有任何问题，请告诉我，我一定会回答你的！ zach.adams383@gmail.com

问题

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

ycms / college

维护者

详细信息