一个精美的侧边栏是如何实现的

.articalSite {
    transform: translate(-50%, -50%);
    /*往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置*/
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。仅能在定位元素上奏效（例如 position:absolute;）*/
    text-align: center;
    border-radius: .5rem;
    /*给元素添加圆角的边框*/
    width: 100%;
    padding: 30px 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.articalTitle {
    color: #fff;
    text-shadow: 0 0 5px #c3c3c3;
    font-weight: 400;
    text-align: center;
    margin-top: 5px;
    margin-bottom: .75rem;
    font-size: 1.5625rem
}

.articalDescription {
    color: #eee;
    text-shadow: 0 0 5px #c3c3c3;
    font-weight: 400;
    text-align: center;
    margin-top: 5px;
    margin-bottom: .95rem;
    font-size: 1.2rem
}

.widgetbox {
    width: 100%;
    margin: 15px 0 15px 0;
    padding: 0 0 12px 0;
    background: #fff;
    /* rgb(255,255,255,0.8) */
    overflow: hidden;
    /*定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制,hidden:内容会被修剪，并且其余内容是不可见的,可以配合white-space和text-overflow使用*/
    _display: inline;
    border-radius: 7px;
    -webkit-box-shadow: 0 0 5px #ddd;
    -moz-box-shadow: 0 0 5px #ddd;
    box-shadow: 0 0 5px #ddd;
    _border: 1px dashed #ddd
}

.widgetbox-title {
    text-align: center;
    margin: 5px 0 5px 0;
    font-weight: 500;
    white-space: nowrap;
    opacity: .77
}

.widgetbox ul {
    padding: 1px 1px;
    margin: 1px;
    list-style: none;
    background-color: transparent
}

.widgetbox li {
    border-bottom: 1px dashed #dedede;
    display: block;
    overflow: hidden;
    /*定义溢出元素内容区的内容如何处理。hidden:内容会被修剪，并且其余内容是不可见的,可以配合white-space和text-overflow使用*/
    white-space: nowrap;
    /*规定文本不进行换行*/
    text-overflow: ellipsis;
    /*当对象内文本溢出时显示省略标记（...）*/
    padding: 7px 0 5px 0;
    position: relative;
    width: 250px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-weight: 400;
    opacity: .77
}

.widgetbox li:hover {
    background-color: rgba(221, 217, 233, 0.77)
}

.widgetbox a:hover {
    color: #ff8c83;
}

.widgetbox-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    opacity: .77
}


/*
.widgetbox-img {
    text-align: center;
    padding-top: 1em
}

.widgetbox-body{text-align:center;word-wrap:break-word;padding:0px 16px 1px 16px}

.widgetbox-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    opacity: .77
}
*/

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div class="col-mb-12 col-3" id="secondary" role="complementary" style="margin-top:30px ;">
    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowHotPosts', $this->options->sidebarBlock)) : ?>
        <section class="widgetbox">
            <h3 class="widgetbox-title">热门文章</h3>
            <ul class="widgetbox-text">
                <?php Contents_Post_Initial($this->options->postsListSize, 'views'); ?>
            </ul>
        </section>
    <?php endif; ?>
    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowRecentPosts', $this->options->sidebarBlock)) : ?>
        <section class="widgetbox">
            <h3 class="widgetbox-title">最新文章</h3>
            <ul class="widgetbox-text">
                <?php Contents_Post_Initial($this->options->postsListSize); ?>
            </ul>
        </section>
    <?php endif; ?>
    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowRecentComments', $this->options->sidebarBlock)) : ?>
        <section class="widgetbox">
            <h3 class="widgetbox-title">最新回复</h3>
            <ul class="widgetbox-text">
                <?php $this->widget('Widget_Comments_Recent', 'ignoreAuthor=true')->to($comments); ?>
                <?php while ($comments->next()) : ?>
                    <li>
                        <a href="<?php $comments->permalink(); ?>">
                            <div class="sidebar-reply-text" style="display:inline">
                                <span itemprop="image">
                                    <?php $number = $comments->mail;
                                    echo '<img src="https://q2.qlogo.cn/headimg_dl? bs=' . $number . '&dst_uin=' . $number . '&dst_uin=' . $number . '&;dst_uin=' . $number . '&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="24px" height="24px" style="border-radius: 50%;margin-right: 10px;">'; ?>
                                </span>
                                <?php $comments->author(false); ?> : <?php $comments->excerpt(30, '...'); ?></div>
                        </a>
                    </li>
                <?php endwhile; ?>
            </ul>
        </section>
    <?php endif; ?>
    <?php if (!empty($this->options->sidebarBlock) && in_array('ShowTag', $this->options->sidebarBlock)) : ?>
        <section class="widgetbox">
            <h3 class="widgetbox-title">标签</h3>
            <ul class="widgetbox-text">
                <?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=30')->to($tags); ?>
                <?php if ($tags->have()) : ?>
                    <?php while ($tags->next()) : ?>
                        <li><a href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?></a></li>
                    <?php endwhile; ?>
                <?php else : ?>
                    <li>暂无标签</li>
                <?php endif; ?>
            </ul>
        </section>
    <?php endif; ?>
</div><!-- end #sidebar -->