discuzX3页面增加广播台/推荐新闻

##### discuz!X页面增加广播台/推荐新闻模块：
**支持版本：**X2/X2.5/X3.0/3.1/3.2+

**实现效果图：**
![](https://www.fity.cn/usr/uploads/2014/08/1408639216_14970367.jpg)

**1、根据上图布局HTML页面并标注上discuz能识别的diy标签**
CSS代码如下，另存为choice.css文件：
```css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {margin: 0;padding: 0;}
td, th, div {word-break: break-all;word-wrap: break-word;}
ul, li {list-style: none outside none;}
.view-hover {list-style-position: outside;}
a {color: #333333;text-decoration: none;}
img {border: 0 none;}
.choice_thread{border:4px solid #d3e4eb;padding-top:10px; background:#FFF;position:relative;margin-bottom:10px;}
.choice_thread ul{display:inline;float:left;}
.choice_thread .txt_list{border-right:1px solid #D9D9D9;margin-left:30px;height:168px;width:300px;overflow:hidden;}
.choice_thread .txt_list li{line-height:27px;height:27px;margin-right:8px;background:url(dot.png) 0 center no-repeat;padding-left:10px;overflow:hidden;}
.choice_thread .txt_list li a{font-size:14px;color:#20376B;white-space:nowrap;overflow:hidden;}
#来源于未来往事博客 https://www.fity.cn
.choice_thread .txt_list li a:hover{color:#005DD0;}
.choice_thread .txt_list li a.redhot{color:#c00;}
.choice_thread .txt_list .date{float:right;color:#080;}
.choice_thread .pic_list {width:610px;margin-left:9px;}
.choice_thread .pic_list li {width:144px;float:left;margin:0 4px;display:inline;}
.choice_thread .pic_list li a{display:block;height:157px; padding:3px; text-align:center;border:1px solid #fcfcfc;font-size:12px;}
.choice_thread .pic_list li img{display:block;margin-bottom:5px;}
.choice_thread .pic_list li a:hover{background:#FEFED8;border:1px solid #E6C529;text-decoration:none;}
.choice_hd{position:absolute;left:-4px;top:-4px;background:url(choice_threadbg.png) 0 0 no-repeat;display:block;width:51px;height:51px;overflow:hidden;text-indent:-80px;}
.cc{*zoom:1;}
.cc:after {clear: both;content: " ";display: block;height: 0;visibility: hidden;}
.c{clear:both;overflow:hidden;height:auto;width:auto;}
```
**用到的图片：**
可以在附件中下载到

HTML代码如下(diy可视化编辑标签)：
```html
<div class="choice_thread s cc">
<span class="choice_hd">广播台</span>
<div class="cc">
<ul class="txt_list">
<li><a title="测试标题" target="_blank" href="文章链接地址">测试标题</a></li>
</ul>
<ul class="pic_list cc">
<li><a href="文章链接地址" target="_blank"><img width="146" height="116" border="0" src="图片链接地址" alt="测试标题">测试标题</a></li>
</ul>
</div>
</div>
#来源于未来往事博客 https://www.fity.cn
```

**2、这里以添加到版块帖子列表页面，所以将上述HTML代码嵌入到模板目录下forumdisplay.htm页面中，并引入CSS样式**
```html
<link rel="stylesheet" type="text/css" href="{STYLEIMGDIR}/choice.css" />
#补充：{$_G['style']['styleimgdir']} 扩展图片目录
<div class="choice_thread s cc">
  <span class="choice_hd">广播台</span>
  <div class="cc">
  <ul class="txt_list">
    <div id="diychoicelist" class="area"></div>
  </ul>
  <ul class="pic_list cc">
    <div id="diychoicepic" class="area"></div>
  </ul>
  </div>
</div>
#注意上述代码放置到你需要的的位置
```
**3、后台更新缓存**

**4、前台diy--高级模式**
1)在两个diy区块中分别添加100%框架并设置边距为0、无标题、边框无色
2)对添加框架后的diy模块继续添加'帖子模块'并设置内外边距为0、修改显示的条数(列表6条，图片4条)、图片列表只允许显示带有图片附件的帖子等信息
3)编辑推荐新闻列表'模块模板'，添加如下代码并模板另存为'广播台推荐新闻列表'：
```html
[loop]
<li><a title="{title}"{target} href="{url}">{title}</a></li>
[/loop]
```
4)编辑推荐新闻图片'模块模板'，添加如下代码并模板另存为'广播台推荐新闻图片'：
```html
[loop]
<li><a href="{url}" target="_blank"><img width="136" height="116" border="0" src="{pic}" alt="{title}">{title}</a></li>
[/loop]
```
**5、保存--刷新**
附上嵌入后的模板压缩包(基于discuz默认模板)：
[点击这里下载文件: forumdisplay.zip](https://www.fity.cn/usr/uploads/2014/08/1408639331_241736ac.zip "点击这里下载文件: forumdisplay.zip")

本文最后更新于 2019-06-27 14:04:06 并被添加「discuz discuzx2 discuzx3 discuz模板制作」标签，已有 5571 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/494.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

未来往事

discuzX3页面增加广播台/推荐新闻

相关文章

此处评论已关闭