Edge ヘルパーとタグ

Edge ヘルパーとタグ

このガイドでは、AdonisJS公式パッケージによってEdgeに貢献された ヘルパーとタグ について学びます。Edgeに同梱されているヘルパーについては、このガイドではカバーされていませんので、同じものについては Edge のドキュメントを参照してください。

request

進行中の HTTP リクエスト のインスタンスへの参照です。このプロパティは、ctx.view.render メソッドを使用してテンプレートをレンダリングする場合にのみ利用できます。

{{ request.url() }}

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

route/signedRoute

URL ビルダー を使用してルートのURLを作成するためのヘルパー関数です。URLビルダーとは異なり、ビューヘルパーにはフルエントAPIはありません。以下のパラメータを受け入れます。

位置 説明
1番目 ルート識別子またはルートパターン
2番目 ルートパラメータは配列またはオブジェクトとして定義されます。
3番目

以下のプロパティを持つオプションオブジェクト。

  • qs: クエリ文字列パラメータをオブジェクトとして定義します。
  • domain: 特定のドメインの下でルートを検索します。
  • prefixUrl: 出力に URL をプレフィックスします。
  • disableRouteLookup: ルートの検索を有効化/無効化します。
 
<a href="{{ route('posts.show', [post.id]) }}">

  投稿を表示

</a>

<a href="{{

  signedRoute('unsubscribe', [user.id], {

    expiresIn: '3 days',

    prefixUrl: 'https://blog.adonisjs.com'    

  })

}}">

  退会する

</a>

app

Application インスタンス への参照です。

{{ app.getEnvironment() }}

config

Edgeテンプレート内で設定値を参照するための ヘルパー関数 です。config.has メソッドを使用してキーの値が存在するかどうかを確認できます。

@if(config.has('app.appUrl'))

  <a href="{{ config('app.appUrl') }}"> ホーム </a>

@else

  <a href="/"> ホーム </a>

@end

session

セッションオブジェクト の読み取り専用コピーです。Edgeテンプレート内ではセッションデータを変更することはできません。session プロパティは、ctx.view.render メソッドを使用してテンプレートをレンダリングする場合にのみ利用できます。

投稿の閲覧数: {{ session.get(`post.${post.id}.visits`) }}

flashMessages

セッションフラッシュメッセージ の読み取り専用コピーです。flashMessages プロパティは、ctx.view.render メソッドを使用してテンプレートをレンダリングする場合にのみ利用できます。

@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 メソッドの省略形です。

<input

  type="text"

  name="email"

  value="{{ old('name') || '' }}"

/>

t

@adonisjs/i18n パッケージによって提供される t メソッドは、i18n クラス を使用して翻訳を表示するためのものです。このメソッドは、翻訳キーの識別子、メッセージデータ、およびフォールバックメッセージをパラメータとして受け入れます。

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

i18n

アプリケーションのデフォルトロケールで構成されたI18nクラスのインスタンスへの参照です。ただし、DetectUserLocaleMiddleware は、現在のHTTPリクエストのロケール用に作成されたインスタンスでこのプロパティをオーバーライドします。

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

auth

InitializeAuthMiddleware によって共有される ctx.auth プロパティへの参照です。このプロパティを使用して、ログインユーザーに関する情報にアクセスできます。

@if(auth.isAuthenticated)

  <p> {{ auth.user.email }} </p>

@end

ログインユーザーの情報を公開ページ（認証ミドルウェアで保護されていない）で表示する場合は、まずユーザーがログインしているかどうかをサイレントにチェックすることをオススメします。

{{-- ユーザーがログインしているかどうかをチェック --}}

@eval(await auth.use('web').check())



@if(auth.use('web').isAuthenticated)

  <p> {{ auth.use('web').user.email }} </p>

@end

asset

Viteによって処理されたアセットのURLを解決します。Edgeテンプレート内で アセットの参照 について詳しく学びましょう。

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

embedImage / embedImageData

embedImage と embedImageData ヘルパーは mail パッケージによって追加され、メールを送信するためにテンプレートをレンダリングする場合にのみ利用できます。

<img src="{{

  embedImage(app.makePath('assets/hero.jpg'))

}}" />

@flashMessage

@flashMessage タグは、特定のキーに基づいて条件付きでフラッシュメッセージを読み取るためのより良いDXを提供します。

条件文を書く代わりに

@if(flashMessages.has('notification'))

  <div class="notification {{ flashMessages.get('notification').type }}">

    {{ flashMessages.get('notification').message }}

  </div>

@end

タグを使用することをオススメします

@flashMessage('notification')

  <div class="notification {{ $message.type }}">

    {{ $message.message }}

  </div>

@end

@error

@error タグは、flashMessages の errorsBag キーに格納されたエラーメッセージを読み取るためのより良いDXを提供します。

条件文を書く代わりに

@if(flashMessages.has('errorsBag.E_BAD_CSRF_TOKEN'))

  <p>{{ flashMessages.get('errorsBag.E_BAD_CSRF_TOKEN') }}</p>

@end

タグを使用することをオススメします

@error('E_BAD_CSRF_TOKEN')

  <p>{{ $message }}</p>

@end

@inputError

@inputError タグは、flashMessages の inputErrorsBag キーに格納されたバリデーションエラーメッセージを読み取るためのより良いDXを提供します。

条件文を書く代わりに

@if(flashMessages.has('inputErrorsBag.title'))

  @each(message in flashMessages.get('inputErrorsBag.title'))

    <p>{{ message }}</p>

  @end

@end

タグを使用することをオススメします

@inputError('title')

  @each(message in $messages)

    <p>{{ message }}</p>

  @end

@end

@vite

@vite タグは、エントリーポイントのパスの配列を受け入れ、それに対応する script タグと link タグを返します。@vite タグに指定するパスは、vite.config.js ファイルに登録されているパスと完全に一致する必要があります。

export default defineConfig({

  plugins: [

    adonisjs({

      entrypoints: ['resources/js/app.js'],

    }),

  ]

})

@vite(['resources/js/app.js'])

2番目の引数としてスクリプトタグの属性を定義することもできます。例:

@vite(['resources/js/app.js'], {

  defer: true,

})

@viteReactRefresh

@viteReactRefresh タグは、@vitejs/plugin-react パッケージを使用しているプロジェクトに対して React HMR を有効にするためのスクリプトタグ を返します。

@viteReactRefresh()

出力される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テンプレート内で認可チェックを行うことができます。

最初の引数は能力またはポリシーの参照であり、それに続く引数はチェックで受け入れられる引数です。

参考: 能力とポリシーの事前登録

@can('editPost', post)

  {{-- 投稿を編集できます。 --}}

@end



@can('PostPolicy.edit', post)

  {{-- 投稿を編集できます。 --}}

@end

@cannot('editPost', post)

  {{-- 投稿を編集できません。 --}}

@end



@cannot('editPost', post)

  {{-- 投稿を編集できません。 --}}

@end
© 2024 AdonisJS Edit this page

On this page