Sage Directives 使用教程

Sage Directives 使用教程

sage-directivesA set of Blade directives for use with Roots Sage.项目地址:https://gitcode.com/gh_mirrors/sa/sage-directives

1、项目介绍

Sage Directives 是一个为 Sage 10 项目提供的一系列 Blade 指令扩展库。它包含了针对 WordPress 核心功能的指令，以及一些用于 ACF（Advanced Custom Fields）的辅助指令。通过这些指令，开发者可以更方便地在 Sage 10 项目中使用 Blade 模板引擎，简化代码编写过程，提高开发效率。

2、项目快速启动

安装

首先，确保你已经安装了 Composer 和 Node.js。然后，在你的 Sage 10 项目根目录下运行以下命令来安装 Sage Directives：

composer require log1x/sage-directives

构建文档

安装完成后，你可以通过以下命令来构建文档：

yarn install
yarn run docs:build

使用示例

以下是一个简单的使用示例，展示了如何使用 @query 指令来查询 WordPress 文章：

@query([
    'post_type' => 'post',
    'posts_per_page' => 5,
])

@hasposts
    <ul>
        @posts
            <li>
                <a href="{{ $permalink }}">{{ $title }}</a>
            </li>
        @endposts
    </ul>
@endhasposts

@noposts
    <p>No posts found.</p>
@endnoposts

3、应用案例和最佳实践

案例1：使用 @hasfields 指令

假设你正在使用 ACF 创建一个自定义字段，并希望在 Blade 模板中检查该字段是否存在：

@hasfields('custom_field_name')
    <p>{{ get_field('custom_field_name') }}</p>
@endhasfields

案例2：使用 @wpbodyopen 指令

在 WordPress 主题中，wp_body_open 钩子允许你在页面主体的开头插入内容。使用 @wpbodyopen 指令可以轻松实现这一点：

@wpbodyopen
    <div class="site-notice">Welcome to our site!</div>
@endwpbodyopen

最佳实践

• 保持代码简洁：使用 Sage Directives 可以减少模板中的 PHP 代码，使模板文件更易于维护。
• 遵循 Blade 语法：确保你熟悉 Blade 模板引擎的基本语法，以便更好地利用 Sage Directives。

4、典型生态项目

Sage 10

Sage 10 是一个基于 Blade 模板引擎的现代 WordPress 主题框架。它提供了强大的工具和功能，帮助开发者快速构建高性能的 WordPress 主题。

Advanced Custom Fields (ACF)

ACF 是一个流行的 WordPress 插件，允许开发者创建自定义字段，并在前端显示这些字段。Sage Directives 提供了与 ACF 集成的指令，使得在前端使用这些自定义字段变得更加简单。

Blade

Blade 是 Laravel 框架中使用的模板引擎，以其简洁和强大的功能而闻名。Sage 10 集成了 Blade，使得开发者可以在 WordPress 主题中使用 Blade 模板。

通过 Sage Directives，开发者可以进一步扩展 Blade 的功能，使其更适用于 WordPress 开发。

sage-directivesA set of Blade directives for use with Roots Sage.项目地址:https://gitcode.com/gh_mirrors/sa/sage-directives