文章正文

 EduSoho如何自定义新增编辑区？下文，绿盟小弟整理带来「EduSoho自定义新添编辑区教程」，主要分为两方面：适用5.5.0版本之前及之后，希望可以帮助到您。

• 适用于系统v5.5.0之前版本
  
  编辑区新增按钮需要开启调试模式，地址如：
  
  http://www.xxxx.com/admin/setting/developer
  
  如果您没有自己的技术团队，不建议开启调试模式。
  
• 适用于v5.5.0及之后版本
  
  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才行,不然会报错

文章来自绿盟(xDowns.com)转载请注明来路。

上一篇文章：一张图告诉你亚马逊有多强大 []

相关文章

相关软件