杨小杰博客(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2018-8-21 21:35网站搭建(15)1805查询中……小标签: emlog emlog优化 原创

用了一年多的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>
n+后台主题修复.png




发表评论:

发表评论:

  • 你这个(##私密评论仅博主可见##)在右边最新评论里能显示出来。

  • 小杰 Lv 2

    ##私密评论仅博主可见##

  • 小杰 Lv 1

    ##私密评论仅博主可见##

  • 小杰 Lv 2

    ##私密评论仅博主可见##

  • 小杰 Lv 1

    ##私密评论仅博主可见##

  • 给你来一个从开始到结尾的吧,https://pan.baidu.com/s/1tltHD2oCXmlT5Y0y6-U1Ow

  • 没想到尽然还有人在使用我发布的这款后台主题。。。受宠若惊纳~

    • Young小杰 站长

      回复了王先生的网站:没想到作者出来了

  • avatar

    哦,千呐!!! 从杰佬的站来源有2ip,以后得多留言了。

  • 蓝叶 Lv 1

    这模版做出来的时候,是有一个适用于这个模版都设置插件,用那个插件才可以设置后台主题。
    网上大多分享的都没有带上那个修改版的设置插件。

    • Young小杰 站长

      回复了蓝叶:我就觉得我的n+是阉割版,不仅很多报错,而且连test文件都没有删。

    • 蓝叶 Lv 1

      回复了Young小杰:你这篇文章造福了不少使用非完整版N+模版的站长

    • Young小杰 站长

      回复了蓝叶:主题设置鸡肋,但是看久了还是觉得新主题眉清目秀

    • 墨渊 Lv 1

      回复了蓝叶:直接修改模板设置的js就好了!