MENU

侧边栏增加个人介绍

• August 3, 2019 • 干货教程,Typecho阅读设置

前言

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

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

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

实现

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

<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);

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

结语

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

Last Modified: September 8, 2019