B2主题美化之圈子置顶帖样式修改调整

老白博客7B2主题美化修改教程更新了：这次是老白之前做奇它论坛的时候修改的圈子页面置顶帖样式，删除了调整了时间元素以及点赞评论相关的元素，把置顶帖调成了我喜欢的样子。详细的代码教程如下：

1.修改circle-topic-list.php文件

你的网站主题目录，文件位置：b2/TempParts/circle/circle-topic-list.php

找到原来的置顶帖盒子，下面这个section部分

            <section v-for="(item,ti) in data" :key="item.topic_id" v-else :class="'circle-topic-item ' + ' circle-topic-item-'+item.topic_id">
                <template v-if="item.sticky === 1">
                    <div class="topic-sticky">
                        <div class="topic-sticky-info">
                            <div :class="item.attachment.image.length > 0 ? 'has-image' : ''">
                                <div class="topic-sticky-title">
                                    <h2>
                                        <span class="topic-sticky-icon"><?php echo b2_get_icon('b2-upload-fill').__('置顶','b2'); ?></span>
                                        <a :href="item.link" target="_blank">
                                            <span v-if="item.title" v-text="item.title"></span>
                                            <span v-else-if="item.content" v-text="item.content"></span>
                                            <span v-else>
                                                <b><?php echo sprintf(__('专属老白-博客撰写可查看！','b2'),$circle_name); ?></b>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div v-if="item.attachment.image.length > 0" class="topic-sticky-img-box b2-radius">
                                    <?php echo b2_get_img(array(
                                        'source_data'=>':srcset="item.attachment.image[0].thumb_webp"',
                                        'src_data'=>':src="item.attachment.image[0].thumb"'
                                    ));?>
                                </div>
                            </div>
                            <?php get_template_part( 'TempParts/circle/circle-topic-footer');?>
                            <?php get_template_part( 'TempParts/circle/circle-comments');?>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <?php get_template_part('TempParts/circle/circle-topic-content'); ?>
                    <?php get_template_part( 'TempParts/circle/circle-topic-footer');?>
                    <?php get_template_part( 'TempParts/circle/circle-comments');?>
                </template>
            </section>

修改为下面这堆：

此处为隐藏内容，请评论后查看

2.style.css简单调整

同理，在主题的样式文件，添加下面的样式

/*圈子置顶帖样式https://www.x老白cbt博客mw.com/30864.html-*/
body .circle-topic-sticky .topic-sticky {
    margin-top: -10px;
}
body .circle-topic-sticky .topic-sticky:last-child {
    padding-bottom: 20px;
}
body .circle-topic-sticky .topic-sticky .topic-sticky-title {
    display: flex;
}
body .circle-topic-sticky .topic-sticky .topic-date {
    margin-left: auto;
    font-size: 14px;
    color: #878787;
    font-weight: normal;
}
/*手机端隐藏置顶帖子日期-https://www.老白xcbtm博客w.com/30864.html*/
@media (max-width: 780px) {
.circle-topic-sticky .topic-sticky .topic-date{
display: none;
}
}
body .circle-topic-sticky:first-child {
    border-radius: 4px 4px 0 0;
    box-shadow: 0;
}

技巧分享

圈子置顶帖肯定是非常重要的东西才需要置顶，比如关于圈子的功能说明，或者圈规说明

然后我们都知道B2主题的帖子看长文章效果是不太好的，而文章类型效果不错

所以就可以使用下面的插件，实现：点击置顶帖子直接跳转到文章或者页面

page links to 插件说明：https://www.xcbtmw.com/30872.html#h23