Skip to main content
 首页 » zblog教程 » we media

We Media自媒体主题 - 模块管理

2016年08月14日2527

zblog的模块管理是一个有意思的功能,We Media自媒体主题早期是固定模块,现在是不同页面不同侧栏,新版改进了右侧模块,减少资源损耗。

主题侧栏对应页面如下:

  • 默认侧栏 - 首页

  • 侧栏2 - 带图的分类页(对应catalog模板,作者页/日期页/搜索页)

  • 侧栏3 - 文字分类页(对应catalog-text模板,标签页)

  • 侧栏4 - 文章页

未标题-1.jpg

模块管理里左侧分为系统模块,用户自定义模块,主题自带模块,插件创建模块,右侧有5个侧栏,可以随意将左侧任意一个模块拖拽到侧栏里。

we media自媒体主题自带8个模块,分别是:最新发布、热门文章、热门话题(按数量排序的标签)、最新评论、宣传广告、给力访客、社交按钮、特别关注(按评论数排序的带图列表)。(PS:如果遇到奇怪情况或升级中侧栏模块无法正常显示,请启用下别的主题然后再启用下we media)

自带8个模块中能编辑的是宣传广告、社交按钮,但很多用户会直接编辑这两个模块,会导致后期更新这些模块又恢复到默认状态,所以建议新建模块,不建议改自带模块的代码。

如何新建模块?

1、点击顶部“新建模块“按钮,编辑如下:

2222.jpg

2、名称随意(如要显示标题建议四个字,因1.4版本模块较固定,样式写在CSS里,所以无法显示fontawesome图标;多数情况是隐藏标题);文件名和HTML ID也是随意填,但不要与其他模块重复;正文输入自己想要的HTML代码;类型选DIV还是UL根据正文HTML代码决定,如果正文是<li>列表就选UL,如果正文是其他编码选DIV,这样符合W3C规范。

PS:要显示fontawesome图标也不难(此方法仅限1.4版本),加入以下代码:

<style>#shoucang123 .function_t:before{content:'\f0f3'}</style>

#shoucang123是HTML ID,f0f3是fontawesome图标的unicode,替换这两处即可。如下图所示:

333.jpg

取得fontawesome图标方法,先到 http://fontawesome.com.cn/faicons/ 这里找到自己中意的图标,取得unicode,如下:

11.jpg

222.jpg

最终效果如下:

444.jpg

3、新建模块成功,显示如下:

3333333.jpg

我想要加一些不同的模块,怎么办?

1、图片广告/联盟广告

未标题-1.jpg

名称/文件名/HTML ID随意,不与其他模块重复即可,隐藏标题,类型DIV,代码如下:

<!--图片广告-->
<a href="http://网址" target="_blank" rel="nofollow"><img src="图片地址" class="img-responsive" alt=""></a>
<!--联盟广告-->
联盟广告JS代码

PS:图片尺寸≥350px,加class="img-responsive"自适应,不加溢出部分自动隐藏,rel="nofollow"根据自己需要。联盟广告选尺寸≥350px。

效果如下:

未标题-3.jpg

2、各种按钮

Bootstrap预定义样式的按钮如下:

未标题-4.jpg

<!-- 默认样式 -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- 深蓝色按钮 -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- 绿色按钮 -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- 浅蓝色按钮 -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- 橙色按钮 -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- 红色按钮 -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

按钮的宽度由文字多少决定。根据上面加上bootstrap的一些全局样式,我们就可以将按钮做成下面几个常见例子:

(1) 块级元素(宽度100%,占满侧栏,比普通按钮多了btn-block属性)

22.jpg

<!--没有加FontAwesome图标-->
<button type="button" class="btn btn-primary btn-block">(块级元素)按钮</button>
<!--加了FontAwesome图标-->
<button type="button" class="btn btn-primary btn-block"><i class="fa fa-commenting-o"></i> (块级元素)按钮</button>

PS:FontAwesome图标可以到 http://fontawesome.com.cn/faicons/  找,点图标出现的代码替换掉即可。

