文章内图片圆角

Vela 主题设置 · 分区：文章页面 · 上级分区：wenzhang · 选项 ID：post_radius · 类型：switcher

依赖：仅当 'post_radius', '!=', '' 满足时才显示/生效。

功能简介

文章内图片圆角显示

适用场景

• 当你希望「文章内图片圆角显示」生效时，开启本设置即可，无需改动主题文件。
• 适用于需要在不写代码的前提下，快速为站点追加「文章内图片圆角」相关表现的场景。
• 若同一页面存在多个相似美化项，建议只开启其一，避免视觉冲突。

代码实现

📂 文件创建清单

无需新建任何 PHP / JS / CSS 文件。本设置是 Vela 主题设置页的一个开关，字段已写在 /zibll_child/includes/acg/sections.php（相对路径 zibll_child/includes/acg/sections.php）的「文章页面」分区（上级分区：wenzhang）。开启后，前端通过 vela_get_option('post_radius') 读取开关状态，由 includes/acg/ 模块输出对应样式类或加载美化资源。

📁 本段代码存放文件

以下 CSF 字段定义 需放在 /zibll_child/includes/acg/sections.php（zibll_child/includes/acg/sections.php）的「文章页面」分区的 fields 数组中（该项已存在，无需重复添加；若你要新增同类设置，照此格式在对应分区追加即可）。

开关注册代码（CSF 字段定义）

array(
            array(
                'title'   => '文章内图片圆角',
                'label'   => '文章内图片圆角显示',
                'id'      => 'post_radius',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => ' ',
                'desc'   => '',
                'id'      => 'post_radius_s',
                'default' => 20,
                'unit'     => 'PX',
                'max'      => 30,
                'min'      => 5,
                'step'     => 5,
                'type'     => 'spinner',
                'dependency' => array('post_radius', '!=', ''),
                'class'    =>'compact',
            ),
            array(
                'title'   => '首页大图搜索框美化',
                'label'   => '修改大图搜索框部分样式',
                'desc'    => '',
                'id'      => 'header_slider_search',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '侧边栏评论小工具',
                'label'   => '给侧边栏评论小工具加个背景～',
                'id'      => 'cblplxgj',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '评论区',
                'label'   => '评论区红、蓝背景轮询切换',
                'id'      => 'acgpl',
                'default' => false,
                'type'    => 'switcher',
            ),
        array(
                'title'   => '评论区UID',
                'label'   => '评论区显示用户的ID',
                'id'      => 'comment_uid',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'dependency' => array('comment_uid', '==', 'true'),
                'class'    =>'compact',
                'id'      => 'comment_uid_type',
                'default' => 'id',
                'type'    => 'radio',
                'title'   => '显示信息',
                'inline'  => true,
                'options' => array(
                    'random' => '随机',
                    'id'   => '用户ID',
                    'ip'  => '用户IP',
                    'city' => '用户所在城市',
                ),
            ),
            array(
                'title'   => ' ',
                'desc'   => '预留位，例如你网站有100用户预留5位则第一百位用户ID显示为<code style="color:red;">00100</code>',
                'id'      => 'comment_uid_s',
                'default' => 5,
                'unit'     => '位',
                'max'      => 30,
                'min'      => 3,
                'step'     => 1,
                'type'     => 'spinner',
                'dependency' => array('comment_uid', '!=', ''),
                'class'    =>'compact',
            ),
        array(
            'title'   => '评论区背景图(蓝色款)',
            'id'      => 'zyx_comment_back',
            'type'    => 'switcher',
            'default' => false,
        ),
        array(
            'dependency' => array('zyx_comment_back', '!=', ''),
            'title'   => __('评论区背景图设置'),
            'id'      => 'zyx_comment_back_img',
            'class'    => 'compact',
            'default' => $img . '20230918220558508-image-64.png',
            'preview' => true,
            'library' => 'image', 'type' => 'upload',
        ),
        array(
            'title'   => '评论区背景图(红色款)',
            'id'      => 'zyx_comment_red',
            'type'    => 'switcher',
            'default' => false,
        ),
        array(
            'dependency' => array('zyx_comment_red', '!=', ''),
            'title'   => __('评论区背景图设置'),
            'id'      => 'zyx_comment_red_img',
            'class'    => 'compact',
            'default' => $img . 'shading_red.png',
            'preview' => true,
            'library' => 'image', 'type' => 'upload',
        ),
            array(
                'title'   => '文章随机彩色标签',
                'label'   => '开启后文章的标签将会变成随机彩色',
                'id'      => 'colorfultag',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '评论区背景图片',
                'desc'    => '<br><img src="'.$img.'comment_bg.gif "height="90px">',
                'label'   => '启用后，文章末尾评论区会有背景图片',
                'id'      => 'plbj',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '文章阴影边缘',
                'label'   => '启用后，文章页将会添加一个淡绿色柔光边缘',
                'id'      => 'ACG_article_box_shadow',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '文章内图片边框光效',
                'label'   => '开启后，当鼠标移向文章页面内的图片时，图片周围会有绿色柔光显示',
                'id'      => 'post_page_img_shadow',
                'default' => false,
                'type'    => 'switcher',
            ),
            array(
                'title'   => '文章标题美化',
                'label'   => '文章H2、H3标题美化，不再有下划线',
                'id'      => 'biaoti',
                'default' => false,
                'type'    => 'switcher',
            ),
      )

使用示例

1. 后台 外观 → Vela主题设置 → 文章页面，找到「文章内图片圆角」开关并打开，保存设置。
2. 回到前台对应页面，即可看到效果（部分项仅 PC 端或仅子比主题生效，详见说明）。
3. 在主题或插件代码中读取该设置：

$on = vela_get_option('post_radius', false);
if ($on) {
    // 开关已开启，自定义逻辑
}