typcho添加侧边栏个人资料名片,样式可自定义

小七今天逛博客分享好多站点都有个侧边栏个人资料名片,后来我心思也搞一个看看~
看这里↓

这是效果图,不想打字了,下面直接上代码


1.把下面代码放到sidebar.php需要展示的地方(这个文件是侧边栏文件)

<section class="widget paddingall">
    <div class="side-info-img">
        <img class="tx" src="<?php $this->options->logoUrl(); ?>" /><!-- 引入外观设置-logo地址 -->
    </div>
    <div class="side-info-author">
        <span><?php $this->options->authordesc(); ?></span><!-- 引入外观设置-作者简介 -->
    </div>
   <div class="author-social"> 
<span class="author-weibo"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=3108308908&site=qq&menu=yes" rel="nofollow" target="_blank">                                                      
<i class="fa fa-qq"></i>QQ</a> 
</span> 

<span class="author-blog"> 
<a href="<?php $this->options->socialweibo(); ?>" rel="nofollow" target="_blank"><i class="fa fa-  
weibo"></i>微博</a><!-- 引入外观设置-微博链接 -->
</span>
</div>
    <!-- 引入一言 -->
    <div class="side-info-con">
        <h6><pre id="hitokoto">无数次寻找,依旧一无所获</pre>

        <!-- 以下写法,选取一种即可 -->

        <!-- 现代写法,推荐 -->
        <!-- 兼容低版本浏览器 (包括 IE),可移除 -->
        <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
        <!--End-->
        <script>
        fetch('https://v1.hitokoto.cn')
.then(function (res){
  return res.json();
})
.then(function (data) {
  var hitokoto = document.getElementById('hitokoto');
  hitokoto.innerText = data.hitokoto; 
})
.catch(function (err) {
  console.error(err);
})
        </script>

    </div>
</section>
</h6>
<!-- 引入一言结束 -->

2.把下面代码发到你主题对应的css文件里!

/*名片样式*/
/*头像*/
.tx{
border-radius: 100px;
}
.side-info-img{
border-radius: 100px;
width: 103px;
border: 2px solid #2c1ac17d;
position: relative;
margin: 20px auto;
}
.side-info-author,.side-info-link,.side-info-con{
text-align: center;
font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}
.side-info-con{
margin-bottom:20px; 
font-size: 12px;
padding: 0 15px 0px;
}
/*名片QQ*/
.author-social {
text-align: center;
padding: 20px 10px;
}
.author-social .author-weibo {
background-color: #19b5fe;
}
.author-social span {
display: inline-block;
margin-right: 10px;
border-radius: 2px;
}
.author-social span a {
padding: 5px 25px;
font-size: 15px;
color: #fff;
display: inline-block;
}
/*名片微博*/
.author-social .author-blog {
background-color: #ff5e5c;
}
/*一言文字颜色*/
pre {
color: #fff;
}
/*一言配置*/
.prettyprint,
pre.prettyprint {
white-space: pre-wrap!important;
word-wrap: break-word!important;
}

好了,基本就是这样了,如果有什么不懂的下面评论或者联系我QQ!

Tags:代码typcho名片
上一篇
下一篇

添加新评论

已有 2 条评论

 飞飞 3 星期前 • |

你说的很对,汉字的顺序并不一定影想阅读,我想这个错别字也一样吧!

 亿七 3 星期前 • |
@飞飞

什么?