此包最新版本(v4.3.10)没有可用的许可证信息。

为Nette和Vue.js设计的简单智能CMS。

安装量: 67,356

依赖项: 3

建议者: 0

安全: 0

星标: 15

关注者: 3

分支: 3

开放问题: 25

语言:JavaScript


README


BRJ组织

Baraja CMS

Baraja CMS 是一个用最新技术为PHP编写的新一代管理系统。更多内容请参阅官方产品页面

Baraja CMS login form

Baraja CMS(内容管理系统)是用于网站和电子商务内容管理的管理界面。内容由客户自行管理,因此需要仔细调试各个功能元素。

基本理念

Baraja CMS 被设计为一个简单、完全独立的应用程序,允许您登录网站并智能地管理它。

该包自动确保创建项目的基本软件(基本数据库表、用户配置文件、管理面板和插件支持)。

由于每个项目都有所不同,因此此管理界面可以自动适应其运行的项目。这主要得益于CMS本身具有尽可能小的依赖性,并且各个功能由安装的插件提供。然后,CMS提供它们之间的通信并将数据渲染给用户。

安装

只能通过Composer进行安装

$ composer require baraja-core/cms

安装包后,注册DIC扩展以确保配置所有服务。

请在使用common.neon

extensions:
   cms: Baraja\Cms\CmsExtension

插件和扩展

CMS自最初设计以来就被创建为可扩展的。

扩展是通过所谓的插件实现的,可以在任何地方定义。因此,CMS完全独立于特定的项目实现,我们可以结合来自不同来源的插件(最常见的是安装包中的插件和特定项目实现的插件)。

由于插件通常在特定的包中定义,而这些包不一定依赖于CMS,因此将插件放在单独的包中实现非常有意义,该包需要特定的包(如文章)以及从中获取数据的CMS本身。这个包被称为插件系统,并为所有类型的服务、组件、插件及其之间的链接定义了一个通用环境。

自定义插件和视图类型

通用插件被定义为无焦点实体。只有CMS对它有意义,因为它定义了它将被渲染的方式。

为了使定义和扩展新功能变得简单,CMS定义了一组基本布局模板和组件,插件根据用户所在的页面提供内容。

