5

在 Pug 中实现类似 get_sidebar() 全局方法

 2 years ago
source link: https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在开发 WordPress 主题时，我们会用到一些全局方法，来帮助我们快速加载特定的区域的代码。如果我们在设计和开发主题的时候，也可以实现类似的功能，则在开发对应的页面和应用的时候，我们就可以根据自己的需求来进行特定区域的代码的封装。这样我们在进行后续的开发的时候，就可以简化自己的代码，同时还可以按照 WordPress 的规范提前拆分代码，在实际进行项目开发的时候，提升效率。

本次实现主要是基于 Pug 自带的 Mixins 机制来实现在主题中提供自定义的函数，从而实现我们想要的内容。在原理上，和 WordPress 的 get_sidebar 之类的方法不完全一样。所以，在体验上还没有做到像 WordPress 那么方便。

1. 创建 Mixins

在项目的根目录下创建一个 mixins 目录，并在其中创建一个 includes.pug 文件和一个 getHeader.pug 文件。

在 includes.pug 文件中添加如下代码

include getHeader

在 getHeader.pug 文件中添加如下代码

mixin getHeader
    p header

2. 引入 includes.pug

在你的 layouts.pug 文件中加入 includes.pug 的引入。需要注意的是，要加在 doctype 之前。

include ../mixins/includes
doctype html
html
  head

3. 在需要的地方调用

当你完成上述的配置后，即可在需要的地方进行调用。

extends layout

block content
  +getHeader
  h1= title
  p hi to #{title}

调用的效果如下：

如果你希望实现更加强大的功能（比如参数），可以参考 Pug 官网的 Mixins 页面。

本条目发布于2022年3月4日。属于Node.js分类，被贴了 node.js、WordPress、开发经验 标签。

← 为 Express 项目添加文件变更自动刷新 如何在阿里云上申请免费的 SSL 证书 →

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论 *

显示名称 *

电子邮箱地址 *

网站地址

在此浏览器中保存我的显示名称、邮箱地址和网站地址，以便下次评论时使用。

如果有人回复我的评论，请通过电子邮件通知我。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK