JeeSite 4.0 替换默认视图风格,自定义主题 3ff8
2018-02-28 20:59
507 查看
替换默认视图风格
每个项目的需求都不同,风格要求也不同,例如我想修改下登录页、框架页面、错误页面等待,那在JeeSite4.0中如何覆盖默认视图视图呢?1、先看下SpringMVC的视图配置:
// Beetl主题视图解析器(order越小优先级越高) BeetlViewResolver beetlThemes = new BeetlViewResolver(); beetlThemes.setPrefix("/themes/" + Global.getProperty("web.view.themeName") + "/"); beetlThemes.setSuffix(".html"); beetlThemes.setOrder(10000); registry.viewResolver(beetlThemes); // Beetl默认视图解析器(order越小优先级越高) BeetlViewResolver beetlDefault = new BeetlViewResolver(); beetlDefault.setPrefix("/"); beetlDefault.setSuffix(".html"); beetlDefault.setOrder(20000); registry.viewResolver(beetlDefault); // 默认视图定义,根据后缀渲染(.json、.xml) JsonView jsonView = new JsonView(); jsonView.setPrettyPrint(false); XmlView xmlView = new XmlView(); xmlView.setPrettyPrint(false); registry.enableContentNegotiation(jsonView, xmlView);
2、我们在看下
jeesite.yml里视图相关配置
themeName默认为
default。
# Web 相关 web: # MVC 视图相关 view: # 系统主题名称,主题视图优先级最高,如果主题下无这个视图文件则访问默认视图 # 引入页面头部:'/themes/'+themeName+'/include/header.html' # 引入页面尾部:'/themes/'+themeName+'/include/footer.html' themeName: default
3、有经验的小伙伴也许一看就明白,原来是依照谁先加载谁受用原则进行的,也就是说优先级越高的视图被找到就用谁,后面的视图将会被忽略。顺序如下:
*/src/main/resources/views/themes/default/**/*.html-->
*/src/main/resources/views/**/*.html-->
JSON/XML,先去找主题目录下的视图文件,找不到使用JeeSite默认,如果还找不到,则返回JSON或XML数据。
4、下面我们来举个例子(修改登录页)
复制
/jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html文件到
/web/src/main/resources/views/themes/default/modules/sys/sysLogin.html目录下。
然后修改,刚刚复制的
sysLogin.html视图文件内容,改成你满意的样式,这样就大功告成啦。
5、如果你想在公共的地方加载自己的css或js,JeeSite为你提供了两个公共文件,
/src/main/webapp/static/common/common.css和
/src/main/webapp/static/common/common.js文件,你可以修改它。
自定义主题,快速切换视图
1、JeeSite 4.0 版本已提供快速换肤功能,这里的换肤不是单单的换掉css改变下配色,而是,把系统中的所有的视图,包括登录页、框架页、列表页、内容页,甚至换掉grid组件。2、上一章中说到了
jeesite.yml里视图相关配置
themeName,其实上一章节的思路是让你修改和完善
default这个主题,如果你想大范围的修改完全不同的UI,建议你再起一个名字。我们可以吧这个改为你想起的视图名字,如:
good,这样你的所有视图文件,资源文件将都在这个目录下:
/src/main/resources/views/themes/good/、
/src/main/resources/static/themes/good/。另外还有两个目录,公共include的头部和尾部:
/themes/good/include/header.html、
/themes/good/include/footer.html。
3、下面如何操作就不用就不赘述了,和上一章节例子相同。
前后分离
如果你想只用JeeSite作为服务端,仅提供接口,提供客户端调用。后面我会着重一篇文章介绍前后分离的应用,如何让JeeSite成为服务端API,提供移动端或PC端(Vue或Angular)调用。相关文章推荐
- Jenkins进阶系列之——01使用email-ext替换Jenkins的默认邮件通知
- ExpandableListView替换系统默认的箭头
- 创建Material Design风格的Android应用--定义阴影和裁剪视图
- Spring Boot集成Swagger2并替换默认的UI
- VS2010 单文档+多视图+Outlook风格
- java html导出word默认打开视图设置
- java使用poi将html导出word,默认打开页面视图
- solr4.0+IKAnalyzer 中文搜索,无法查询到结果的解决方法-【布尔逻辑和 空格后默认加默认搜索字段】
- 如何替换掉日期类型值为空时的默认日期? SQL语句Replace的应用和Case when 的用法。
- 关于web开发中,图片加载失败替换为默认图片
- 用自己的keystore替换eclipse默认签名文件
- 改变文件上传控件的默认风格
- 替换ADT默认的debug.keystore
- CentOS7 默认防火墙firewalld替换为iptables
- VS2010下 MSDN经典视图H3Viewer 默认浏览器的设置
- 自动判断页面上的图片是否加载成功,不成功替换为默认图片
- OSX: 默认打开扩展视图
- android 如何替换系统的默认静态壁纸?
- 使用单文档多视图切换时的视图风格问题
- hibernate映射数据库表如何使表中字段默认值生效(如更新当传来的值为null时不替换表中值)