页面URL有以下形式

  • /admin(将渲染系统HomepagePlugindefault操作)
  • /admin/article(将渲染ArticlePlugindefault操作)
  • /admin/article/detail(将渲染ArticlePlugindetail操作)
  • /admin/article/detail?id=1(绘制具有detail操作的ArticlePlugin,并传递参数id=1

每个插件在其URL中保留自己的命名空间(例如 Article),并且只有它可以干扰其内容。同时,它保留了指定命名空间的所有地址组合(例如,article/create),插件开发人员可以自由使用。

记住

在CMS中渲染特定页面始终意味着创建一个具有特定视图的特定插件的实例。

插件及其默认视图

如果插件只包含一个组件,则整个页面空间都由它自己拥有。在这种情况下,开发者需要实现完整的页面布局。

为了使所有页面都相同,只有内容发生变化,我们准备了一套现成的布局组件,这些组件定义了页面元素的通用布局,并且可以很容易地被开发者使用。

例如,定义一个带有标题、面包屑导航、按钮和主要表格内容的文章概览看起来可能会很优雅

Vue.component('article-default', {
    template: `<cms-default title="Article manager" :breadcrumb="breadcrumb" :buttons="buttons">
        <b-modal id="modal-new-article" title="Compose a new article">
            <textarea class="w-100 form-control"></textarea>
        </b-modal>
        <table class="table table-sm">
            <tr>
                <th>Title</th>
            </tr>
            <tr>
                <td>We have created a new website!</td>
            </tr>
        </table>
    </cms-default>`,
    data() {
        return {
            breadcrumb: [
                {
                    label: 'Dashboard',
                    href: '#'
                },
                {
                    label: 'Articles',
                    href: '#'
                }
            ],
            buttons: [
                {
                    variant: 'primary',
                    label: 'Compose a new article',
                    icon: 'fa-plus',
                    action: 'modal',
                    target: 'modal-new-article'
                },
                {
                    variant: 'danger',
                    label: 'Click here',
                    action: 'linkTab',
                    target: '/'
                }
            ]
        }
    }
});

请注意,使用了<cms-default>组件来渲染主页布局,它作为默认布局。

具有一组组件(书签)的插件

大多数插件允许你编辑一个父实体,我们希望在详细视图中包含多个组件。

CMS原生支持将两个或多个组件链接到书签,当页面加载时,只有第一个书签和其它lazy会自动绘制,在点击书签名称后。如果用户切换多个选项卡,已打开的选项卡会保留在操作内存中,以便用户可以无需进一步延迟再次使用它们。

当页面上有至少2个组件时,书签设计会自动渲染。为此,路由必须匹配一个插件,该插件具有多个具有相同视图(属性view)的组件,或者具有与当前渲染插件(例如,SEO组件会自动渲染)具有公共接口的多个插件,并且同时对应于视图类型(行为可能不同,例如,对于比较器,当我们想要在类别中绘制不同类型的组件和在产品详情中绘制另一种类型的组件时)。

然而,组件的通用布局不能用于详情页,因为所有组件都绘制在书签内,书签系统本身根据内部逻辑自动定义CMS。

为了能够影响页面的外观(尤其是内容),CMS实现了可选扩展。

我们通常想要绘制,例如,文章的详情,同时

  • 根据URL中的ID,我们将当前文章的名称放置在页眉中
  • 根据安装的插件和可用的路由,我们将显示控制按钮
  • 我们将生成面包屑导航(这可能会根据类别和其他因素而变化)
  • 我们绘制用于编辑的内部组件(文章内容、类别管理和历史记录)
  • 我们绘制相关的组件(如SEO),但CMS会自动执行此操作
  • 我们将为用户设置其他控制属性,例如“保存全部”按钮等

为了使所有这些都能工作,需要扩展Plugin的基础类。这是通过插件在插件系统包中继承BasePlugin类来保证的,该包添加了额外的可选行为和自定义助手。

因此,在创建插件实例并将其渲染到CMS中时,首先调用所谓的“action”方法,形式为action<ActionName>,它可以接受URL参数作为函数参数。在Presenter的情况下,其行为类似于Nette框架。

技术上,在代码中可能看起来像这样

final class ArticlePlugin extends BasePlugin
{
    public function actionDetail(string $id): void
    {
        $this->setTitle('Detail článku');

        $this->addButton(new Button(
            Button::VARIANT_INFO,
            'My button',
            Button::ACTION_LINK_TAB,
            '/'
        ));

        $this->addBreadcrumb(new Breadcrumb('Hlavní strana', '/'));
        $this->addBreadcrumb(new Breadcrumb('Kategorie článku', '/category'));
        $this->addBreadcrumb(new Breadcrumb('Další kategorie', '/category-2'));
        $this->addBreadcrumb(new Breadcrumb('Název článku', '/article/detail?id=1'));
    }
}

重要注意事项

  • 在插件内部,您可以通过构造函数获取其他服务的实例(这是一个常见的Nette服务),因此最好注入ArticleManager然后使用它。
  • 标题(setTitle() 方法)可以动态定义,取决于我现在在哪篇文章上。
  • 对于更复杂的案例,也可以设置副标题(setSubtitle() 方法)。
  • 按钮(addButton()addContextMenu() 方法)可以自由定义,根据其他功能的可用性为用户提供按钮列表是一个好主意。按钮可以打开链接(在同一或新窗口中)、打开模态框或在 Vue 组件中的方法中调用 JavaScript 函数。
  • 为了使 返回 按钮正常工作,您需要使用 setLinkBack() 方法定义上一页的 URL。
  • 要启用 保存全部 按钮功能,必须通过调用 setSaveAll(true) 方法在特定的插件上。
  • 如果可能的话,为用户提供有用的链接的上下文菜单(例如,显示前端上的文章或文章的各种语言版本链接)。

加载样式和脚本

整个 CMS 的所有 CSS 样式都被压缩成一个大文件,并存储在 Baraja CDN 服务器 上。这样做的主要原因是不需要在 CMS 安装中添加任何额外的依赖项,例如,CMS 必须包含一个样式文件,并且必须返回到一个特殊的 URL。

多亏了这个原则,我们控制了所有样式,插件开发者没有机会更改它们。这是确保所有插件和组件使用基本定义的设计系统(Bootstrap + 我们的帮助器)以及 CMS 的所有部分看起来几乎相同的唯一方法。

然而,脚本是由每个插件分别定义的,以 Vue 组件的形式。

CMS 核心确保为给定插件组装所有组件,并将它们组合成一个大的 JavaScript 文件,当用户打开第一个带有插件的页面时下载到用户那里。此外,它还下载整个插件到缓存中,可以非常有效地仅控制特定的组件。这项服务作为代理隧道,允许您一次从不同的物理位置加载 JavaScript(通常是从供应商以及特定项目中的自己的组件组合中)。

Vue 组件应仅使用预构建的样式和其他 CMS 组件来尽可能地看起来相似,并且用户可以立即理解它们的主要原则。