ES云平台开发者社区 加入小组

330个成员 132个话题 创建时间:2014-09-28

如何给自己的主题增加编辑区 置顶

发表于2015-05-18 2525次查看

一、适用于系统v5.5.0之前版本

编辑区新增按钮需要开启调试模式,地址如:

http://www.xxxx.com/admin/setting/developer

如果您没有自己的技术团队,不建议开启调试模式。

 

二、适用于v5.5.0及之后版本

1.编辑区介绍

2.编辑区的实现原理

3.如何配置

4.本地安装

5.插入默认数据

 

 

1.编辑区介绍

每个主题都可能会有很多个编辑区,以前的EduSoho版本只有开发者模式下才能增加编辑区, 而且只能输入html代码,这会给不懂html代码的网站运营者带来不便,现在增加了编辑区可视化操作的功能。

 

2.编辑区的实现原理

每个主题下面需要增加一个block.json文件,这个文件主要是用来存储编辑区的元信息的,比如这个主题下面有几个编辑区,每个编辑区里面有些什么元素, 主题安装的时候会读取这个文件,并创建出相应的编辑区,在后台就可以对编辑区进行编辑了。

最后调用的还是block的content字段,有一个需要注意的是需要提供一个模板用来生成html代码,block.json的写法可以参考web/themes/block.json ,模板文件可以参考src/Topxia/WebBundle/Resources/Block/bill_banner.template.html.twig和src/Topxia/WebBundle/Resources/Block/live_top_banner.template.html.twig

 

3.首先在主题跟目录下面创建一个block.json文件

这是直播轮播图编辑区的配置文件,是一个json格式的文件 

turing_top_carousel: 是编辑区的code,对应block表的code字段 

title: 编辑区的名字,对应block表的title字段 

category: 编辑区的分类,如果是主题,请与主题的code一致 

templateName: 编辑区的模板名字,用来生成html代码的。

 

如果是主题的模板: 写法是`@theme/turing/block/carousel.template.html.twig` 

如果是插件模板或者ES模板: 写法是`TopxiaWebBundle:Block:live_top_banner.template.html.twig` 

 

items: 表示这个编辑区包含哪些元素 

carousel: 表示这个元素的code,主要是唯一识别作用 

title: 表示这个元素的名字,用以提示作用 

desc: 描述信息 

count: 一共几个type实例 

type: 这个参数很重要,表示这个元素里面是什么标签,现在一共有5种标签: 

  • imglink: 是一个带链接的图片标签,即<a href="" target=""><img src=""></a> 
  • img:只有图片,不带链接 
  • link: 链接标签,即<a href target="" />value</a> 
  • text: 单行文本
  • textarea: 多行文本

default: 编辑区的默认值

 

4.本地安装主题

主题: app/console theme:register code 插件: app/console plugin:register code

 

5.插入编辑区的默认数据

配置好block.json文件和注册了主题之后,就可以到后台编辑一些默认信息了,

有点要注意的是,图片的url请硬编码成"/themes/turing/img/logo.png"这样,不要使用上传的路径,因为上传是上传到自己服务器上,如果打包给其他人用的话, 会报图片找不到的错误。

如果开启了开发者模式,开启方式/admin/setting/developer 

在编辑区的右上角会看到一个查看JSON配置的按钮,会生成一个完成的编辑区配置 

拷贝到block.json文件即可,有点要注意的是该按钮要PHP版本大于5.4.0才行,不然会报错

1回复
发表回复
你还没有登录,请先登录注册