前言

本主题版本已经内置了 飘雪特效代码换行图片点击放大自定义页脚信息移动端左侧栏个人信息面页美化的侧边栏,信息底色,主题菜单居中手机版侧栏登录注册,点击头像进入后台自定义注册链接 等一系列...还有很多需要根据创建面页设定添加代码,所以就没加上了,需要的可以去 我主看上寻找文章

没有内置演示的live2d,喜欢的可以去网站观看教程

https://aabbj.com 我的主站 https://killua.cf 我的镜像站

开始

首先创立面页,登录模板 叫 login,注册模板 叫 register,访问 https://你的网址/login 是登录面页, https://你的网址/register 是注册面页 才好开始动手!

下载点 google云盘 解压, 正常的主题安装方法就行了...

然后

复制下面css 代码,贴到你的 主题-自义定-额外CSS 当中。

/* 菜单栏居中 */
.site-header.is-homepage .lower-cantiner {
    display: none;
}
.site-header.is-homepage.yya .lower-cantiner {
    display: block;
}
.site-header:hover.is-homepage .lower-cantiner {
    display: block;
}
.site-top .lower-cantiner {
    position: absolute;
    left: 50%;
    min-width: 758.4px;
    pointer-events: none;
}
#show-nav.mobile-fit {
    position: fixed !important;
    right: 120px;
    opacity: 0;
    pointer-events: none;
}
/*此属性需要修改*/
.site-top .lower {
    position: relative;
    display: inline-block;
    margin: 15px 0 0 10px;
    font-size: 16px;
    left: -65%;
    pointer-events: auto !important;
}
/*此属性需要修改*/
@media(max-width:1200px) {
    .site-top .lower nav{
        right: calc(-150px - 100%);
        position: absolute;
        float: right;
        animation: searchbox .2s;
        min-width: 860px;
        z-index: -1
    }
    .site-top .lower nav.navbar {
        right: calc(-50px - 100%);
    }
    .site-top .lower nav.navbar ul {
        background: #fff;
    }
}

 /*側邊條*/
 .post-list-thumb:hover:after {
    height: 100%;
}
.post-list-thumb:after {
    content: ' ';
    width: 4px;
    height: 0;
    position: absolute;
    top: 0;
    background-color: rgb(105, 140, 255);/*颜色自己換*/
    box-shadow: 0 0 6px rgb(105, 165, 255);/*颜色自己換*/
    border-radius: 10px;
    transition: 1s all;
}
.post-list-thumb-left:after{
  right: 0;
 left: auto;
}
 /*代码换型*/
pre[class*="language-"].line-numbers > code {
	white-space: pre-wrap!important; 
}

/*底部信息*/

.github-badge {
  margin-left: 5px;
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px;
  font-size: 12px;
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.github-badge .bg-blue {
  background: linear-gradient(to right, #3a6186, #89253e);
}
.github-badge .bg-red {
  background: linear-gradient(to right, #ac0a5b, #00ff22);
}

.github-badge .bg-brightgreen {
  background: linear-gradient(to right, #fc5c7d, #6a82fb);
}

.github-badge .bg-orange {
  background: linear-gradient(to right, #f0c27b, #4b1248);
}

.github-badge .bg-gradient {
  background: linear-gradient(to right, #3ca5f6, #a86af9);
}

.github-badge .bg-blueviolet {
  background: linear-gradient(to right, #654ea3, #eaafc8);
}

.github-badge .bg-DNS {
background: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
}

/*添加底色*/
.post-meta span:nth-child(1) {
        background-color: rgb(0, 255, 0);/*颜色自己換*/
    padding: 0px 10px 3px 7px; /*尺寸自己換*/
    border-radius: 7px;/*尺寸自己換*/
    }
.post-meta span:nth-child(2) {
    background-color: rgb(251, 255, 0);/*颜色自己換*/
    padding: 0px 10px 3px 7px;/*尺寸自己換*/
    border-radius: 7px;/*尺寸自己換*/
}
.post-meta span:nth-child(3) {
        background-color: rgb(255, 135, 0);/*颜色自己換*/
    padding: 0px 10px 3px 7px;/*尺寸自己換*/
    border-radius: 7px;/*尺寸自己換*/
    }       /*1,2,3 分別對應 3個 底色*/

最后

主题的设置,看看文章,对比一下,修改回你自己的文字,超链接等....

完成.....


本当の声を響かせてよ