Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

入正后发现官方的这个版本主题是不保存配置了,相对于以前的版本,这次改了好多东西,很多之前的css错位,无奈只能慢慢找方法。

本教程只适合购买正版的用户,因为app.js没有被压缩

存储主题配置

默认都是存储在本地存储的,key值为_HYPER_CONFIG_;所以只能自己去找对应的方法了,然后发现有一段代码:

/**
    * Preserves the config
    */
        LayoutThemeApp.prototype._saveConfig = function (newConfig) {
            $.extend(this._config, newConfig);
            // sessionStorage.setItem('_HYPER_CONFIG_', JSON.stringify(this._config));
        },

如果不出问题,这个就是我们需要设置,它是保存主题设置到本地存储的,官方默认用sessionStorage,显然这里我们要改为localStorage更实用一些。

这段代码在右侧栏的按钮了经常使用到,但是由于官方默认注销了保存的方法代码,所以导致主题的配置文件无法保存至本地,所以我们改为如下:

/**
    * Preserves the config
    */
        LayoutThemeApp.prototype._saveConfig = function (newConfig) {
            $.extend(this._config, newConfig);
            localStorage.setItem('_HYPER_CONFIG_', JSON.stringify(this._config));
        },

这样主题本地保存配置成功。

本地主题配置读取

读取的话要在页面加载时读取,所以找到以下代码:

/**
             * Get the stored config
             */
            LayoutThemeApp.prototype._getStoredConfig = function () {
                var bodyConfig = this.body.data('layoutConfig');
                var config = DEFAULT_CONFIG;
                if (bodyConfig) {
                    config['sideBarTheme'] = bodyConfig['leftSideBarTheme'];
                    config['isBoxed'] = bodyConfig['layoutBoxed'];
                    config['isCondensed'] = bodyConfig['leftSidebarCondensed'];
                    config['isScrollable'] = bodyConfig['leftSidebarScrollable'];
                    config['isDarkModeEnabled'] = bodyConfig['darkMode'];
                }
                return config;
            },

这段代码就在上一个代码的下面,我特么找了半天,最后发现就跟在后面,顿时感觉我找了半个小时好委屈。

由于官方没有写获取本地主题设置的方法,所以这里我们要自己写一下,很简单,照抄我的就行了。

/**
             * Get the stored config
             */
            LayoutThemeApp.prototype._getStoredConfig = function () {
                var bodyConfig = this.body.data('layoutConfig');
                var config = DEFAULT_CONFIG;
                var localConfig = window.localStorage.getItem("_HYPER_CONFIG_");
                //本地存储读取
                if (localConfig) {
                    var data = JSON.parse(localConfig);
                    config['sideBarTheme'] = data['sideBarTheme'];
                    config['isBoxed'] = data['isBoxed'];
                    config['isCondensed'] = data['isCondensed'];
                    config['isScrollable'] = data['isScrollable'];
                    config['isDarkModeEnabled'] = data['isDarkModeEnabled'];
                };
                //body元素配置
                if (bodyConfig) {
                    config['sideBarTheme'] = bodyConfig['leftSideBarTheme'];
                    config['isBoxed'] = bodyConfig['layoutBoxed'];
                    config['isCondensed'] = bodyConfig['leftSidebarCondensed'];
                    config['isScrollable'] = bodyConfig['leftSidebarScrollable'];
                    config['isDarkModeEnabled'] = bodyConfig['darkMode'];
                }
                return config;
            },

保存后,主题保存到本地,并且可以在刷新时读取主题设置。

0
  • 本文分类:bootstarp4
  • 本文标签:Hyper主题设置
  • 流行热度:已超过 90 人围观了本文
  • 发布日期:2020年06月25日 - 20时18分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码