微信公众号

zblog《蓝色简约》主题发布

免费主题 23002 12年前 (2012-12-12)

主题名称：《蓝色简约》主题

主题作者：toyean

适用版本：zblog ASP 2.2

发布时间：2012.12.12

更新时间：2013.12.19

主题大小：401KB

下载地址：您需要有拓源网账号，并且登录后即可查看或下载隐藏部分的内容.

发布地址：https://www.toyean.com/post/BlueSimple.html

主题截图：

zblog蓝色简约主题-首页

zblog蓝色简约主题-文章页

主题默认侧栏无选项卡模块，需要的朋友可自行添加选项卡模块，代码如下。

1. 修改首页（bluesimple/template/default.html和catalog.html），在<#template:sidebar#>处换行添加以下代码：

<div class="sidebar_block">
<div class="tabtitle">
  <ul id="tabnav">
    <li class="selected">最新文章</li>
    <li class="">热门文章</li>
    <li class="">随机文章</li>
  </ul>
</div>
<div class="tabcon" id="tab-content">
  <ul>
    <#CACHE_INCLUDE_PREVIOUS#>
  </ul>
  <ul class="hide">
    {YT:Article DataSource="GetArticleRandomSortTopHot(10)"}
      <li><a href="{$Article.Url}">{$Article.HtmlTitle}</a></li>
    {/YT:Article}
  </ul>
  <ul class="hide">
    {YT:Article DataSource="GetArticleRandomSortRand(10)"}
      <li><a href="{$Article.Url}">{$Article.HtmlTitle}</a></li>
    {/YT:Article}
  </ul>
</div>
</div>
</div>

2. 向主题插件自定义样式表（bluesimple/plugin/default.css.html）文件中添加以下CSS代码：

/* 侧栏选项卡 */
.tabtitle { font-size:14px; color:#000; font-weight:bold; line-height:35px; overflow:hidden; }
.tabcon { height:230px; padding:5px 0; line-height:30px; overflow:hidden; }
#tabnav { display:block; clear:both; zoom:1; }
#tabnav li { width:103px; float:left; margin-bottom:5px; font-size:14px; color:{%aryColor(4)%}; font-weight:normal; text-align:center; cursor:pointer; border-bottom:2px solid #323436; }
#tabnav .selected { color:{%strHdBg%}; border-bottom:2px solid {%strHdBg%}; position:relative; }
#tab-content .hide { display:none; }
#tab-content ul { height:240px; overflow:hidden; }
#tab-content ul li { float:left; width:100%; padding-left:8px; line-height:22px; border-bottom:1px dashed #f3f3f3; text-indent:0.8em; background:url(images/list.png) no-repeat 0 9px; }
#tab-content ul li a { font-size:12px; color:{%aryColor(1)%}; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tab-content ul li a:hover { color:{%aryColor(2)%}; }

3. 向主题脚本（bluesimple/script/common.js）文件中添加以下js代码：

$(function(){
	$('#tabnav li').hover(function() {
		$(this).addClass("selected").siblings().removeClass();
		$("#tab-content > ul").eq($('#tabnav li').index(this)).fadeIn(100).siblings().hide()
	});
});

4. 修改后进入主题配置中选择一套颜色方案并保存，文件重建即可。

2013-12-19 更新内容 V1.3

新增网站幻灯片展示和管理

新增文章页广告位展示和管理

新增二级栏目导航

新增主题版权保护机制

优化主题插件，方便设置页面样式及其他配置

优化首页CMS模块智能管理

修正样式等若干BUG

2013-8-28 更新内容 V1.2

修正了主题浏览器兼容性问题

调整主题结构