从零开始一步步带你开发自己的博客系列教程三 前台页面右侧信息

上一节介绍了 从零开始一步步带你开发自己的博客系列教程二 前台页面最新日志列表布局

右侧内容也是公共区域，首页、列表页、详情页都引用了右侧部分、其实整个博客页面都非常简单，公用头部、公用右侧、公用底部、加上主要区域的列表，和主要区域的详情，就完成了整个博客的基本展现，今天就带大家一起完成右侧区域和公用底部部分。

右侧区域，主要是以块形成整个区域的展示，如：博主的基本介绍，标签云、友情链接、广告展示等等。本博客只介绍博主基本介绍和友情链接，其他的内容自己根据自身的需求补充。

公共右侧部分，我们新建aside.html页面

<div class="aside">
    <div class="author comm-box">
        <img src="https://www.vuereact.com/uploads/20220112/2695af9f38c4e5e4e4b45d700edf8421.jpg" 
        title="author" alt="author">
        <div class="author-introduction">
            <h3 class="author-name">胡新能</h3>
            <div class="slogn">个人技术博客，关注Web开发技术、用户体验、坚持更新原创实战教程</div>
            <div class="author-tag" tag="web前端,PHP,Vue开发"></div>
        </div>
    </div> 

    <div class="link comm-box">
        <h4>友情链接</h4>
        <div class="link-content">
            <a href="https://www.vuereact.com" title="胡新能个人博客" target="_black">胡新能个人博客</a>
        </div>
    </div>
</div>

 在common.css 添加css代码，因为我们的博客比较简单，css全部放在common.css样式表里

.aside{
    width: 25%;
    float: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.aside .comm-box{
    background-color: #FFF;
    padding: 20px 10px 10px 10px;
    margin-bottom: 10px;
}

.aside .link{
    padding: 0 !important;
}

.aside .link h4{
    height:40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 1px #EEEEEE solid;
}

.aside .link-content{
    padding: 10px 20px;
}

.aside .link-content a{
    display: block;
    line-height: 26px;
    padding-right: 10px;
    font-size: 14px;
    color: #8590a6;
}

.aside .link-content a:hover{
    color: #1e80ff;
}

.aside .author img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 10px auto;
}

.author-introduction div{
    margin-bottom: 10px;
}

.author-introduction .author-name{
    font-size: 14px;
    color: #0b0b37;
    text-align: center;
    margin-bottom: 10px;
}

.author-introduction .slogn{
    color: #8590a6;
    line-height: 22px;
}

.author-introduction .author-tag{
    overflow: hidden;
}

.author-introduction .author-tag span{
    padding: 0 5px;
    border-radius: 2px;
    color:#ccc;
    line-height:18px;
    margin-bottom: 10px;
    margin-right: 5px;
    float: left;
}

 博主介绍有tag标签功能，我们通过html的自定义属性tag来生成标签，新建common.js js文件

$(function () {
    // 生成标签
    setLabel();
});

// 生成标签
function setLabel() {
    var tagArr = $(".author-tag").attr("tag").split(",");
    var html = '';
    var color = ["#eb2f96", "#52c41a", "#2f54eb", "#13c2c2", "#eb2f96", "#52c41a", "#2f54eb", "#13c2c2", "#eb2f96", "#52c41a", "#2f54eb", "#13c2c2"];
    var background = ["#fff0f6", "#f6ffed", "#f0f5ff", "#e6fffb", "#fff0f6", "#f6ffed", "#f0f5ff", "#e6fffb", "#fff0f6", "#f6ffed", "#f0f5ff", "#e6fffb"];
    var border = ["#ffadd2", "#b7eb8f", "#adc6ff", "#87e8de", "#ffadd2", "#b7eb8f", "#adc6ff", "#87e8de", "#ffadd2", "#b7eb8f", "#adc6ff", "#87e8de"];
    $.each(tagArr, function (index, item) {
        html += '<span style="color: ' + color[index] + '; background: ' + background[index] + '; border:1px ' + border[index] + ' solid;" title="' + item + '">' + item + '</span>';
    });
    $(".author-tag").html(html);
}

具体效果如下（是不是还挺好看的）：

右侧公共部分已完成，是不是很简单？ 博客系列教程第一部分前台页面布局就剩最后一节了，小伙伴们加油！