DUX主题主页添加自定义文章列表模块

额，事情是这样的，之前网站上共享过一篇 DUX主题主页增加抢手文章模块 的文章，首要是根据阅览量或许评论数从数据库中直接调取相应文章，后来有网友反映希望能改成自定义列表方法的文章，所以就有了这篇文章。还是按照常规，先看下前端闪现的作用：

样式我没怎样调，可能目前闪现的不是太美观，我们有需求的话可以自行调整下。为了能更便利我们自定义，后台面板我设置了三个选项，分别用于设置标题、标签及自定义文章。后台界面如下图所示：

下面来简略说下具体的批改流程：

增加后台选项

将以下代码增加到主题的 options.php 文件中去，增加完成后刷新 DUX 主题设置页面应该就会呈现一个“蝈蝈功用”的选项卡，点击该选项卡即可看到上面所示的后台选项。

 $options[] = array(
 \'name\' => __(\'蝈蝈功用\', \'haoui\'),
 \'type\' => \'heading\' );
 
 $options[] = array(
 \'name\' => __(\'自定义文章列表\', \'haoui\'),
 \'id\' => \'qgg_diy_postlist_open\',
 \'std\' => true,
 \'desc\' => __(\'开启\', \'haoui\'),
 \'type\' => \'checkbox\');
 
 $options[] = array(
 \'name\' => \'自定义文章列表标题\',
 \'desc\' => \'\',
 \'id\' => \'qgg_diy_postlist_title\',
 \'std\' => \'特别举荐文章列表\',
 \'type\' => \'text\');
 
 $options[] = array(
 \'name\' => \'自定义文章列表标签\',
 \'desc\' => \'\',
 \'id\' => \'qgg_diy_postlist_lable\',
 \'std\' => \'特别举荐\',
 \'type\' => \'text\');
 
 $options[] = array(
 \'name\' => \'自定义文章列表\',
 \'desc\' => \'每行一条，回车换行即可。不明白？点击这里 停止留言。\',
 \'id\' => \'qgg_diy_postlist\',
 \'std\' => \'蝈蝈要安静 | 一个不学无术的伪程序员\',
 \'type\' => \'textarea\');

新增 qgg_diy_post_list.php 文件

为了便利办理，我这里将闪现的首要代码封装在了一个 PHP 文件中，你可以将以下代码复制保管为一个名为 qgg_diy_post_list.php 的文件中，也可以从后边我提供的链接地址直接下载。

    <?php
        echo \'
\'._hui(\'qgg_diy_postlist_title\').\'
\'
    ?>
    

        

        <?php $sitemsg = explode(PHP_EOL,_hui(\'qgg_diy_postlist\'));
        foreach ($sitemsg as $value) {
            echo \'
\'._hui(\'qgg_diy_postlist_lable\').\'&nbsp&nbsp\'.stripslashes($value).\'
\';
        } 
        ?>
        
    

文件丢到主题下的 modules 文件夹中，至于为什么之前说过，这里就不多说了。

前端闪现代码

在主题的 index.php 文件中增加如下代码，具体位置自行选择。

CSS样式美化

最终，我目前所运用的样式代码，当然你也可以自行调整。

/*自定义文章列表样式*/
.qgg_diy_postlist_lable{
    line-height: 1;
    padding: 7px;
    font-size: 14px;
    background-color: #FF5E52;
    color: #fff;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
}
.qgg_diy_postlist{
    background:#FFF;
    padding:10px 20px;
    margin:10px 0px;
    border-radius:4px;
}
.qgg_diy_postlist li{
    margin:5px 3px;
    white-space: nowrap; 
    overflow: hidden; 
    clear: both;
    text-overflow: ellipsis;
}

2018年04月22日更新：新增右侧自定义提示信息

总觉得文章列表右侧空荡荡的，所以抉择给右侧加些自定义的内容，其实也只是批改了下样式代码，批改完成后如下所示：

批改办法的话就是在原有样式代码的根底上增加下面这段代码：

.qgg_diy_postlist li p{
    line-height: 1.8;
    font-size: 12px;
    color:#AAA;
    float: right;
}

批改完成后后台文章列表以如下方法增加（每行一个）：

右侧提示内容
蝈蝈要安静 | 一个不学无术的伪程序员