Node's Pretty Magical

    adonis-liquid

    4.0.3 • Public • Published

    NPM Package License Build Status Coverage Status Maintainability Dependencies Dev Dependencies Greenkeeper badge

    Adonis Liquid

    Liquid templating provider for AdonisJs framework version 4.

    Installation

    In order to use adonis-liquid

    npm install adonis-liquid --save
    

    Once you have installed the provider from npm, make sure that the ViewProvider is registered as a provider inside start/app.js file.

    const providers = [
      'adonis-liquid/providers/ViewProvider'
    ]

    Make sure the default edge provider (@adonisjs/framework/providers/ViewProvider) is not registered as they will conflict with each other.

    Compatibility

    *This package has been rebuilt for Adonis 4 and is incompatible with Adonis 3 and earlier.

    Config

    Liquid options can be added to config/liquid.js, these will be passed to the liquid engine:

      module.exports = {
        pretty: false,
        cache: false, // Recommend setting this to true for 10x big performance boost
        doctype: undefined,
        filters: undefined,
        self: false,
        compileDebug: false,
        debug: false
      }

    See the Liquid API documentation for more info on these options.

    Basic Usage

    Let’s start with the basic example of saying Hello world by rendering a liquid template. All of the views are stored inside resources/views directory and end with .liquid extension.

    Create a liquid template at resources/views/hello.liquid. You can use an adonis/ace command to create the view.

    adonis make:liquid home
    
        ✔ create  resources/views/home.liquid

    Now let's create a route that renders it:

    Route.get('/', ({ view }) => {
      return view.render('home')
    })

    The view.render method takes the relative path to the view file. There is no need to type .liquid extension.

    View Methods

    These methods are available on the view context object in controllers and middleware.

    view.share(locals)

    Share variables as a local with this template context.

    Param Type Description
    locals Object Key value pairs
    Example

    Quite often you want to share request specific values with your views, this can be done in middleware or controllers by passing an object to the share method.

    class SomeMiddleware {
      async handle ({ view }, next) {
        view.share({
          apiVersion: request.input('version')
        })
    
        await next()
      }
    }

    Inside your views, you can access it like any other variable

    p= apiVersion

    view.render(template, locals) ⇒ String

    Render a liquid template

    Returns: String - HTML rendered output

    Param Type Description
    template String View file (.liquid extension not required)
    locals Object Variables to be passed to the view

    view.renderString(string, locals) ⇒ String

    Render a string of liquid

    Returns: String - HTML rendered output

    Param Type Description
    string String String to be rendered
    locals Object Variables to be passed to the view

    View Helpers

    A number of global methods and contextual helpers are injected into all views.

    Request

    All views have access to the current request object, and you can call request methods inside your templates as well.

    p The request URL is #{request.url()}

    Also, there is a direct helper to get the URL.

    p The request URL is #{url}

    style - formerly css (deprecated)

    Add link tag to a CSS file. The file name should be relative from the public directory. Absolute links are left alone (for external CDNs etc)

    != style('style')
    // Renders <link rel='stylesheet' href="/style.css">

    script

    Similar to css, adds a script tag to the document

    != script('my-script')
    // Renders <script type="text/javascript" src="/my-script.js"></script>'

    assetsUrl

    Returns path of a file relative from the public directory.

    img(src=assetsUrl('logo.png'))
    // Renders <img src='/logo.png' />

    route

    Get actual URL for a route

    Expecting the route to be registered as following

    Route.get('users/:id', 'UserController.show').as('profile')
    a(href=route('profile', { id: 1 })) View Profile
    // Renders <a href="/users/1">View Profile</a>

    Also, you can use the controller method name.

    a(href="route('UserController.show', { id: 1 }) View profile

    auth

    If you are using the auth provider, then you can access the current logged in user using the auth.user object.

    csrfField

    If you are using the shield middleware, you can access the csrfToken and field using one of the following methods.

    != csrfField()
    // Renders <input type="hidden" name="_csrf" value="..." />

    cspMeta

    When using shield middleware, the CSP headers are set automatically. However can also set them using HTML meta tags.

    head
      != cspMeta()

    Extending views

    You can also extend views by adding your own view globals. Globals should only be added once, so make sure to use the start/hooks.js file and add them using the after providersBooted hook.

    Globals

    const { hooks } = require('@adonisjs/ignitor')
    
    hooks.after.providersBooted(() => {
      const View = use('View')
    
      View.global('currentTime', function () {
        return new Date().getTime()
      })
    })

    Above global returns the current time when you reference it inside the views.

    p The time is #{currentTime()}

    You can extract the code inside providersBooted to a different file and require it.

    Globals scope

    The value of this inside globals closure is bound to the template context so that you can access runtime values from it.

    To use other global methods or values, make use of the this.globals object.

    View.global('messages', {
      success: 'This is a success message',
      warning: 'This is a warning message'
    })
    
    View.global('getMessage', function (type) {
      return this.globals.messages[type]
    })
    p= getMessage('success')
    // Renders <p>This is a success message</p>

    Install

    npm i adonis-liquid

    DownloadsWeekly Downloads

    8

    Version

    4.0.3

    License

    MIT

    Unpacked Size

    41.3 kB

    Total Files

    26

    Last publish

    Collaborators

    • alexanderyw