简单修复emlog博客n+后台模版皮肤选择器

emlog教程 3年前 (2018) Mgo
0

用了一年多的N+后台模版,虽知道有皮肤设置功能,但是一直也没有用过,原来是因为皮肤设置没有保存配置参数的js代码,所以只是一个假的皮肤设置,今天使用js简单修复了一下。

原理就是使用js 的LocalStorage进行存储json对象进行保存和读取主题样式参数

下面是修复的教程

首先找到路径/admin/n/skin-config.html文件,覆盖以下代码即可

<div class="theme-config"> <div class="theme-config-box"> <div class="spin-icon"> <i class="fa fa-cog fa-spin"></i> </div> <div class="skin-setttings"> <div class="title">皮肤选择</div> <div class="setings-item default-skin"> <span class="skin-name "> <a href="#" class="s-skin-0" data-color="skin-0">默认皮肤</a> </span> </div> <div class="setings-item blue-skin"> <span class="skin-name "> <a href="#" class="s-skin-1" data-color="skin-1">蓝色主题</a> </span> </div> <div class="setings-item yellow-skin"> <span class="skin-name "> <a href="#" class="s-skin-3" data-color="skin-3">黄色/紫色主题</a> </span> </div> <div class="setings-item ultra-skin"> <span class="skin-name "> <a href="#" class="s-skin-2" data-color="skin-2">灰色主题</a> </span> </div> </div> </div> </div> <script> var saveSelectColor = {
    'Name': 'SelcetColor',
    'Color': 'skin-0'
}
	// 皮肤选择
	$('.spin-icon').click(function () {
      storageSave(saveSelectColor);
		$(".theme-config-box").toggleClass("show");
	});
	
	// 默认主题
	$('.s-skin-0').click(function () {
      storageSave(saveSelectColor);
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
	});
	
	// 蓝色主题
	$('.s-skin-1').click(function () {
      storageSave(saveSelectColor);
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-1");
	});
	
	// 灰色主题
	$('.s-skin-2').click(function () {
      storageSave(saveSelectColor);
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-2");
	});
	
	// 黄色主题
	$('.s-skin-3').click(function () {
      	storageSave(saveSelectColor);
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").addClass("skin-3");
	});




// 判断用户是否已有自己选择的模板 【站长聚集地首发】风格
if (storageLoad('SelcetColor')) {
    $('body').attr('class', storageLoad('SelcetColor').Color)
} else {
    storageSave(saveSelectColor);
    $('body').attr('class', 'skin-0')
}


// 本地缓存
function storageSave(objectData) {
    localStorage.setItem(objectData.Name, JSON.stringify(objectData));
}

function storageLoad(objectName) {
    if (localStorage.getItem(objectName)) {
        return JSON.parse(localStorage.getItem(objectName))
    } else {
        return false
    }
}
$('.skin-name').find('a').on('click', function() {
    saveSelectColor.Color = $(this).attr('data-color');
    // 保存选择项
    storageSave(saveSelectColor);

}) </script> <style> .fixed-nav .slimScrollDiv #side-menu {padding-bottom: 60px;} </style>
简单修复emlog博客n+后台模版皮肤选择器

原文地址:https://www.youngxj.cn/542.html

版权声明:Mgo 发表于 2018-08-22 8:41:40。
转载请注明:简单修复emlog博客n+后台模版皮肤选择器 | 站长聚集地

暂无评论

暂无评论...