README

安装

1. 通过Composer安装
2. 激活插件
3. 配置Grunt

用法

组件文件夹应该放在主题目录中，遵循以下结构

└── components
    ├── SomeComponent
    │   ├── assets
    |   |   └── some-jpgs-or-whatever.jpg
    │   ├── component.php
    │   ├── one-or-more-less-files.less
    │   ├── one-or-more-coffee-files.coffee
    │   ├── view.php
    │   └── _somePartialView.view.php
    └── SomeOtherComponent
        ├── component.php
        ├── one-or-more-less-files.less
        ├── one-or-more-coffee-files.coffee
        └── view.php

每个组件都会注册简码和vc_mapping设置。

component.php

VCComponent的结构如下

namespace Component;

class Text extends \DigitalUnited\Components\VcComponent
{
    // This is a VC-mapping array
    // https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

    protected function getComponentConfig()
    {
        return [
            'name' => __('Text', 'components'),
            'description' => __('Standard textmodul', 'components'),
            'params' => [
                [
                    "type" => "textfield",
                    "holder" => "div",
                    "class" => "",
                    "heading" => __( "Headline", "components" ),
                    "param_name" => "headline",
                    "value" => "",
                    "description" => ""
                ],
                [
                    "type" => "textarea_html",
                    "holder" => "div",
                    "class" => "",
                    "heading" => __( "Content", "components" ),
                    "param_name" => "content",
                    "value" => "",
                    "description" => ""
                ],
            ]
        ];
    }

    // If you want to you can have diferent views for deferent cases.
    // If you do you can override the following method.
    //
    // If view is not specified they will be rendered in the following
    // order: [view].view.php, view.php
    //
    // default is __DIR__.'/view.php'
    protected function getViewFileName() {
        return parent::getViewFileName();
    }

    // Before the parameters of the components is sent to rendering
    // you may modify their values here
    protected function sanetizeDataForRendering($data)
    {
        return $data;
    }
    
    // If you want to change what kind of element is rendered
    // You could override this method
    protected function getWrapperElementType()
    {
        return 'div';
    }

    // Add classes to the wrapping element. Should be an array
    // If a param named view exists it will be added automaticly
    protected function getExtraWrapperClasses()
    {
        return $this->param('headline') ? ['has-headline'] : ['no-headline'];
    }

    // Add attribute to the wrapper. if 'class' is specified it will be merged in
    // with classes from getExtraWrapperClasses
    protected function getWrapperAttributes()
    {
        return ['href' => 'myhref foobar', 'role' => 'button'];
    }

    // May be used to implement logic such as post-type registering or whatever
    public function main()
    {
    }
}
?>

标准组件的结构如下

namespace Component;

class Sidebar extends \DigitalUnited\Components\Component
{
    // Return key value pair with the accepted parameters for this
    // view file
    protected function getDefaultParams() {
        return [
            'param1' => 'default value1',
            'param2' => '',
            'view' => 'default',
        ];
    }

    //Same as a VcComponent
    protected function getViewFileName() { ... }
    protected function sanetizeDataForRendering($data) { ... }
    public function main() { ... }
}
?>

视图

在视图中，所有从"sanetizeDataForRendering"返回的值都是可访问的。

例如：['foo' => 'bar'] 将如下可用

<?= $foo // outputs 'bar' ?>

您还可以使用组件类，引用为 $component。例如

<?= $component->myFancyPublicFunction() ?>

您可以根据 $view-param 使用单独的视图文件，如果指定了 "view" 参数，则渲染 $view.view.php。默认：view.php

可以将视图文件分割成部分

<?= $component->renderPartial('_listItem') // renders _listItem.view.php ?>

Less和coffe，资产

可以用Grunt/gulp或任何其他方式处理。例如，请参阅https://github.com/digitalunited/roots