编辑区

EduSoho 的编辑区是指：网站页面中可供网校运营者编辑的区域，比如首页头部轮播图、页脚导航区等。编辑区可以在 EduSoho 后台 运营->编辑区管理 配置。

编辑区 - 图1

编辑区配置文件

block.json 是用于描述主题或者插件所有编辑区信息的文件，描述了编辑区有哪些可供编辑的元素，比如图片，文字，链接等。该文件应当放在主题的根目录下面，以 example 主题为例，那么该文件的路径为 web/themes/example/block.json。

下面是一个海报轮播图的编辑区的例子:

  1. {
  2.     "example:home_top_banner": 
  3.     {
  4.         "title": "首页顶部.轮播图 ", 
  5.         "category": "example", 
  6.         "templateName": "@theme/example/block/carousel.template.html.twig",
  7.         "items": {
  8.             "posters":{
  9.                 "title":"海报",
  10.                 "desc":"首页海报",
  11.                 "count":1,
  12.                 "type":"poster",
  13.                 "default":[
  14.                     {
  15.                         "src" : "\/themes\/example\/img\/banner_net.jpg",
  16.                         "alt" : "海报1",
  17.                         "layout" : "limitWide",
  18.                         "background" : "#3ec768",
  19.                         "href" : "",
  20.                         "html" : "",
  21.                         "status" : "1",
  22.                         "mode" : "img"
  23.                     },
  24.                     {
  25.                         "src" : "\/themes\/example\/img\/banner_app.jpg",
  26.                         "alt" : "海报2",
  27.                         "layout" : "limitWide",
  28.                         "background" : "#0984f7",
  29.                         "href" : "",
  30.                         "html" : "",
  31.                         "status" : "1",
  32.                         "mode" : "img"
  33.                     },
  34.                     {
  35.                         "src" : "\/themes\/example\/img\/banner_eweek.jpg",
  36.                         "alt" : "海报3",
  37.                         "layout" : "limitWide",
  38.                         "background" : "#3b4250",
  39.                         "href" : "",
  40.                         "html" : "",
  41.                         "status" : "1",
  42.                         "mode" : "img"
  43.                     }
  44.                 ]
  45.             }
  46.         }
  47.     }
  49. }
  • example:home_top_banner：编辑区的编码，要保证唯一，规范为：主题名称:编码区英文编码，每一个编码表示一个编辑区
  • title：编辑区的名字
  • category：编辑区所属的主题
  • templateName：编辑区需要使用到的模板文件，这是一个相对路径，@theme/theme-name 的真实路径为主题的根路径
  • items：该编辑区所拥有的元素集合，这是一个对象，是为了方便在模板里面调用
    • title：每一个 item 的标题
    • desc： 描述
    • count：item 的数量
    • type： item 的类型
    • default：item 的默认值

item的type类型

item有点类似于HTML标签，提供了一些可供网校运营者编辑的属性，比如src图片地址、href链接、target打开链接窗口的方式等。

  • poster：海报类型的轮播图，比一般的 imglink 类型的 item 设置丰富
    • mode：编辑模式，有 img 和 html 两种编辑模式，img 为图片模式，只需上传图片即可， html 为自定义 html 模式，可以自定义 html
    • layout：图片的布局模式，有 limitWide 和 tile 两种， limitWide 为限宽居中，tile 为平铺居中
    • status：是否显示此图片，1 显示，0 不显示
    • src：图片的相对路径，如果是 html 模式，此参数就会被忽略
    • alt：图片的 alt 属性，如果是 html 模式，此参数就会被忽略
    • background：背景色，如果是 html 模式，此参数就会被忽略
    • href：图片链接地址，如果是 html 模式，此参数就会被忽略
  • img：图片标签
    • src：图片的相对路径
    • alt：图片描述
  • imglink：带链接图片标签
    • src：图片的相对路径
    • alt：图片描述
    • target：target 属性
    • href：链接地址
  • text：文本标签
    • value：文本
  • link：文本标签
    • value：文本
    • href：链接地址
    • target：target 属性

编辑区模板文件

@theme/example/block/carousel.template.html.twig，开发者可以直接访问 block.json 的 items 下的属性。比如 posters 变量，这些数据是被网站运营者编辑过并重新保存到数据库里，开发者只需写相应的 HTML 代码即可。

  1.   <section class="es-poster swiper-container">
  2.     <div class="swiper-wrapper">
  3.       {% for poster in posters %}
  4.         {% if poster.status == 1 %}
  5.           {% if poster.mode == "img" %}
  6.             <div class="swiper-slide swiper-hidden" style="background: {{poster.background}};">
  7.               <div {% if poster.layout == 'limitWide' %}class="container"{% endif %}>
  8.                 <a href="{{ poster.href|default('') }}" target="_blank" ><img class="img-responsive" src="{{ poster.src|default('') }}">
  9.                 </a>
  10.               </div>
  11.             </div>
  12.           {% elseif poster.mode == "html"%}
  13.               {{ poster.html|raw }}
  14.           {% endif %}
  15.         {% endif %}
  16.       {% endfor %}
  17.     </div>
  18.     <div class="swiper-pager"></div>
  19.   </section>

使用编辑区

上一步只是完成了静态模板，这个模板需要被调用，才可以把内容渲染出来。所以开发者要在相应的 twig 页面，使用 block_show 方法把编辑区内容渲染出来。

  1. {{ block_show('example:home_top_banner') }}