Rssy-Blog主题是非常好的一款主题,下面修改一下内容。
把首页滚动播放图片下面的导航按钮进行修改调整。
8b5b1722173053.png

本次调整2个部分:
第一个就是导航按钮相对比较松弛,把他改成紧凑写,从4个按钮改成5个按钮。
登陆网站根目录,进入主题文件夹/content/templates/Rssy-blog,找到主题后台设置页面options.php,在第233行,找到以下代码

    'Rotation_chart'       => array(

在上面插入第5个按钮,这样在主题设置界面就多了第5个按钮的设置,具体代码如下:

    'index_button_title_5' => array(
        'labels'      => 'tpl-button',
        'type'        => 'text',
        'name'        => '按钮(5)标题',
        'values'      => array('联系博主'),
        'description' => '',
        'default'     => '联系博主',
    ),
    'index_button_desc_5'  => array(
        'labels'      => 'tpl-button',
        'type'        => 'text',
        'name'        => '按钮(5)描述',
        'values'      => array('可在模板设置处进行设置'),
        'description' => '',
        'default'     => '可在模板设置处进行设置',
    ),
    'index_button_link_5'  => array(
        'labels'      => 'tpl-button',
        'type'        => 'text',
        'name'        => '按钮(5)链接',
        'values'      => array(''),
        'description' => '',
        'default'     => '',
    ),

再找到主题主页界面log_list.php,在62行下面,加入第5个按钮的代码:

                <div class="recommend-item">
                    <a href="<?php echo _g('index_button_link_5'); ?>" class="links"></a>
                    <div class="item-icon"><i>&#xe644;</i></div>
                    <div class="item-main">
                        <h2 class="title"><?php echo _g('index_button_title_5'); ?><span class="badge">GO></span></h2>
                        <p class="desc"><?php echo _g('index_button_desc_5'); ?></p>
                    </div>
                </div>

这样在首页就能显示出来了,但是刷新界面会发现第5个按钮换行了,并且图标和第三个一模一样。
把上面代码改成,这个是emlog博客字体图标库内置的图标。

找到style.css文件,找到recommend-item字段,把25%,改成20%,这样每个按钮就占据20%的比例,并排在一行了。

.recommend-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 25%;
    max-width: 20%;
    position: relative;
}

第二部分:把GO>的颜色风格,改成橙色:
在style.css文件中,找到recommend-item .item-main .title .badge字段,把颜色#2D69FF,改成#FFA500。

.recommend-item .item-main .title .badge {
    background-color: #FFA500;
    font-size: 12px;
    font-weight: normal;
    margin-left: 5px;
}

完成后,效果如上图。