灰板主题的维基百科

Bootstrap架构下的ZblogPHP主题模板;

完美支持不同分辨率的移动设备浏览;

黑灰色主题背景,适用于个人张扬的博客主题。


拍拍看科技 在线购买

“灰板”主题概况

灰板模版是适用于zblogPHP的主题模版。它采用了 Bootstrap V3 为架构基础,可在不同屏幕的页面浏览,是真正完美的响应式主题模板。

灰板主题的灵感来源于sublime软件。主题以灰黑色为主色,合理搭配了金黄、天蓝、紫色、绿色等多种色彩。配合了特殊的灰黑色板材背景,使网站整体看来比较偏向暗灰色。建议个人张扬,有独特视觉审美感觉的朋友使用。

主题需安装 缩略图插件

主题发展情况

  • 2015年7月10日,ZblogPHP主题Sublime模板正式发布;
  • 2016年1月8日,主题正式更名为“灰板”;

内容页面

灰板主题的内容页面现分为两种:右侧栏的single和单页的single-noside。系统默认是带右侧栏的内容页面,当然,您可以在发文时选择默认模版:

内容页面选择

主题默认的内容页面都是带侧栏的页面,如需调整默认页面,可通过zblogPHP后台-“分类管理”-“编辑”,调整该模版分类下的默认模版。

无侧栏单内容页面

灰板主题模版无侧栏内容页面是单页面排版,采用的是上中下结构,上下导航条固定,中间内容随滚动条移动。

无侧栏内容页面

页面标题为白色,附文章发布的时间和发布者,然后运用的是黄色,超链接部分运用的是蓝色,代码和特殊符号采用了白色+红色等组合模式。在页面的右上角有四个小按钮,按从左到右的顺序,它们分别是:联系QQ、微信公众号、微博地址、页面二维码。他们的作用如下:

  • 联系QQ:浏览者点击后可弹出预设的QQ对话框,设置可通过后台-“主题配置”修改;
  • 微信公众号、微博地址:浏览者点击后可弹出相应网页或链接,设置可通过后台-“主题配置”修改;
  • 页面二维码:浏览者点击后可弹出自动生成的对话框,系统自带,不可修改。

由于灰板主题运用了Bootstrap架构,所以支持文章采用是任何该架构下的编辑语言,比如说<code><abbr>等命令,具体请查看 Bootstrap用户手册

无侧栏内容页面

在正文下面是文章的扩展内容,里面包括“文章标签”、“转摘说明”、“相关文章”、“热门文章”、“最近发表”、“文章分享”等模块。这些内容都可随浏览界面的变化而自动排列,其中“相关文章”、“热门文章”、“最近发表”、“文章分享”为标签页面,需点击选择相应内容。

右侧栏内容页面

右侧栏内容页面由 无侧栏单内容页面 + 一个侧边栏组成。

侧栏分成两部分,固定侧栏随页面滚动的侧栏 。它们都可通过后台-“模块管理”来进行配置,文章固定侧栏调用侧栏2中配置内容,文章浮动侧栏是调用是侧栏4中内容。当浏览界面宽度小于一定程度时,浮动侧栏会自动隐藏。

文章列表页面

灰板主题的文章列表页面采用是左右模式,左侧是文章列表,右侧是侧栏。

文章列表分为三种不同的形式,当文章中无图片时,系统会匹配一个左右侧栏小模块;当文章中有超过3张图片时,它会调取前3张图横列展示;当文章有有图片但不超过3张时,它会调用默认的文章摘要。

内容页面选择

文章列表页面的侧栏分为两部分,固定侧栏随页面滚动的侧栏 。它们都可通过后台-“模块管理”来进行配置,文章固定侧栏调用侧栏1中配置内容,文章浮动侧栏是调用是侧栏3中内容。当浏览界面宽度小于一定程度时,浮动侧栏会自动隐藏。

网站首页面

首页是 文章列表页 的基础上增加了一个“巨幕”抬头和PPT幻灯片。

内容页面选择

巨幕

灰板主题的巨幕在主页的第一个页面顶部显示,当代码留空时则不先生。Bootstrap给出的默认代码如下:

<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                            

当然,因为是运用的Bootstrap架构,可以你也可以通过这个方式进行自我编辑html代码,如我现使用的代码就是下面这个样子:

<div class="col-sm-2 col-sm-offset-1 col-xs-6 col-xs-offset-3">
    <img src="..." class="img-responsive img-circle center-block" alt="">
</div>
<div class="col-sm-8 col-xs-12">
    <h2>大家好,我叫蟹胖,是名网页设计师。</h2>
    <br>
    <ul>
        <li>从事 ZblogPHP模版主题开发,主要是视觉方面</li>
        <li>关注科技产品和个人博客发展,注重用户体验和界面优化</li>
    </ul>
</div>
                            

循环幻灯片(PPT)

灰板主题的循环幻片(下称PPT)是运用的Bootstrap中的carousel.js。给出的默认代码如下:

<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="..." alt="...">
        <div class="carousel-caption">
        ...
        </div>
    </div>
    <div class="item">
        <img src="..." alt="...">
        <div class="carousel-caption">
        ...
        </div>
    </div>
    ...
</div>

Indicators是设置图片循环数量的,从0开始,默认显示的增加.active。如增加,只需要增加一行,把中间的数字修改下就可以了。

Wrapper for slides的显示的内容页面,通过直接插入img即可,下面的.carousel-caption的DIV是用来默认显示文字的。如果有需要复杂的内容,也可自行设置。请参考《用Bootstrap的Carousel做幻灯片尝试详解

侧栏

灰板主题侧栏都是通过后台——“模块管理”来配置。当选择div类型时,模块中所展示的内容按正常排列;选择UL类型时,会自动右缩进一部分。

zblogPHP系统自带了5个侧栏,我们现在使用了前4个,他们的作用分别如下:

  • 侧栏1:文章列表页面固定侧栏;
  • 侧栏2:文章内容页面固定侧栏;
  • 侧栏3:文章列表页面浮动侧栏;
  • 侧栏4:文章内容页面浮动侧栏;

主题风格

灰板主题有两个自带的风格:style.min.cssstyle.min-light.css。前者是默认的灰黑色风格,后者是新增加蓝白色风格。用户可以通过后台-“主题管理”来调整自己需要的风格

主题管理

灰板主题有一个独特的自动更换主题风格的模式,用户只要在后台-“主题配置”中打开“网站自动换背景”按钮即可实现自动变换风格。变换的时间是早8点~晚7点为蓝白风格,晚上7点~次日8点为灰黑色风格

主题管理