本样式基于Violet主题的基础上修改,理论上兼容类似样式的侧边栏,小细节还是需要各位自行修改

由于本人技术欠佳,本功能是靠着非常沙雕的方式实现的,所以很容易出现适配上的问题,即便是在Violet主题上使用,个性签名也要限制在11个字以内。

如果您不是Typecho用户,请自行修改PHP调用。

实现

将本段代码粘贴至侧边栏位置即可,如果您是Violet主题的用户,您可以粘贴至<span class="logo-sm">logo下

```html
<div class="about">
<img class="logo2" src="<?php $this->options->logoUrl(); ?>">
<div class="jojo" style="margin-bottom: 0px;margin-top: 14px;">博主</div>
<p class="p2" ><?php $this->author->screenName(); ?></p>
<p class="p3"><?php $this->options->about(); ?></p>
</div>
```

Violet主题的用户为了美观您可以直接删掉导航文字,然后添加一个
即可,效果跟本站一样。 然后是CSS样式

     .about {
        box-shadow:0px 0px 5px black;
        background:#727cf5;
        height:80px;
        width:100%;
    }
      .jojo {
        color:#cedce4;
        border-radius: 10px;
        border: 1px solid;
        font-size: 16px;
        margin: 0 5px 5px 0;
        padding: 0 8px;
        line-height: 26px;
        float:left;
    }
      .logo2 {
      border-radius: 30px;
      width:60px;
      height:60px;
      float:left;
      margin:10px;
      }
    .p2 {
        color: #cedce4;
        top: 10px;
        font-size: 1.5rem;
        position: relative;
        margin:6px;
    }
      .p3 {
        color: #cedce4;
        top: 5px;
        font-size: .9rem;
        position: relative;
    }

建议新建一个css文件后粘贴进去,然后在header.php文件中调用

然后就是最后一步了,第一项当中使用的调用是不存在的,所以要在functions.php文件中加入以下代码

      $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('头像地址url'), _t('用于侧边栏头像显示,必须填写'));
        $form->addInput($logoUrl); 
      
        $about = new Typecho_Widget_Helper_Form_Element_Text('about', NULL, NULL, _t('个人介绍'), _t('一个简短的个人介绍,由于适配原因仅支持11字以内,必须填写'));
        $form->addInput($about);

然后就大功告成啦~ 最后 送上效果图

结语

代码可以说是很不成熟了..基本都是硬核实现的,所以如果以后有空的话我会完成自适应的。(咕咕咕咕)