首先说明一点的就是我讲的顺序可能并不是按照一个真正开发主题的流程来做的。是我想到什么就写什么的，完全是按照我自己的理解以及开发经验来做的。所以说的并不是太好，希望大家能谅解。
-----谈一谈后端主题框架
其实我对这个后端框架并不是太了解能说的就是他能最大程度的提高主题的开发效率，而且本身框架定制了一些后台选项让主题设置起来更效率。那么我就来说说我看到的比较好的框架了。
Paste_Image.png
首先就是这个sage https://roots.io/sage/，其实sage是一套wordpress解决方案的一部分,本身是一个起步主题。其中引入了很多新的开发特性，包括：
- SASS的支持
+ES6的最新支持（开发环境）
+Webpack的编译操作
+Browsersync的自动同步加载
+Laravel's BladeLaravel模板引擎支持（后面详细说）
+CSS 框架选项 - Font Awesome ICON字体库 (可选支持)
---那么我来详细谈谈这几个地方
SASS ES6估计做前端的人都多少知道些。这个我不重点讲，主要还是说下Blade模板引擎的支持。
众所周知wp最让人恶心的就是原生php标签和html的混排使用如下代码
Paste_Image.png
这个看多了真的是让人有点崩溃，尤其是项目开发者功能新设计较多的地方。写起来确实是让你不太舒服。用laravel的同学一定都知道Laravel的视图有个很牛逼的模板是Blade，其实这样类似的还有很多什么Twig之类的。这里要说明的就是sage主题在sage-8.5.1以后新推出的sage-9.0 beta版本才是有模板的。8.0版本还是以前的版本。随着使用新的模板，对开发环境也是有要求的
Yarn是新一代的说是替代npm的node包管理工具，这个我现在用过速度上确实是比npm快了不知道多少，但是安装完的依赖确实是有一点点问题。所以说还是有点坑的。如果不熟悉这个的东西你玩去是可以用npm来替代它的。
剩下composer的支持。不知道的同学请你百度，这是新一代的php开发库依赖工具。目前Laravel，CI4、S家的框架以及一些比较新的工具都使用composer来做安装。原则上支持了PSR-0到PSR-7的开发规范模式。不过就大众来说呢4.0就已经很完美了。等掌握了这都不是什么难事。
安装主题
Paste_Image.png
我这里就直接给出github的安装吧。很简单，就是在主题开发的目录中使用composer 命令就可以把整个saga主题下载下来。
主题目录结构
Paste_Image.png
什么好说的都是典型的wp式结构。这里有几个比较关键的地方我一 一说来：
composer.json
Paste_Image.png
那么我们首先看下composer的包依赖说明,
截图中我们可以看到sage利用的最常用的PSR-4规范开发，将整个
src/lib/Sage/目录自动加载为 "namespace Roots\Sage\" 这就大大降低了开发难度，让我不用因为require的文件未引入而引起不必要的bugs麻烦。再有一点就是现在已经是PHP7.0的时代了OOP大行其道的世纪在使用原始的开发模式就有点更不上环境的需要了。而且很多新开发思路更有想法，代码也清晰了不少。那么我们接着往下看。
Paste_Image.png
啊哈~ view使用了Laravel的blade，并且使用了Laravel中很好用的config包来管理一些配置信息。具体请看Laravel API文档
最底下还有
Paste_Image.png
这是什么呢？这是在创建composer的时候CMD自动回运行的一些函数信息.我们来see see 代码~
Paste_Image.png
首先要理解这个Event事件
Paste_Image.png
所以说根据上面的文档说明。这个updateHeaders()实现了一个初始化headers的方法就是在项目创建时候会在cmd控制台中让你输入你的项目名字啊，url啊介绍等等主题的信息。
最后利用file_put_contents会写到style.css文件中完成整个主题的信息的初始化。那么我们继续看...
Paste_Image.png
恩，其实经过上面的提示也就知道这就是让亲们选择主题框架的采用的前端架构
Paste_Image.png
Font Awesome的选项 同理
Paste_Image.png
这是bower 的代码目录用于处理你的bower 处理安装完成完CSS js之后存放在哪里调用的。
好了基本项目的主题框架的创建就完成了。接下来我们继续讲解在PSR-4规范下开发主题的一些东西。
网友评论