创建 Egg.js 插件 egg-view-liquid

date
Sep 2, 2021
slug
egg-view-liquid
status
Published
tags
Egg.js
SSR
summary
shopify 店铺的模版均为 liquid，但是 egg 暂时不支持。阅读文档后进行插件开发
type
Post
安装使用创建 liquid 文件渲染文件引入注意事项

安装

npm i egg-view-liquid --save

使用

// {app_root}/config/plugin.js
exports.liquid = {
  enable: true,
  package: 'egg-view-liquid',
};

// {app_root}/config/config.default.js
exports.view = {
  mapping: {
    '.liquid': 'liquid',
  },
};

// liquid config
exports.liquid = {};

创建 liquid 文件

// app/view/hello.liquid
hello {{ data }}

渲染

// app/controller/render.js
exports.liquid = async ctx => {
  await ctx.render('hello.liquid', {
    data: 'world',
  });
};
该文件将被编译和缓存，你可以更改config.liquid.cache = false禁用缓存，默认情况下在本地环境中是禁用的。

文件引入

可以包括相对和绝对文件；相对文件从当前文件路径解析。
// app/view/a.liquid include app/view/b.liquid
{% render 'view/b' %}
绝对路径从 app/view 解析
// app/view/home.liquid include app/view/partial/menu.liquid
{% render 'partial/menu' %}

注意事项

  1. 当你使用该插件引用其他模版时需要注意引用路径: partial/xxx 而不是 /partial/xxx
  1. LiquidJs 现在并不支持在文件中直接使用方法调用例如: Hello {{helper.data()}} 请用 tag/plugin 代替
  1. 如果你尝到了在 ejs 中 contentfor 的甜头, 在 LiquidJs's 中使用 block 即可.
 

© i7eo 2017 - 2024