jpress模板开发

目录

前言

JPress 是很好，但是官方文档就不怎么友好了。这里记录一下碰到的难点，希望对大家有帮助

1.css样式路径问题

由于使用的是enjoy（from jfinal）模板殷勤，发现某些css样式的路径会有问题。例如下图

 这样写。浏览器在访问的时候，定位到的是网站  根目录/static/image/4.jpg .就会找不到图片。 所以在前面加上模板的路径才行（可以参照其他资源的url来写即可）

 

 

 

2.模板文件命名问题。

参照官网网说的是自定义模板页扩展

然后如果 你的命名是 index-1.html 。那么 是无法找到的，会跳转到index.html
也就是文件名中间不能有-符号

3.模板参数配置问题 （根据轮播图举例说明）

说到这里，可以使官方文档就没有仍和说明了。只有一个简单的#option()说是读取后台的配置信息的意思。
怎么获取，怎么赋值，怎么定义。都没说。

关于轮播图
image
就这么点介绍，也没说明，我晕。

梳理了一下，需要克服以下几个问题。

  • 如何赋值这个参数
  • 如何获取这个参数

这里就要说道官方自带的这个4个模板了，很有参考价值。只能通过看代码能够解决问题了

如何赋值这个参数

这里需要模板中的设置页面

image

也就是上图这里。这个setting.html写好后，jpress会集成在模板的设置菜单下面

image

那么如何赋值,如何定义属性参数，这里借鉴了轮播图的代码，梳理如下
核心代码就这里

   <h4 class="form-header">hehx轮播图设置</h4>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">首页幻灯片</label>
        <div class="col-sm-6">
            <textarea rows="5" class="form-control"
                      placeholder="幻灯片地址..."
                      name="lbu111">#option("lbu111")</textarea>
            <p class="text-muted"> 一行一条数据。 </p>
        </div>
    </div>
  1. 上面的 textarea元素的 name属性，必须要唯一，这个会反应在db字段里面（option表的key字段）
  2. 然后内容上，是通过回车来进行多个参数的区分的
  3. #option(“参数名”) 这个是固定写法
    配置好上面信息后，就可以在后台模板的设置页面看到了
    image

保存好后，数据库就有对应参数了（这里没有换行是navicat显示的问题）

image

如何获取这个参数

同样看到官方模板calmlog的index页面
image
这里通过option(参数名)的方式 就能获取到了
下图是我获取上面定义的参数写法
image

    #if(option('lbu111'))
          #for(slideaa : linesOption('lbu111'))
             <img class="d-block w-100" src="#(slideaa)"> 
          #end
        #end
  • slideaa 是取出参数数组的临时变量
  • option（） 这个是判断参数是否存在
  • linesOption（ ）这个是根据回车来截取数组
  • <img class="d-block w-100" src="#(slideaa)"> 这个就是列表渲染的写法，其中#(slideaa)就是渲染出之前配置的参数

后台代码

对于这些模板语法的写法，对应java端的处理在这里

package io.jpress.web.functions;
public class JPressCoreFunctions

image
可以看到里面的方法对应上了模板页面的模板方法

后续发现会继续补充

posted @ 2022-02-16 12:29  何浩翔  阅读(1044)  评论(0)    收藏  举报