Meteor Pro 美化教程（一）

Meteor Pro 美化教程（一）

写在前言

本美化教程仅以博主个人审美为主，仅供参考。

效果预览

样式修改

  • 去掉顶部特色图-文章模版右侧小工具
  • 居中显示文章区块
  • 为文章添加前台修改按钮，登录可见

具体办法

修改 template/content/content-featured.php 文件，下附具体代码。

因该方式属于破坏性覆盖，注意提前备份好源代码。

<div class="banner trem-banner mb-4">
    <div class="container-xl">
        <?php cx_breadcrumb();?>
    </div>
</div>
<!-- 3 -->
<section class="wi widget-coltow" x-data="cxm2_Postmeta">
    <div class="container-xl">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8" style="max-width: 800px;">
                <div class="main-content">
                    <?php
                    while ( have_posts() ) : the_post();
                    ?>
                    <!-- 编辑按钮 -->
                    <div class="d-flex justify-content-end mb-4">
                        <?php
                        if (current_user_can('edit_post', get_the_ID())) {
                            edit_post_link(
                                '编辑文章', 
                                '<div class="edit-link">', 
                                '</div>',
                                null,
                                'btn btn-sm custom-edit-btn'
                            );
                        }
                        ?>
                    </div>
                    
                    <!-- 文章内容 -->
                    <?php cx_postContent('featured','featured'); ?>
                    
                    <?php endwhile; ?>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 3.end -->

<style>
.custom-edit-btn {
    background-color: #2AA4E7 !important;
    color: white !important;
    border: 1px solid #2AA4E7 !important;
    transition: all 0.3s ease;
}

.custom-edit-btn:hover {
    background-color: white !important;
    color: #2AA4E7 !important;
}
</style>

暂无介绍....

取消回复

评论列表 (0条)：

加载更多评论

延伸阅读:

暂无内容!