470 lines
16 KiB
HTML
470 lines
16 KiB
HTML
|
<!-- 侧边栏自我介绍 -->
|
||
|
|
|
||
|
|
<div class="card-widget card-info" >
|
||
|
|
|
||
|
|
<!-- 默认 -->
|
||
|
|
<th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'default')}">
|
||
|
|
<!-- 描述信息 -->
|
||
|
|
<div class="card-content" th:style="|background-image: url(${theme.config.sidebar.profile.backgroundImg});|">
|
||
|
|
<div class="card-info-avatar is-center">
|
||
|
|
<div class="author-info__top-group">
|
||
|
|
<div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
|
||
|
|
</div>
|
||
|
|
<img class="avatar-img"
|
||
|
|
th:with=" img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
|
||
|
|
|
||
|
|
th:src="${isLazyload ? loadingImg : img}"
|
||
|
|
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||
|
|
</div>
|
||
|
|
<div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
|
||
|
|
th:text="${site.title}"></div>
|
||
|
|
<div class="author-info__name" th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
|
||
|
|
th:text="${theme.config.sidebar.profile.profileName}"></div>
|
||
|
|
<div class="author-info__description" th:utext="${theme.config.sidebar.profile.profileDesc}">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 跳转信息 -->
|
||
|
|
<div class="banner-button-group">
|
||
|
|
<a class="banner-button" href="/about">
|
||
|
|
<i class="haofont hao-icon-circle-arrow-right"></i>
|
||
|
|
<span class="banner-button-text">了解更多</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-info-social-icons is-center"
|
||
|
|
th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
|
||
|
|
th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">
|
||
|
|
|
||
|
|
<a class="social-icon" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
|
||
|
|
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
|
||
|
|
<i th:class="${socialMedia.icon}"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 社交按钮 */
|
||
|
|
#aside-content .card-info #card-info-btn {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons {
|
||
|
|
margin: 0;
|
||
|
|
padding-top: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 1rem;
|
||
|
|
left: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons .social-icon {
|
||
|
|
margin: 0;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons i {
|
||
|
|
background: var(--heo-white-op);
|
||
|
|
color: var(--heo-white);
|
||
|
|
font-size: 1.2rem;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons i:hover {
|
||
|
|
background: var(--heo-white-op);
|
||
|
|
transform: scale(1.1);
|
||
|
|
color: var(--heo-white);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .banner-button {
|
||
|
|
height: 40px;
|
||
|
|
width: 124px;
|
||
|
|
border-radius: 20px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 1300px) {
|
||
|
|
#aside-content .card-info .card-info-social-icons i {
|
||
|
|
color: var(--heo-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark] #aside-content .card-info .card-info-social-icons i {
|
||
|
|
color: var(--heo-white);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info img {
|
||
|
|
width: 28px;
|
||
|
|
right: 24px;
|
||
|
|
top: 20px;
|
||
|
|
border-radius: 500px;
|
||
|
|
transition: all 0.5s ease 0s;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .author-info__name {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 1.57em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .author-info__name {
|
||
|
|
text-align: left;
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--heo-white);
|
||
|
|
font-size: 28px;
|
||
|
|
line-height: 1.1;
|
||
|
|
margin-top: 0.8rem;
|
||
|
|
margin-bottom: 0.4rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</th:block>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 样式一 -->
|
||
|
|
<th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'one')}">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="card-info-avatar is-center">
|
||
|
|
<div class="author-info__top-group">
|
||
|
|
<div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="avatar-img-group">
|
||
|
|
<img class="avatar-img" alt="avatar"
|
||
|
|
th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
|
||
|
|
|
||
|
|
th:src="${isLazyload ? loadingImg : img}"
|
||
|
|
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||
|
|
<div class="avatar-sticker">
|
||
|
|
<img class="avatar-sticker-img" alt="avatar"
|
||
|
|
th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"
|
||
|
|
|
||
|
|
th:src="${isLazyload ? loadingImg : img}"
|
||
|
|
th:data-lazy-src="${ isLazyload ? img : ''}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
|
||
|
|
</div>
|
||
|
|
<div class="author-info__bottom-group">
|
||
|
|
<a th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
|
||
|
|
class="author-info__bottom-group-left" href="/about" data-pjax-state="">
|
||
|
|
<div class="author-info__name">[[${theme.config.sidebar.profile.profileName}]]</div>
|
||
|
|
<div class="author-info__desc">[[${theme.config.sidebar.profile.desc}]]</div>
|
||
|
|
</a>
|
||
|
|
<div class="card-info-social-icons is-center"
|
||
|
|
th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
|
||
|
|
th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">
|
||
|
|
<a class="social-icon" rel="external nofollow" target="_blank"
|
||
|
|
th:each="socialMedia : ${socialMedias}" th:href="${socialMedia.url}"
|
||
|
|
th:title="${socialMedia.name}">
|
||
|
|
<i th:class="${socialMedia.icon}"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.card-info-avatar.is-center {
|
||
|
|
flex-direction: column;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info img.avatar-img {
|
||
|
|
width: 118px;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
border-radius: 500px;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 1;
|
||
|
|
transition: .3s;
|
||
|
|
border: 5px solid var(--heo-white);
|
||
|
|
overflow: hidden
|
||
|
|
}
|
||
|
|
|
||
|
|
.page #aside-content .card-info img.avatar-img {
|
||
|
|
border-color: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__top-group {
|
||
|
|
display: flex;
|
||
|
|
height: 28px;
|
||
|
|
width: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__desc {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--heo-white);
|
||
|
|
opacity: .6;
|
||
|
|
line-height: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-img-group {
|
||
|
|
width: 118px;
|
||
|
|
height: 118px;
|
||
|
|
right: calc(50% - 59px);
|
||
|
|
top: 90px;
|
||
|
|
border-radius: 500px;
|
||
|
|
position: absolute;
|
||
|
|
transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
|
||
|
|
transform-origin: bottom
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info:hover .avatar-img-group {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__bottom-group {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
position: absolute;
|
||
|
|
padding: 1.2rem;
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
align-items: center
|
||
|
|
}
|
||
|
|
|
||
|
|
a.author-info__bottom-group-left:hover {
|
||
|
|
opacity: .8
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons {
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
cursor: pointer
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons i:hover {
|
||
|
|
transform: rotate(540deg);
|
||
|
|
background-color: #000;
|
||
|
|
cursor: pointer
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons .social-icon {
|
||
|
|
margin: 0;
|
||
|
|
margin-left: 8px
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons i {
|
||
|
|
background: var(--heo-white-op);
|
||
|
|
color: var(--heo-white);
|
||
|
|
font-size: 1rem;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-social-icons i:hover {
|
||
|
|
background: var(--heo-white);
|
||
|
|
transform: scale(1.1);
|
||
|
|
color: var(--heo-main);
|
||
|
|
box-shadow: none
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark] .page #aside-content .card-info .card-info-social-icons i {
|
||
|
|
background: var(--heo-black-op);
|
||
|
|
color: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark] .page #aside-content .card-info .card-info-social-icons i:hover {
|
||
|
|
background: var(--heo-card-bg);
|
||
|
|
color: var(--heo-fontcolor)
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .banner-button {
|
||
|
|
height: 40px;
|
||
|
|
width: 118px;
|
||
|
|
border-radius: 20px;
|
||
|
|
justify-content: center
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 1300px) {
|
||
|
|
#aside-content .card-info .card-info-social-icons i {
|
||
|
|
color: var(--heo-white)
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark] .page #aside-content .card-info .card-info-social-icons i {
|
||
|
|
color: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .card-info-data>.card-info-data-item:hover {
|
||
|
|
background: var(--heo-post-blockquote-bg);
|
||
|
|
transform: scale(.97)
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content>div.card-widget.card-info>div.card-content>div.card-info-data>.card-info-data-item:hover>a>div.headline,#aside-content>div.card-widget.card-info>div.card-content>div.card-info-data>.card-info-data-item:hover>a>div.length-num {
|
||
|
|
color: var(--heo-blue)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description_group {
|
||
|
|
position: absolute;
|
||
|
|
top: 50px;
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
padding: 1.2rem;
|
||
|
|
opacity: 0;
|
||
|
|
transition: .3s
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-widget:hover .author-info__description_group {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description2 {
|
||
|
|
line-height: 1.38;
|
||
|
|
margin: .3rem 0;
|
||
|
|
text-align: justify;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 2;
|
||
|
|
color: rgba(255, 255, 255, .8)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description2 b {
|
||
|
|
color: var(--heo-white)
|
||
|
|
}
|
||
|
|
|
||
|
|
div#author-info__sayhi {
|
||
|
|
text-align: center;
|
||
|
|
width: fit-content;
|
||
|
|
color: var(--heo-white);
|
||
|
|
background: var(--heo-white-op);
|
||
|
|
font-size: 12px;
|
||
|
|
margin-right: auto;
|
||
|
|
padding: 2px 8px;
|
||
|
|
border-radius: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
transition: .3s;
|
||
|
|
margin: auto;
|
||
|
|
min-width: 100px
|
||
|
|
}
|
||
|
|
|
||
|
|
div#author-info__sayhi:hover {
|
||
|
|
background: var(--heo-white);
|
||
|
|
color: var(--heo-main);
|
||
|
|
transform: scale(1.1)
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme=dark] .page div#author-info__sayhi {
|
||
|
|
background: var(--heo-black-op);
|
||
|
|
color: var(--heo-black)
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content .card-info .author-info__name {
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--heo-white);
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 5px
|
||
|
|
}
|
||
|
|
|
||
|
|
.page #aside-content .card-info .author-info__name,.page .author-info__desc {
|
||
|
|
color: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__desc {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--heo-white);
|
||
|
|
opacity: .6;
|
||
|
|
line-height: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description {
|
||
|
|
line-height: 1.38;
|
||
|
|
margin: .3rem 0;
|
||
|
|
text-align: justify;
|
||
|
|
color: var(--heo-white);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.page .author-info__description {
|
||
|
|
color: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description b {
|
||
|
|
color: var(--heo-white);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.page .author-info__description b {
|
||
|
|
color: var(--heo-card-bg);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-sticker {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2px;
|
||
|
|
right: 2px;
|
||
|
|
width: 33px;
|
||
|
|
height: 33px;
|
||
|
|
line-height: 34px;
|
||
|
|
z-index: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: .3s ease-out .2s;
|
||
|
|
transform: scale(1);
|
||
|
|
background: var(--heo-white);
|
||
|
|
border-radius: 50%
|
||
|
|
}
|
||
|
|
|
||
|
|
.page .avatar-sticker {
|
||
|
|
background: var(--heo-card-bg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-sticker img {
|
||
|
|
width: 26px;
|
||
|
|
height: 26px
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-widget:hover .avatar-sticker {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0)
|
||
|
|
}
|
||
|
|
|
||
|
|
.author-info__description b {
|
||
|
|
color: var(--heo-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
#aside-content>.card-widget.card-info::before {
|
||
|
|
background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
|
||
|
|
background-size: 400%;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
content: '';
|
||
|
|
animation: gradient 15s ease infinite;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
</th:block>
|
||
|
|
|
||
|
|
</div>
|