@frctl/t

树枝 模板嵌入适配器 分形。 。 。 .

需要分形 v1.1.0 或 以上 .

要安装此适配器, 请运行此命令 :

npm install @frctl/twig

然后打开分形.js文件并添加以下行:

/*
 * Require the Twig adapter
 */
const twigAdapter = require('@frctl/twig')();
fractal.components.engine(twigAdapter);
fractal.components.set('ext', '.twig');

文档使用 Twig

要对文件使用 Twig, 请设置文件引擎到 @frctl/twig数字 :

fractal.docs.engine(twigAdapter);

以自定义配置扩展

/*
 * Require the Twig adapter
 */
const twigAdapter = require('@frctl/twig')({
    // if pristine is set to true, bundled filters, functions, tests
    // and tags are not registered.
    // default is false
    pristine: false,

    // if importContext is set to true, all include calls are passed
    // the component's context
    // default is false
    importContext: false,

    // use custom handle prefix
    // this will change your includes to {% include '%button' %}
    // default is '@'
    handlePrefix: '%',

    // set a base path for twigjs
    // Setting base to '/' will make sure all resolved render paths
    // start at the defined components dir, instead of being relative.
    // default is null
    base: '/',

    // should missing variable/keys emit an error message
    // If false, they default to null.
    // default is false
    strict_variables: true,

    // define Twig namespaces, see https://github.com/twigjs/twig.js/wiki#namespaces
    // this may break some fractal functionality, like including components via their handles and the render tag
    namespaces: {
        'Components': './components'
    },

    // use twig.js default template loader
    // this will allow including templates via relative paths, like twig.js or PHP Twig does by default
    // changing this will break including components via their fractal handles
    // changing this will break the custom render tag
    // default is 'fractal'
    method: 'fs',

    // register custom filters
    filters: {
        // usage: {{ label|capitalize }}
        capitalize: function(str) {
            if (!str) return '';

            return str.charAt(0).toUpperCase() + str.slice(1);
        }
    },

    // register custom functions
    functions: {
        // usage: {{ capitalize(label) }}
        capitalize: function(str) {
            if (!str) return '';

            return str.charAt(0).toUpperCase() + str.slice(1);
        }
    },

    // register custom tests
    tests: {
        // usage: {% if label is equalToNull %}
        equalToNull: function(param) {
            return param === null;
        }
    },

    // register custom tags
    tags: {
        flag: function(Twig) {
            // usage: {% flag "ajax" %}
            // all credit to https://github.com/twigjs/twig.js/wiki/Extending-twig.js-With-Custom-Tags
            return {
                // unique name for tag type
                type: "flag",
                // regex match for tag (flag white-space anything)
                regex: /^flag\s+(.+)$/,
                // this is a standalone tag and doesn't require a following tag
                next: [ ],
                open: true,

                // runs on matched tokens when the template is loaded. (once per template)
                compile: function (token) {
                    var expression = token.match[1];

                    // Compile the expression. (turns the string into tokens)
                    token.stack = Twig.expression.compile.apply(this, [{
                        type:  Twig.expression.type.expression,
                        value: expression
                    }]).stack;

                    delete token.match;
                    return token;
                },

                // Runs when the template is rendered
                parse: function (token, context, chain) {
                    // parse the tokens into a value with the render context
                    var name = Twig.expression.parse.apply(this, [token.stack, context]),
                        output = '';

                    flags[name] = true;

                    return {
                        chain: false,
                        output: output
                    };
                }
            };
        }
    }
});

使用外部插件

要使用的示例 树枝-js-标记下数字 :

const twigMarkdown = require('twig-markdown');
const instance = fractal.components.engine(twigAdapter);

// instance.twig refers to the twig.js instance
instance.twig.extend(twigMarkdown);

包含过滤器

路径

取出一个根相相通的路径,如果需要使其在静态的 HTML 导出中工作,则重新写入.

强烈建议您在需要链接到模板中的任何静态资产时使用此过滤器 .

路径参数应该从斜线开始,并与网根相对. 在静态 HTML 导出期间,此路径将被重写成相对当前页面的路径 .

用法 :

{{ '/css/my-stylesheet.css'|path }}

包含标签

提交

渲染标记使用提供给它的上下文数据制作一个组件(取自其手柄)。 如果不提供数据,它将使用组件配置文件中定义的上下文数据,如果它有一个.

用法 :

{% render "@component" with {some: 'values'} %}