切换系统主题风格

Posted 2022-06-26 xphhh

后台管理系统设计了多套主题皮肤，希望能随意切换主题风格。

在只有一套主题的时候，是在主页面上引入该主题样式：

<link href="/public/themes/default/css/main.css" rel="stylesheet" type="text/css" />

切换主题，其实就是切换css路径中的default为不同主题的值。如切换到block主题，只需修改为：

<link href="/public/themes/block/css/main.css" rel="stylesheet" type="text/css" />

每次切换主题，来修改此处的代码，然后再显然不是一个Good idea.

 

下面记录下自己的两个想法：

一、通过在spring配置文件中设置project.theme；

project.theme = block

　　在后台通过@Value等方法读取；

@Value("$project.theme")
    private String projectTheme;

　　然后通过springMVC的Model、Map、ModelMap或者ModelAndView传到前端主页面；

model.addAttribute("projectTheme", projectTheme);

　　主页面上通过input来保存这个主题值；

<input type="hidden" id="theme" th:value="$projectTheme" >

　　然后js获取input的值，创建link标签，设置其href属性值，追加到主页面head中，

var theme = $("#theme").val();
loadTheme(theme);

function loadTheme(theme)
    var link = document.createElement(‘link‘);
        link.type = ‘text/css‘;
        link.rel = ‘stylesheet‘;
        if(theme)
            link.href = ‘/public/themes/‘+theme+‘/css/main.css‘;
        else
            link.href = ‘/public/themes/default/css/main.css‘;
        var head = document.getElementsByTagName(‘head‘)[0];
        head.appendChild(link);

　　实现主题通过配置文件切换。

 

二、通过在页面上增加切换主题按钮，点击后修改数据库的主题字段值；

　　后台读取该字段的值，传到前端主页面；

　　后续步骤可以参考上面的。

　　在页面上点击切换按钮，就修改了主题风格。

 

备注:其实一开始是想这样修改的，然而没有成功：

<link href="/public/themes/$theme/css/main.css" rel="stylesheet" type="text/css" />

　　

欢迎大佬教育指导！