在开发 WordPress 主题时,我们会用到一些全局方法,来帮助我们快速加载特定的区域的代码。如果我们在设计和开发主题的时候,也可以实现类似的功能,则在开发对应的页面和应用的时候,我们就可以根据自己的需求来进行特定区域的代码的封装。这样我们在进行后续的开发的时候,就可以简化自己的代码,同时还可以按照 WordPress 的规范提前拆分代码,在实际进行项目开发的时候,提升效率。
原理
本次实现主要是基于 Pug 自带的 Mixins 机制来实现在主题中提供自定义的函数,从而实现我们想要的内容。在原理上,和 WordPress 的 get_sidebar 之类的方法不完全一样。所以,在体验上还没有做到像 WordPress 那么方便。
实现方式
1. 创建 Mixins
在项目的根目录下创建一个 mixins 目录,并在其中创建一个 includes.pug
文件和一个 getHeader.pug
文件。
在 includes.pug
文件中添加如下代码
include getHeader
Code language: PHP (php)
在 getHeader.pug
文件中添加如下代码
mixin getHeader
p header
2. 引入 includes.pug
在你的 layouts.pug
文件中加入 includes.pug
的引入。需要注意的是,要加在 doctype 之前。
include ../mixins/includes
doctype html
html
head
Code language: PHP (php)
3. 在需要的地方调用
当你完成上述的配置后,即可在需要的地方进行调用。
extends layout
block content
+getHeader
h1= title
p hi to #{title}
Code language: PHP (php)
调用的效果如下:
如果你希望实现更加强大的功能(比如参数),可以参考 Pug 官网的 Mixins 页面。