(2) 混合按钮

333.jpg

<button type="button" class="btn btn-primary"><i class="fa fa-exclamation-circle"></i> Primary</button>
<button type="button" class="btn btn-info"><i class="fa fa-exclamation-triangle"></i> Info</button>
<span class="pull-right"><button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button></span>

PS:按钮默认靠左,加上<span class="pull-right">...</span>可以靠右。

(3) 混搭按钮

111.jpg

<p><button type="button" class="btn btn-primary btn-block"><i class="fa fa-commenting-o"></i> (块级元素)按钮</button></p>
<button type="button" class="btn btn-primary"><i class="fa fa-exclamation-circle"></i> Primary</button>
<button type="button" class="btn btn-info"><i class="fa fa-exclamation-triangle"></i> Info</button>
<span class="pull-right"><button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button></span>

PS:哪组按钮在上,就加上<p>...</p>能拉开距离,没有加上下组按钮会粘在一起。

(4) 按钮组

666.jpg

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default"><i class="fa fa-qq"></i> QQ登录</button>
  <button type="button" class="btn btn-default">会员登录</button>
  <button type="button" class="btn btn-default"><span class="text-danger"><strong>注册</strong></span></button>
</div>
<div class="pull-right"><button type="button" class="btn btn-default"><span class="text-primary">退出<span></button></div>

还记得文字颜色吗?文字class为text-primarytext-successtext-infotext-warningtext-danger,颜色对应为深蓝、绿色、浅蓝、橙色、红色。

以上是四种常见例子,如果原理懂了,就可以自由发挥了。

3、警告框

000.jpg

<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message. </div>
<div class="alert alert-info" role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
<div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again. </div>

4、列表组

22211.jpg

<!--上图为原始效果-->
<div class="list-group" style="margin-top:0">
  <a href="http://链接地址" class="list-group-item">Cras justo odio</a>
  <a href="http://链接地址" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="http://链接地址" class="list-group-item">Morbi leo risus</a>
  <a href="http://链接地址" class="list-group-item">Porta ac consectetur ac</a>
  <a href="http://链接地址" class="list-group-item">Vestibulum at eros</a>
</div>

1111222.jpg

<!--加上一些效果后-->
<div class="list-group" style="margin-top:0">
  <a class="list-group-item" href="http://链接地址"><span class="text-danger"><i class="fa fa-qq"></i> 点击加入QQ群12345678</span></a>
  <a class="list-group-item" href="http://链接地址"><span class="text-success"><i class="fa fa-rss"></i> 订阅RSS</span></a>
  <a class="list-group-item" href="http://链接地址"><span class="text-primary"><i class="fa fa-user"></i> 作者专栏推荐</span></a>
  <a class="list-group-item" href="http://链接地址"><span class="text-info"><i class="fa fa-ticket"></i> 世界地图</span></a>
  <a class="list-group-item" href="http://链接地址"><span class="text-warning"><i class="fa fa-arrow-circle-right"></i> 留言本</span></a>
</div>

234.jpg

<!--以上是情景类效果-->
<div class="list-group" style="margin-top:0">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

22223333.jpg

<!--加了active效果后-->
<div class="list-group" style="margin-top:0">
  <a href="#" class="list-group-item active">Cras justo odio</a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

PS:列表组需要加上style="margin-top:0"。

5、插入自适应视频

<!--16比9-->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="此处插入视频地址" allowfullscreen="" frameborder="0" height="200" width="350"></iframe>
</div>
<!--4比3-->
<div class="embed-responsive embed-responsive-4by3">   
 <iframe class="embed-responsive-item" src="此处插入视频地址" allowfullscreen="" frameborder="0" height="260" width="350"></iframe>
</div>

PS:5.0版本模块依然保留九个模块,除社交按钮/宣传广告类型是DIV外,其他七大模块(最新发布/最新评论等)改为UL,并且支持修改显示个数了;(抱歉,这里需要升级后进行手动将类型改为UL,然后修改个数)

微信