Skip to content

Edge 辅助函数和标签

在本指南中,我们将学习 AdonisJS 官方包为 Edge 贡献的辅助函数和标签。Edge 自带的辅助函数不在本指南的范围内,请参考 Edge 文档。

request

对正在进行的 HTTP 请求实例的引用。该属性仅在使用 ctx.view.render 方法渲染模板时可用。

edge
{{ request.url() }}
{{ request.input('signature') }}

route/signedRoute

使用 URL 构建器为路由创建 URL 的辅助函数。与 URL 构建器不同,视图辅助函数没有流畅的 API,而是接受以下参数。

位置描述
第 1 个路由标识符或路由模式
第 2 个路由参数定义为数组或对象。
第 3 个

选项对象,具有以下属性。

  • qs:将查询字符串参数定义为对象。
  • domain:在特定域下搜索路由。
  • prefixUrl:为输出添加 URL 前缀。
  • disableRouteLookup:启用/禁用路由查找。
edge
<a href="{{ route('posts.show', [post.id]) }}">
  查看帖子
</a>
edge
<a href="{{
  signedRoute('unsubscribe', [user.id], {
    expiresIn: '3 days',
    prefixUrl: 'https://blog.adonisjs.com'    
  })
}}">
 取消订阅
</a>

app

应用程序实例的引用。

edge
{{ app.getEnvironment() }}

config

用于在 Edge 模板中引用配置值的辅助函数。您可以使用 config.has 方法检查某个键的值是否存在。

edge
@if(config.has('app.appUrl'))
  <a href="{{ config('app.appUrl') }}"> 首页 </a>
@else
  <a href="/"> 首页 </a>
@end

session

会话对象的只读副本。您无法在 Edge 模板中修改会话数据。session 属性仅在使用 ctx.view.render 方法渲染模板时可用。

edge
帖子浏览量:{{ session.get(`post.${post.id}.visits`) }}

flashMessages

会话闪存消息的只读副本。flashMessages 属性仅在使用 ctx.view.render 方法渲染模板时可用。

edge
@if(flashMessages.has('inputErrorsBag.title'))
  <p>{{ flashMessages.get('inputErrorsBag.title') }}</p>
@end

@if(flashMessages.has('notification'))
  <div class="notification {{ flashMessages.get('notification').type }}">
    {{ flashMessages.get('notification').message }}
  </div>
@end

old

old 方法是 flashMessages.get 方法的简写。

edge
<input
  type="text"
  name="email"
  value="{{ old('name') || '' }}"
/>

t

t 方法由 @adonisjs/i18n 包贡献,用于使用 i18n 类显示翻译。该方法接受翻译键标识符、消息数据和备用消息作为参数。

edge
<h1> {{ t('messages.greeting') }} </h1>

i18n

使用应用程序默认语言环境配置的 I18n 类实例的引用。但是,DetectUserLocaleMiddleware 会用为当前 HTTP 请求语言环境创建的实例覆盖此属性。

edge
{{ i18n.formatCurrency(200, { currency: 'USD' }) }}

auth

InitializeAuthMiddleware 共享的 ctx.auth 属性的引用。您可以使用此属性访问已登录用户的信息。

edge
@if(auth.isAuthenticated)
  <p> {{ auth.user.email }} </p>
@end

如果您在公共页面(未受认证中间件保护)上显示已登录用户信息,您可能需要先静默检查用户是否已登录。

edge
{{-- 检查用户是否已登录 --}}
@eval(await auth.use('web').check())

@if(auth.use('web').isAuthenticated)
  <p> {{ auth.use('web').user.email }} </p>
@end

asset

解析由 Vite 处理的资源的 URL。了解更多关于在 Edge 模板中引用资源

edge
<img src="{{ asset('resources/images/hero.jpg') }}" />

embedImage / embedImageData

embedImageembedImageData 辅助函数由 mail 包添加,仅在渲染模板以发送电子邮件时可用。

edge
<img src="{{
  embedImage(app.makePath('assets/hero.jpg'))
}}" />

@flashMessage

@flashMessage 标签提供了更好的 DX,用于有条件地读取给定键的闪存消息。

:::caption{for="error"} 而不是编写条件语句 :::

edge
@if(flashMessages.has('notification'))
  <div class="notification {{ flashMessages.get('notification').type }}">
    {{ flashMessages.get('notification').message }}
  </div>
@end

:::caption{for="success"} 您可能更喜欢使用标签 :::

edge
@flashMessage('notification')
  <div class="notification {{ $message.type }}">
    {{ $message.message }}
  </div>
@end

@error

@error 标签提供了更好的 DX,用于读取存储在 flashMessageserrorsBag 键下的错误消息。

:::caption{for="error"} 而不是编写条件语句 :::

edge
@if(flashMessages.has('errorsBag.E_BAD_CSRF_TOKEN'))
  <p>{{ flashMessages.get('errorsBag.E_BAD_CSRF_TOKEN') }}</p>
@end

:::caption{for="success"} 您可能更喜欢使用标签 :::

edge
@error('E_BAD_CSRF_TOKEN')
  <p>{{ $message }}</p>
@end

@inputError

@inputError 标签提供了更好的 DX,用于读取存储在 flashMessagesinputErrorsBag 键下的验证错误消息。

:::caption{for="error"} 而不是编写条件语句 :::

edge
@if(flashMessages.has('inputErrorsBag.title'))
  @each(message in flashMessages.get('inputErrorsBag.title'))
    <p>{{ message }}</p>
  @end
@end

:::caption{for="success"} 您可能更喜欢使用标签 :::

edge
@inputError('title')
  @each(message in $messages)
    <p>{{ message }}</p>
  @end
@end

@vite

@vite 标签接受入口点路径数组,并返回相应的 scriptlink 标签。您提供给 @vite 标签的路径应与 vite.config.js 文件中注册的路径完全匹配。

ts
export default defineConfig({
  plugins: [
    adonisjs({
      // highlight-start
      entrypoints: ['resources/js/app.js'],
      // highlight-end
    }),
  ]
})
edge
@vite(['resources/js/app.js'])

您可以将 script 标签属性定义为第 2 个参数。例如:

edge
@vite(['resources/js/app.js'], {
  defer: true,
})

@viteReactRefresh

@viteReactRefresh 标签为使用 @vitejs/plugin-react 包的项目返回启用 React HMR 的 script 标签

edge
@viteReactRefresh()

输出 HTML

html
<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

@can/@cannot

@can@cannot 标签允许您通过将能力名称或策略名称作为字符串引用来在 Edge 模板中编写授权检查。

第一个参数是能力或策略引用,后面是检查接受的参数。

另请参阅:预注册能力和策略

edge
@can('editPost', post)
  {{-- 可以编辑帖子 --}}
@end

@can('PostPolicy.edit', post)
  {{-- 可以编辑帖子 --}}
@end
edge
@cannot('editPost', post)
  {{-- 不能编辑帖子 --}}
@end

@cannot('editPost', post)
  {{-- 不能编辑帖子 --}}
@end