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扩展名。

幸运的是，来自Blade WordPress插件的Mikael Mattsson创建了一些我们可以使用的自定义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的基本结构。它包括头部文件，设置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-evo

维护者

详情