halo-theme-hao/templates/modules/widgets/aside/profile.html

470 lines
16 KiB
HTML
Raw Permalink Normal View History

2024-04-12 06:35:37 +00:00
<!-- 侧边栏自我介绍 -->
<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>