看着别人博客主页的看板娘好萌好贴心,自己也想弄一个啊此处记录自己的学习实践过程,也供大家参考我认为一个不太够所以我弄了两个哈哈题外话.
首先第一个我是参考CSDN里的博主燕穗子博客
https://blog.csdn.net/m0_64346035/article/details/124436138?spm=1001.2014.3001.5506
他是直接添加在PHP里面但是有时候可能加载不出来要耐心等待一下因为我弄这个搞了两天才出来的有时候不太稳定
https://www.cnblogs.com/pumpkinhlk/p/15410970.html
https://www.cnblogs.com/eve-d/p/15683541.html
第二个是在typecho里的直接修改外观改自定义CSS样式和自定义body标签末尾位置内容,自定义Footer内容可加可不加
CSS代码：
*{
transition: all 0.4s;
}
home {
margin: 0 auto;
width: 80%;/原始65/
min-width: 980px;/页面顶部的宽度/
">rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background-image: url("http://ww4.sinaimg.cn/large/637d0877gw1exlma5gj0wj21hc0u04p6.jpg");
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
navList li{
cursor: pointer;
transition: all 0.2s;
}
navList li:hover {
transform: scale(1.5) rotate(360deg);
color:#FF0;
opacity:0.5;
}
blogTitle {
height: 100px; /高度/
clear: both;
">rgba(245, 245, 245, 0);
}
blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/原始 1.6em/
margin-top: 10px;/原始 15px /
color: #548B54;
}
blogTitle h2 {
font-weight: normal;
font-size: 17px;/原始 16px ；font-size: 1.0rem;/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
navigator{
">rgba(33, 160, 139, 0.9);
}
navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/文章附加信息/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/5px padding-left: 90px;posted 发表时间左边距离/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
">rgba(33, 160, 139, 0.9);
}
topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
但是我觉得太长了因为太长了看起来很麻烦
canvas#live2dcanvas {
border: 0 !important;
left: 0;
}
这个相对了说比较适合
最重要的还是自定义body标签末尾位置内容
看板娘的图形代码地址合集：https://www.lanol.cn/post/305.html
还可以自己弄一张图片上去还有聊天内容也可以修改可以看看上面的链接
以上都是借鉴大佬们的如有侵权请及时告诉我，我立即修改！
其他版本:https://paugram.com/coding/add-poster-girl-with-plugin.html
