eight/page-bundle

Symfony CMS Bundle 全页编辑工具

安装次数: 1,811

依赖: 0

推荐者: 0

安全: 0

星标: 3

关注者: 4

分支: 0

开放问题: 0

语言:JavaScript

类型:symfony-bundle


README

此扩展包允许您在几分钟内构建可编辑的CMS页面,而无需太多地改变常规的symfony开发流程。支持Symfony 2+至3.3(symfony 4.0在路线图上)。只需确保选择正确的版本。

  • 1.0.x用于Symfony 2.x/3.x和Twitter Bootstrap 3.3.x
  • 1.3.x用于Symfony 3.x和Twitter Bootstrap 4.x

路线图

  • 一些额外的测试
  • 简化管理扩展包切换
  • 简化存储切换
  • Symfony 4兼容性

功能

  • 完全可编辑的页面属性(标题、URL、元数据、OG等)在管理部分内
  • 完全可编辑的HTML布局,带有预定义小部件的块树在管理部分内
  • 自动表单构建以实现原地内容编辑
  • YML内容加载/导出程序,用于编程页面编辑
  • 非常轻量且易于管理!

安装

您可以从其存储库 https://github.com/matteocaberlotto/eight-cms 克隆沙盒,或者如果您需要在现有项目上安装CMS,请遵循以下说明。

  1. 通过composer要求

    • composer require eight/page-bundle
  2. 安装和配置依赖项(参考每个安装文档)

    • sonata admin bundle(用于管理结构和导航)
    • raindrop routing bundle(用于动态路由)
    • fos user bundle(这不是严格必需的)
    • symfony/templating(仅适用于某些symfony版本)
    • symfony/assetic-bundle
    • 您还需要手动包含Twitter Bootstrap资产(3.3.*用于1.0.*和4.*用于1.3.)
  3. 如果需要配置以下功能之一,请添加以下行到config.yml

  • 通用编码
  • 默认标题
  • 默认描述
  • 区域设置
  • 检测到区域设置后重定向到主页
  • 默认控制器(您可以绑定自定义控制器到页面,否则将使用默认控制器)
  • 默认布局
  • 加载到每个页面中的资产
  • 编辑时附加到管理器的资产
  • 您想要在管理区域中编辑的元数据
    eight_page:
        encoding: utf-8
        seo_title: My website
        seo_description: My very cool website
        locales: [it]
        redirect_home: homepage
        default_controller: EightPageBundle:Default:index
        default_layout: AppBundle:Default:layout/default.html.twig
        js:
            - /bundles/app/js/bootstrap.min.js
            - /bundles/app/js/main.js
        admin_js:
            - /bundles/app/js/admin.js
        css:
            - /bundles/app/css/bootstrap.min.css
            - /bundles/app/css/main.css
        admin_css:
            - /bundles/app/css/admin.css
        http_metas:
            name:
                - ['keywords', 'text', { required: false }]
                - ['description', 'text', { required: false }]
                - ['robots', 'text', { required: false }]

                - ['google-site-verification', 'text', { required: false }]

                - ['twitter:title', 'text', { required: false }]
                - ['twitter:image', 'text', { required: false }]
                - ['twitter:description', 'text', { required: false }]

            property:
                - ['og:title', 'text', { required: false }]
                - ['og:url', 'text', { required: false }]
                - ['og:type', 'text', { required: false }]
                - ['og:image', 'text', { required: false }]
                - ['og:description', 'text', { required: false }]
                - ['og:site_name', 'text', { required: false }]

            http_equiv:
                - ['Content-type', 'text', { required: false }]
  1. 使用php bin/console doctrine:schema:update --force更新数据库

创建页面

要创建页面,您至少需要1个布局和1个块。布局简单地是一个至少包含1次调用render_page_content()的symfony页面,这是动态附加块的twig函数。您可以有多个插入点,只需确保通过传递标签作为参数为每个一个命名。例如:render_page_content('head')。一旦插入点存在,在管理部分中,您可以附加通过配置定义的任何小部件之一。

一个示例布局可能如下所示

<html lang="{{ locale }}">
    <head>
        {{ render_encoding() }}

        {{ render_metadatas() }}

        <title>
            {% block title %}
                {% if page is not null %}{{ page.title }}{% else %}My website{% endif %}
            {% endblock %}
        </title>

        {{ eight_stylesheets() }}
    </head>
    <body>
        <header id="head">
            {{ render_static_blocks('head') }}
        </header>

        <div class="container" id="main-content">
            {{ render_page_content('default') }}
        </div>

        <footer class="footer">
            {{ render_static_blocks('footer') }}
        </footer>

        {{ eight_javascripts() }}
    </body>
</html>

您可以使用render_metadatas()动态渲染管理部分中编辑的元数据。使用eight_stylesheets()动态将样式表资产附加到页面(请继续阅读以了解如何)。使用render_page_content()动态将可编辑的HTML块附加到页面。使用render_static_blocks()动态将可编辑的HTML块附加到所有渲染此插槽的页面。使用eight_javascripts()动态附加JavaScript资产。

默认情况下没有添加小部件,但您只需在config.yml中添加此行即可使用一些默认设置

    - { resource: '@EightPageBundle/Resources/config/widgets.yml' }

要嵌套小部件,请在块模板内调用render_inner_blocks(current_block)方法。请注意,'current_block'变量作为参数是必需的。您还可以添加一个标签作为第二个参数,以将多个子项添加到当前块的不同位置。例如:

<div class="row content {{ html_classes }}">
    <div class="col-sm-8 pull-right">
        {{ render_inner_blocks(current_block, 'right') }}
    </div>
    <div class="col-sm-4 pull-left">
        {{ render_inner_blocks(current_block, 'left') }}
    </div>
