octobercms-侧边拦插件

octobercms 侧边拦插件,符合国内使用习惯

octobercms 后台不符合国内审美,导航栏在顶部。该插件可以实现左边导航栏,下拉选择。

1

安装

git clone https://github.com/octobercms-plugin/oc-plugin-sidenav.git plugins/jcc/sidenav

如何使用

1 在Plugin.php的regiser,注册顶部导航模块

    public function register()
    {

        BackendMenu::registerCallback(function ($manager) {
            $manager->registerMenuItems('October.System', [
                'bar' => [
                    'label'       => '模块1',
                    'icon'        => 'icon-cog',
                    'iconSvg'     => 'modules/system/assets/images/cog-icon.svg',
                    'url'         => Backend::url('october/hello/worlds'),
                    'permissions' => [],
                    'order'       => 1000
                ]
            ]);
        });
        BackendMenu::registerContextSidenavPartial(
            'October.System',
            'bar',
            '~/plugins/jcc/sidenav/partials/_system_sidebar.htm'
        );

        BackendMenu::registerCallback(function ($manager) {
            $manager->registerMenuItems('October.System', [
                'bar1' => [
                    'label'       => '模块2',
                    'icon'        => 'icon-cog',
                    'iconSvg'     => 'modules/system/assets/images/cog-icon.svg',
                    'url'         => Backend::url('october/hello/worlds'),
                    'permissions' => [],
                    'order'       => 1000
                ]
            ]);
        });
        BackendMenu::registerContextSidenavPartial(
            'October.System',
            'bar1',
            '~/plugins/jcc/sidenav/partials/_system_sidebar.htm'
        );
}

2 注册左边导航

public function registerSideNavSettings()
    {
        return [
            'hello' => [
                'label' => '导航1',
                'description' => 'rainlab.blog::lang.blog.settings_description',
                'category' => '分类1',
                'icon' => 'icon-pencil',
                'url'         => Backend::url('october/hello/worlds'),
                'order' => 500,
                'context'=>'bar',//对应模块1的标识符
                'keywords' => 'blog post category',
                'permissions' => ['rainlab.blog.manage_settings']
            ],
            'hello1' => [
                'label' => '导航2',
                'description' => 'rainlab.blog::lang.blog.settings_description',
                'category' => '分类2',
                'icon' => 'icon-pencil',
                'url'         => Backend::url('october/hello/worlds'),
                'order' => 500,
                'context'=>'bar',
                'keywords' => 'blog post category',
                'permissions' => ['rainlab.blog.manage_settings']
            ],
            'hello2' => [
                'label' => '导航3',
                'description' => 'rainlab.blog::lang.blog.settings_description',
                'category' => '分类3',
                'icon' => 'icon-pencil',
                'url'         => Backend::url('october/hello/worlds'),
                'order' => 500,
                'context'=>'bar',
                'keywords' => 'blog post category',
                'permissions' => ['rainlab.blog.manage_settings']
            ],
        ];
    }

3 在控制器中使用侧边拦导航


    public function __construct()
    {
        parent::__construct();
        $this->vars['result'] = 'Hello world!';

        \BackendMenu::setContext('October.System', 'bar');//使用顶部模块1导航栏
        \Jcc\Sidenav\Classes\SideNavManager::setContext('October.Hello', 'hello');//选中侧边拦

    }

Posted in octobercms on Sep 26, 2020


评论:

请登录 登录 评论!