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

- Link: https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/
- Published: 2022-03-04T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#)

 * [原理](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#%e5%8e%9f%e7%90%86)
 * [实现方式](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f)
    - [1. 创建 Mixins](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#1_%e5%88%9b%e5%bb%ba_mixins)
    - [2. 引入 includes.pug](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#2_%e5%bc%95%e5%85%a5_includespug)
    - [3. 在需要的地方调用](https://www.ixiqin.com/2022/03/04/in-relation-to-realize-similar-get_sidebar-global-method/#3_%e5%9c%a8%e9%9c%80%e8%a6%81%e7%9a%84%e5%9c%b0%e6%96%b9%e8%b0%83%e7%94%a8)

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

## 原理

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

## 实现方式

### 1. 创建 Mixins

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

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

    ```php
    include getHeader
    Code language: PHP (php)
    ```

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

    ```shcb-line-numbers
    mixin getHeader
        p header
    ```

### 2. 引入 includes.pug

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

    ```php
    include ../mixins/includes
    doctype html
    html
      head
    Code language: PHP (php)
    ```

### 3. 在需要的地方调用

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

    ```php
    extends layout

    block content
      +getHeader
      h1= title
      p hi to #{title}
    Code language: PHP (php)
    ```

调用的效果如下：

![](https://files.ixiqin.com/2022/02/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-39.
png)

如果你希望实现更加强大的功能（比如参数），可以参考 Pug 官网的 [Mixins](https://pugjs.org/language/mixins.html)
页面。