</div>

此块模板允许您将元素添加到左侧和右侧列(不混合)。

小部件类似于symfony控制器,具有更多功能:预定义布局和可编辑变量数组。每个变量都有自己的数据库槽位(即使没有填充)。您必须将其用作symfony控制器,例如:

<?php

namespace Eight\PageBundle\Widget;

use Eight\PageBundle\Variable\Config\Config;

class PageLink extends AbstractWidget
{
    public function getVars()
    {
        // you can put custom logic in here

        return array(
            /**
             * This is a standard variable. You can assign all the variables
             * you need the old fashion way and they will not be altered.
             * They are converted to "mixed" types with predefined value.
             * Instead, when no value is given, variable is converted to a
             * value read from database and editable in the admin section.
             */
            'my_variable' => 4,

            /**
             * Since this variable has no value it is intended to be an
             * editable label.
             */
            'html_classes',

            /**
             * When more complex fields are required, you have to use the "Config"
             * class to specify options.
             */

            'wider_element' => new Config(array(
                'type' => 'checkbox', // eg: a checkbox you can use to tweak the template
                )),

            'html_icon_class' => new Config(array(
                'type' => 'icon', // an editable icon
                )),

            'page' => new Config(array(
                'type' => 'entity', // an editable entity
                'class' => 'Eight\PageBundle\Entity\Page',
                )),
            );
    }

    public function getLayout()
    {
        return 'EightPageBundle:Widget:page_link.html.twig';
    }

    public function getName()
    {
        return 'page_link';
    }

    public function getLabel()
    {
        return 'Link to a page';
    }
}

此小部件有1个“正常”变量和3个可编辑变量:第一个变量与您在symfony控制器中声明的变量类似,并且它将与其值一起传递而不会引用数据库。而其他所有变量都将填充数据库值:第一个可编辑的是简单的标签(最多255个字符),第二个是您可以从中选择的所有fontawesome 4.7列表中的图标,最后一个是指向指定类的实体链接。还有更多类型可供选择。为了创建小部件,您必须实现所有抽象方法、一个唯一名称以进行识别和布局。您还必须使用eight_page.widget标签注册其类。

总结一下,小部件创建包括3个步骤

  • 创建小部件类
  • 创建小部件布局
  • 使用标签注册小部件类

这就完成了。

如果您想将相同的块添加到多个页面,请使用render_static_content()方法(该方法也接受单个字符串标识符作为参数)。例如,您可以将“原始HTML”类型的静态块添加到所有页面,并用google analytics脚本或facebook sdk或其他应在所有页面中渲染的内容填充。

为了使jQuery UI可排序功能正常工作,有一个单一的要求:每个小部件模板必须有一个单一的父HTML标签(通常是div或span)。

有时您可能需要调整管理中的少量CSS,以处理更复杂的布局编辑情况。编辑器在管理部分添加了许多自定义类,您可以用于驱动渲染。“预览”按钮将删除编辑类,以便您可以随时检查页面结果。您还可以绑定自己的javascript“插件”,以便在块修改时重新加载它们,例如:

Editor.addPlugin(function () {
    // logic to init your plugin (EG: masonry reset/refresh...)
});

注意,其他所有内容的工作方式与symfony标准相同,因此您可以将静态内容与CMS内容混合(请注意,在具有相同路由路径的情况下,cms的动态路由优先级更高)。

Twig辅助函数

  • render_title():渲染从CMS页面获取的页面标题。
  • render_encoding():渲染页面编码。
  • render_metadatas():渲染在管理中编辑的页面元数据。
  • render_page_content(type):渲染给定类型的所有页面块。
  • render_inner_blocks(block, type):渲染给定块和类型的所有子块。
  • render_static_blocks(type):渲染当前页面上给定类型的所有静态页面块。
  • eight_stylesheets():渲染当前页面及其子块的样式表。
  • eight_javascripts():渲染当前页面及其子块的javascript。
  • eight_body_class():渲染页面body类。
  • is_current_path(name):如果当前路径名称是$name,则返回'active'。
  • is_host(test):如果测试包含在当前主机中,则返回true。
  • is_route(path):如果当前路径等于路径或其索引(接受标签或数组),则返回true。
  • if_route(routes, string):如果当前路由在路由中,则返回字符串,否则返回空字符串。
  • current_index(label, increment = false):一个简单的运行时计数器助手,可以用于统计无关的事物。您可以增加指定标签的计数器或获取其值。
  • i18n_path(path, params):与 twig 的 path() 方法类似,用于 CMS 页面。它将搜索名称为 $path、路径为 $path 或标签为 $path 的页面。
  • i18n_path(page):返回页面的标题。

更多功能

您也可以向任何小部件添加 js() 或 css() 方法来动态添加资产。只需返回一个有效的资产路径数组。

建议使用 i18n_path() 助手代替 twig 的 path() 函数来链接到 CMS 页面。它功能完全相同,但略有改进:您还可以根据标签“搜索”页面。例如:{{ i18n_path('homepage') }} 将使用当前语言环境链接到带有“homepage”标签的页面。此助手在管理员模式下也会链接到编辑模式(链接将指向页面的可编辑版本,这对于数据输入过程非常有用)。

建议

尽量少向现有小部件添加新变量,因为这可能导致 twig 错误(尽管大多数已处理)。一个良好的习惯是始终添加一个 html_classes 变量,以向任何块添加自定义类。

沙盒

请查看沙盒安装示例:https://github.com/matteocaberlotto/eight-cms

演示

一个具有可访问管理员界面的工作演示版本可在 http://cms.eightweb.it 获取。