Jeesite4修改内置页面、新增自定义主题、修改样式

大家在使用jeesite4开发项目的过程中,肯定想将jeesite4的首页换成自己设计的页面,哪怕只是换张背景图也行,因为每个项目的需求都不同,风格要求也不同。于是阿Q就找到core项目下的sysLogin.html页面一顿大改,本地运行之后效果非常不错,但是阿Q发现打jar包发测试环境的时候呢又回到了起点,真是一顿操作猛如虎,一看战绩0-5啊。接下来,阿Q就带大家学习一下jeesite4中的视图机制。

首先呢我们先了解下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);

接下来我们再看下application.yml(v4.0.x:jeesite.yml)里视图相关配置themeName默认为default

# Web 相关
web:
  
  # MVC 视图相关
  view:
    
    # 系统主题名称,主题视图优先级最高,如果主题下无这个视图文件则访问默认视图
    # 引入页面头部:'/themes/'+themeName+'/include/header.html'
    # 引入页面尾部:'/themes/'+themeName+'/include/footer.html'
    themeName: default

有经验的小伙伴也许一看就明白,MVC的视图加载机制,原来是依照谁先加载谁受用原则进行的,也就是说优先级越高的视图被找到就用谁,后面的视图将会被忽略。顺序如下:*/src/main/resources/views/themes/default/**/*.html –> */src/main/resources/views/**/*.html –> JSON/XML,先去找主题目录下的视图文件,找不到使用JeeSite默认,如果还找不到,则返回JSON或XML数据。

下面我们来举个例子(修改登录页)

  • 复制 /jeesite-module-core/src/main/resources/views/modules/sys/sysLogin.html 文件到 /web/src/main/resources/views/themes/default/modules/sys/sysLogin.html目录下。
  • 然后修改,刚刚复制的sysLogin.html视图文件内容,改成你满意的样式,这样就大功告成啦。

如果你想在公共的地方加载自己的css或js,JeeSite为你提供了两个公共文件,/src/main/webapp/static/common/common.css/src/main/webapp/static/common/common.js文件,你可以修改它。

自定义主题,快速切换视图

JeeSite 4.x 版本已提供快速换肤功能,这里的换肤不是单单的换掉css改变下配色,而是把系统中的所有的视图,包括登录页、框架页、列表页、内容页,甚至换掉grid组件。

上边说到了application.yml(v4.0.x: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

本文通过查看官方文档整理,链接地址:https://jeesite.gitee.io/docs/custom-views/,想了解更多学习知识,请关注微信公众号“阿Q说”,获取更多学习资料吧!你也可以后台留言说出你的疑惑,阿Q将会在后期的文章中为你解答。每天学习一点点,每天进步一点点。

你可能感兴趣的:(开发总结,jeesite4,修改内置页面,新增自定义主题,修改样式)