本样式基于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);
然后就大功告成啦~ 最后 送上效果图
结语
代码可以说是很不成熟了..基本都是硬核实现的,所以如果以后有空的话我会完成自适应的。(咕咕咕咕)