shadow-cljs编译的clojurescript-antd项目使用less实现运行时主题切换

antd cljs
cljs
发布日期:   2020-03-21
文章字数:   1.5k
阅读时长:   6 分
阅读次数:  

项目页面上动态切换主题

简书地址

最近公司的电商定制平台的项目继上了国际化，又要搞多主题了，又让我练了一把手。

实现了，也就那么回事，但是动手之前的犹豫和无思路也着实让我慌了一逼。

需求分析

看了antd官网上定制主题上的主题介绍，也看了其他博主的一些手段，比较多的还是打包时将某些主题色打包到代码里，运行起来就是这个主题色。

一来这个方式是静态的，通过打包之前去设置一些config，不是最终想要的，二来里面的介绍要么就是借助webpack，要么就是用Umi。巧的是我们项目用clojurescript开发，只用了antd的component，并没有用到Antd Pro后台的所有功能，所以官网的介绍对我来说就是个大大的“0️⃣”

运行时切换主题，显然只在编译时打包less是不够的的，必须是走在浏览器端动态修改less的方案。

有了目的就好办了，对于我一个前端菜鸡来说，分析到这一步已经涨知识了。

下面进入解决方案正题。

美丽的插件

首先迎面走来的，昂首挺胸的美女就是antd-theme-generator，非常感谢，帮大忙了。

核心代码就补贴了，作者太懒，不论是github还是npm库里，这个插件的README.md文件写的有点马虎。

参考了简书上antd在线换肤定制功能这位仁兄的介绍，我的代码做了如下改动

1. 增加依赖

npm i antd-theme-generator --save

2. 引入文件，根据我的项目修改文件内容

在resources/public下新建less目录，创建2个文件

  • main.less

    //内容为空就行，防止生成color.less报错

  • vars.less

    @import "~antd/lib/style/themes/default.less"; //引入antd的变量文件，实现变量的覆盖
@primary-color: #800019;
@link-color: #800019;
@btn-primary-bg:#800019;
//color.less中加入css原生变量：--PC
:root { 
  --PC: @primary-color;   
  --BPB: @btn-primary-bg;
}

  • 项目根目录新建color.js文件，内容如下：

    const path = require('path');
const { generateTheme, getLessVars } = require('antd-theme-generator');
const options = {
stylesDir: path.join(__dirname, './resources/public/less'),    //对应具体位置
antDir: path.join(__dirname, './node_modules/antd'), //对应具体位置
varFile: path.join(__dirname, './resources/public/less/vars.less'), //对应具体位置
mainLessFile: path.join(__dirname, './resources/public/less/main.less'), //对应具体位置
themeVariables: [
  '@primary-color',
  '@secondary-color',
  '@text-color',
  '@text-color-secondary',
  '@heading-color',
  '@layout-body-background',
  '@btn-primary-bg',
  '@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './resources/public/css/color.less'),
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
});

  • 修改index.html文件，如下

    <!DOCTYPE html>
<html lang="cn">
<head>
  <title>门店定制系统</title>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <link href="/css/antd.min.css" type="text/css" rel="stylesheet">
  <link href="/css/redantd.css" type="text/css" rel="stylesheet">
  <link href="/css/color.less" type="text/css"  rel="stylesheet/less"/>
</head>
<body>
<!--这个代码不能放在最后-->
<script>
window.less = &#123;
  async: false,
  env: 'production'
&#125;;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Our JavaScript will modify the DOM inside this element -->
<div id="app"></div>
<!-- All our ClojureScript gets compiled into this file -->
<script>
document.write("<script type='text/javascript' src='/js/app.js?v="+Math.random()+"' type='text/javascript'><\/script>");
</script>
</body>
</html>

  • 修改package.json，命令前面增加node color

    "scripts": {
  "start": "node color && shadow-cljs server",
  "build": "node color && shadow-cljs release app"
}

    3. 切换测试

    项目运行后页面比如页面有个Button的type=”primary”那它默认是红色的。

在浏览器的控制台执行如下命令

window.less.modifyVars(
    {
        '@primary-color': '#722ed1',
        '@link-color': '#722ed1',
        '@btn-primary-bg': '#722ed1',
    }
)

会发现颜色变成了酱紫色。

到此，实现逻辑修改完。

在clojurescript中实现动态切换

页面view部分

在页面布局文件的右上角加了个切换下拉按钮。

(def ^:private theme-map
  {:#800019 "喜庆红"
   :#4880FF "拂晓蓝"})

;; 主题菜单
(defn dropdown-theme []
  [:> ant/Menu
   {:className "menu"
    :onClick   (fn [menu]
                 (let [value (js->clj menu :keywordize-keys true)]
                   (rf/dispatch [:theme/generate-theme (:key value)])))}
   [:> MenuItem {:key "#800019" :title (:#800019 theme-map)
                 :style {:background "#800019"
                         :color "white"
                         :border-radius "5px"}}
    [:span (i18n-str (:#800019 theme-map))]]
   [:> MenuItem {:key "#4880FF" :title (:#4880FF theme-map)
                 :style {:background "#4880FF"
                         :color "white"
                         :border-radius "5px"}}
    [:span (i18n-str (:#4880FF theme-map))]]])

;;在某个view组件里写入内容
[:div {:style {:margin-left 20
                         :font-size   "14px"
                         :font-family "PingFangSC-Medium,PingFang SC"
                         :font-weight 500
                         :color       "rgba(0,0,0,1)"}}
           [:> ant/Dropdown {:overlay (reagent.core/as-element [dropdown-theme])}
            [:div {:className "theme-setting"}
             [:span (i18n-str "颜色")]]]]

切换事件

(ns store-pc.common.theme
  (:require
   [re-frame.core :as rf]
   [kee-frame.core :as kf]
   [store-pc.common.storage :as storage]))

(defn- gen-theme [color]
  #js{
      "@primary-color"   color
      "@link-color"      color
      "@btn-primary-bg"  color
      })

(kf/reg-controller
 :theme-controller
 {:params (constantly true)
  :start  [::set-theme-by-local]})

;;如果页面刷新的话从localstorage里获取
(kf/reg-event-fx
 ::set-theme-by-local
 (fn [_ [_ _]]
   (when-not @(rf/subscribe [:theme/now-theme])
     (rf/dispatch [:theme/generate-theme (storage/get-current-theme)])
     )))

(rf/reg-event-fx
 :theme/generate-theme
 (fn [{:keys [db]} [_ color]]
   (js/console.log "设置主题为:" (gen-theme color))
   (.modifyVars (.-less js/window ) (gen-theme color))
   (storage/set-current-theme color)
   {:db (assoc-in db [:global :theme] color)}))

(rf/reg-sub
 :theme/now-theme
 (fn [db]
   (get-in db [:global :theme])))

里面唯一用到的框架外的就是存储localstore和从localstore里拿值，核心代码就两个：

(defn get-local-storage [key]
  (.getItem js/localStorage key))

(defn set-local-storage [key value]
  (.setItem js/localStorage key value))

遇到的问题

  1. index.html里一开始引入的less.min.js版本太高，得降成2.7.2才不会报错，否则modifyVars有错误提示
  2. js里的window.less.modifyVars(obj)这句调用在cljs里不会写
  3. 上面一条解决了，但是modifyVars的参数不会传，后来查到原来是用 #js定义的就是原始js的意思。

参考

antd在线换肤定制功能
themeChanger demo

antd cljs
赏
评论
  目录