<!-- 侧边栏自我介绍 --> <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>