位置:設計主頁 > 網站制作 > 建站經驗 >

一套非常優秀的純靜態后端管理模板LightYearAdmin

來源:設計前沿網 作者:佚名 時間:2019-09-30 10:18

光年后臺管理模板(Light Year Admin)是一個基于Bootstrap v3.3.7的后臺HTML模板。作為后端開發人員,自己在做一些簡單系統時,經常為了后臺的模板煩惱,因此今天向大家介紹一個對后端開發人員比較友好的管理模板,模板的作者本人也是一名開發人員,因此結合后端人員一些特點而開發的一套基于Bootstrap的管理模板,界面真的非常漂亮,而且功能也能滿足大多數人需求!


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


Gitee坐標

https://gitee.com/yinqi/Light-Year-Admin-Template

https://gitee.com/yinqi/Light-Year-Admin-Using-Iframe

作者考慮到不同人群的開發習慣和方式,一共分為兩半版本,一種是自帶tab標簽頁的iframe版,另一種則是普通的頁面版,可根據自己需要和業務需求選擇不同的版本。

模板說明

  • 普通版

網站主題切換,有默認白色,黑色,和漸變藍綠色的半透明三種。另外:logo、頂部和側邊欄可單獨調整顏色(黑色和半透明主題時選擇白色不變)。

增加主題切換,增加了很多css,如果你不需要有主題切換功能,可將多余的內容刪除掉。


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


  • HTML頁面中刪除掉<!--切換主題配色-->之間的內容
  • js中刪除 line 137 - line 146
  • css中刪除 line 2937 - line 3946

主題切換并沒有存到cookie中,大家根據自己實際情況,做cookie存儲或者其他方式。


  • jquery-cookie保存設置示例
	// 讀取cookie中的主題設置
	var the_logo_bg = $.cookie('the_logo_bg'),
	 the_header_bg = $.cookie('the_header_bg'),
	 the_sidebar_bg = $.cookie('the_sidebar_bg'),
	 the_site_theme = $.cookie('the_site_theme');
	console.log(the_logo_bg);
	if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
	if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
	if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
	if (the_site_theme) $('body').attr('data-theme', the_site_theme);
	
	// 設置主題配色
	setTheme = function(input_name, data_name) {
	 $("input[name='"+input_name+"']").click(function(){
	 $('body').attr(data_name, $(this).val());
	 $.cookie('the_'+input_name, $(this).val());
	 });
	}
	setTheme('site_theme', 'data-theme');
	setTheme('logo_bg', 'data-logobg');
	setTheme('header_bg', 'data-headerbg');
	setTheme('sidebar_bg', 'data-sidebarbg');

  • iframe版

項目在Light Year Admin的基礎上整理修改而來,用到了開源項目Bootstrap-Multitabs來實現多標簽頁,稍微做了一些修改。

  • 相對于Light Year Admin的項目,去掉了暗黑和半透明的兩個主題
  • 所有需要的鏈接加上class="multitabs"
  • 因為插件做了一些修改,在頂部的下拉菜單(dropdown-menu)中,不要把鏈接寫在href里面,放到data-url里
  • 插件用到了HTML5的會話存儲,因此在修改了init里的默認地址后,可以再瀏覽器控制臺執行下sessionStorage.clear(); // cache配置為true時

引用的第三方開源項目或者插件

普通版:

  • Bootstrap(去掉了自帶的字體圖標)
  • jQuery
  • bootstrap-colorpicker
  • bootstrap-datepicker
  • bootstrap-datetimepicker
  • ion-rangeslider
  • jquery-confirm
  • jquery-tags-input
  • bootstrap-notify
  • Chart.js
  • chosen.jquery.js
  • perfect-scrollbar

iframe版本:

  • Bootstrap(去掉了自帶的字體圖標)
  • JQuery
  • bootstrap-colorpicker
  • bootstrap-datepicker
  • bootstrap-datetimepicker
  • ion-rangeslider
  • jquery-confirm
  • jquery-tags-input
  • bootstrap-notify
  • Chart.js
  • chosen.jquery.js
  • perfect-scrollbar
  • Bootstrap-Multitabs

模板截圖

一共有兩個版本,這里我們選擇帶有tab的iframe版本的進行截圖演示:


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


以上是部分頁面的截圖,已經包括了很多功能在里面,包括列表、表單、分步表單、主體配色、多級菜單、模態框、確認框、提示、登錄、404等!另附兩張普通版中的暗色系以及彩色系主題:


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


這是一套非常優秀的純靜態后端管理模板————LightYearAdmin

 


總結

LightYearAdmin管理模板對后端人員可以說非常的友好了,筆者認為從配色、樣式、布局、操作等方面都非常友好,如果你正好缺一款屬于適合的模板,不妨試試看!

PS:相關文件在Gitee上都可以下載,這是純靜態模板,適合任何后端語言進行配合開發!大家也可以多多支持模板作者!謝謝!

福彩幸运农场走势图表