DUX主题首页添加公告栏

本文代码来源 蝈蝈要安静 ，非常感谢 蝈蝈要安静 ，提供这么好用的代码！

此次对主题的修改操作主要修改了 options.php 、index.php 、main.css 文件大家在进行操作前还是先备份一下文件以防误操作引起的网站崩溃。

options.php 文件修改

DUX主题以及大前端的其他一些主题都是使用 Options Framework 框架添加后台设置选项的，这里只需要将下面这段代码添加到主题 options.php 文件的末尾 return $options; 之前即可。

$options[] = array(
 'name' => __('首页公告', 'haoui'),
 'type' => 'heading' );

 $options[] = array(
 'name' => __('网站首页公告', 'haoui'),
 'id' => 'qgg_announcement_open',
 'std' => true,
 'desc' => __('开启', 'haoui'),
 'type' => 'checkbox');

$options[] = array(
		'name' => '网站首页公告',
		'desc' => '只能记录一条公告，切勿使用回车换行！',
		'id' => 'qgg_announcement',
		'std' => '<a href="https:/www.wenzika.com">文字咖 | 实现代码的小清新</a>',
		'type' => 'textarea');

添加完上述代码后，我们可以在主题的后台设置选项下看到一个名为“首页公告”的选项卡，该选项卡下包含以下内容：

创建 qgg_announcement.php 文件

上面的操作只是在主题的后台添加了一个设置界面，勾选这些按钮并不能使得前端显示公告栏，下面这段代码是核心代码，我们只需要新建一个名为 qgg_announcement 的php文件丢在主题的 modules 文件夹下即可，因为主题在 functions-theme.php 文件夹中添加了一个 _moloader 的函数用于调取模板，这里为了方便我们直接使用该函数调取模板即可。

<section class="qgg_scroll">
	<div id="qgg_scroll_list">
		<div style="list-style: none;">
			<?php $sitemsg = explode(PHP_EOL,_hui('qgg_announcement'));
				foreach ($sitemsg as $value) {
					echo '<li><i class="fa fa-volume-up fa-lg" aria-hidden="true" style="color:#ff6666"></i>&nbsp&nbsp'.stripslashes($value).'</li>';
				} 
			?>
		</div>
	</div>
</section>

index.php 文件修改

上面我们自建了一个名为 qgg_announcement.php 的模板文件，下面我们需要在主题的首页调用它，添加下面的代码至你想要显示的位置即可。

<?php 
    if( _hui('qgg_announcement_open') ){
        _moloader('qgg_announcement');
    }
?>

代码很简单，通过后台是否开启热门文章选项判断是否加载上面的 qgg_announcement.php 模板文件。

添加样式至 main.css

添加完上述代码基本上我们就可以刷新首页看到公告栏了，但是由于没有设置样式前端显示还是很原始的样式特别难看，将下面的代码添加到主题的 main.css 文件中即可显示效果。

/*首页公告*/
#qgg_scroll_list{
    height:20px;
    overflow:hidden;
    line-height:20px;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}
#qgg_scroll_list li{
    overflow:hidden;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}

#qgg_scroll_list a{
    color:rgba(36, 160, 240, 1);
    padding: 0 5px;
}
.qgg_scroll {
    width: 100%;
    margin: 0 5px;
    position: relative;
    padding: 0px 0px 13px 3px;
    border-radius: 3px;
}
@media (max-width: 560px) {
.qgg_scroll {padding:3px;}
}

注意：可能由于本地缓存及 CDN 的影响我们无法立即查看到显示效果，一般刷新本地缓存及 CDN 缓存就好。考虑到本文的公告栏只能记录一条公告，且不能使用回车换行符！如果需要使用多条公告滚动显示的话，可以自己写一个 JS 脚本。不建议使用蝈蝈要安静的 JS 的代码，那个 js 代码好像有点 bug ，用了之后，如果鼠标不往下滑，文章列表的缩略图显示不出来！

如果觉得静止的公告栏不好看的话，可以在后台首页公告里面添加一个<marquee>标签，代码如下

<marquee onMouseOut="this.start()" onMouseOver="this.stop()"> 这里写你想在公告栏显示的内容！</marquee>

效果如下：

这里写你想在公告栏显示的内容！