聊聊一种网页在线换肤技术与实现

聊聊一种网页在线换肤技术与实现
demo
换肤相信很多网站都有，换肤过程中你感受不到网页被刷新，他是瞬间完成的操作。今天就把自己www.binarydance.top中的一种换肤技术公之于众。

之前一直在考虑怎么实现，最关键的就是换肤动态的加载css文件进行覆盖实现，当然，前提是你的整个网站的样式文件必须规范写在一个css文件里面，这样才好管理把控实现。

当前小站的css文件都在cover.css文件，主题肤色F9F2FA、pink、lightpink、FBF4FC全部把css文件移到后端服务，提供成一个借口调用，传入需要换成颜色十六进制值，然后replaceAll进行替换，然后借口输出。

本站css换肤借口，毫无保留的共享出来见代码：

package top.binarydance.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
/**
 * 
 * @ClassName: CssController  
 * @Description:TODO(换肤实现)  
 * @author: heshengjin qq:2356899074
 * @date:  2020年8月29日 下午4:08:55  
 *
 */
@RestController
@RequestMapping("/cssPrint")
public class CssController {
	
	private final static String COLOR_DEFLAUT = "F9F2FA";
	private final static String COLOR_DEFLAUT_PINK = "pink";
	private final static String COLOR_DEFLAUT_LIGHTPINK = "lightpink";
	private final static String COLOR_INDEX_VIDEO = "FBF4FC";

  @RequestMapping(value="/publicaccess/writer", method={RequestMethod.GET,RequestMethod.POST},produces="text/html;charset=UTF-8")
  public void writer(HttpServletRequest request,HttpServletResponse response,@RequestParam String colorValue) throws IOException{
  	
  	 //设置跨域访问
  	 response.setHeader("Access-Control-Allow-Origin","*");
     response.setHeader("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE");
     response.setHeader("Access-Control-Max-Age","3600");
     response.setHeader("Access-Control-Allow-Headers","x-requested-with,Authorization");
     response.setHeader("Access-Control-Allow-Credentials","true");
     
    //设置css方式输出
  	response.setContentType("text/css;charset=utf-8");
  	PrintWriter out = response.getWriter();

	  //"<style type='text/css'>"	
  	String css = cssBuilder(colorValue.trim());			   			   			      
	  //"</style>"

		 out.write(css);//或者out .println(mm);
		 out.flush();
     out.close();
    //自己处理异常try/catch,这里不做列举
  	
  }

  /**
   * 
   * @Title: cssBuilder  
   * @Description: TODO(生成css样式)  
   * @param: @param colorValue
   * @param: @return    
   * @return: StringBuilder    
   * @throws
   */
	private String cssBuilder(String colorValue) {
		StringBuilder css = new StringBuilder();

		css.append("/*");
		css.append("* Globals");
		css.append("*/");

		css.append(".index_video{");
	    css.append("background-color: #FBF4FC;");
	    css.append("}");
	  if(COLOR_DEFLAUT.equals(colorValue)){return css.toString();}
		return css.toString().replaceAll(COLOR_DEFLAUT, colorValue)
				.replaceAll(COLOR_DEFLAUT_PINK, colorValue)
				.replaceAll(COLOR_DEFLAUT_LIGHTPINK, colorValue)
				.replaceAll(COLOR_INDEX_VIDEO, colorValue);
		}

}

好了，现在换肤借口出来了，那么如何实现呢？只需要动态加载css文件，一切OK了，前端代码F12一目了然，我就不遮遮掩掩了。

<!--html文件里面添加下面代码：-->
<script src="./assets/js/loadCss.js"></script>
<!--切换颜色时候js调用-->
loadCssFromServiceByColorValue(current_click_color_value);

//loadcss.js完整代码
window.default_color_hex = 'F9F2FA'
window.current_click_color_value = window.default_color_hex 
window.domain_api = 'http://www.binarydance.top/corner/'
 //动态加载css
 function loadCssFromServiceByColorValue(colorValue){
    // $('head').children(':last').attr({
    //     rel: "stylesheet",
    //     type: 'text/css',
    //     // href: window.domain_api +"/cssPrint/publicaccess/writer?colorValue="+window.default_color_hex
    //     href: "http://localhost:7777/corner/cssPrint/publicaccess/writer?colorValue="+window.default_color_hex,
    // })
    if(colorValue.indexOf('#') != -1){colorValue = colorValue.split('#')[1]}
    var idObject = document.getElementById('db_loadCssFromServiceByColorValue');
    if (idObject != null){
        idObject.href = window.domain_api +"/cssPrint/publicaccess/writer?colorValue="+colorValue;
    }
    else{
        var link = document.createElement("link");
        link.id="db_loadCssFromServiceByColorValue"
        link.type = "text/css";
        link.rel = "stylesheet";
        // link.href = "http://localhost:7777/corner/cssPrint/publicaccess/writer?colorValue="+colorValue;
        link.href = window.domain_api +"/cssPrint/publicaccess/writer?colorValue="+colorValue;
        document.getElementsByTagName("head")[0].appendChild(link);
    }
    //存一份localStorage
    localStorage.setItem("bd_colorValue",colorValue)
 }
 //初始化
 loadCssFromServiceByColorValue(localStorage.getItem("bd_colorValue",'') || window.default_color_hex);