困困鱼
GitHub
commit
0438698576
|
|
@ -464,7 +464,32 @@ spec:
|
|||
profileName:
|
||||
profileDesc:
|
||||
socialMedia:
|
||||
profileStyle:
|
||||
desc:
|
||||
stickerImg:
|
||||
children:
|
||||
- $formkit: select
|
||||
name: profileStyle
|
||||
id: profileStyle
|
||||
key: profileStyle
|
||||
label: 样式
|
||||
value: default
|
||||
options:
|
||||
- value: default
|
||||
label: 默认
|
||||
- value: one
|
||||
label: 样式一
|
||||
- $formkit: attachment
|
||||
name: stickerImg
|
||||
if: $get(profileStyle).value == 'one'
|
||||
label: 贴纸
|
||||
value: https://0206.ink/upload/omxo3N22290781690363822143.png
|
||||
placeholder: 请输入图片地址
|
||||
- $formkit: text
|
||||
if: $get(profileStyle).value == 'one'
|
||||
name: desc
|
||||
value: "分享设计与科技生活"
|
||||
label: 卡片名称下面的描述
|
||||
- $formkit: text
|
||||
name: helloText
|
||||
label: 作者打招呼
|
||||
|
|
@ -1063,6 +1088,41 @@ spec:
|
|||
label: 运营模式与责任地址
|
||||
placeholder: 请输入运营模式与责任地址
|
||||
value: /rss
|
||||
- $formkit: group
|
||||
name: share_right
|
||||
label: 分享按钮
|
||||
value:
|
||||
mobile_edit:
|
||||
weibo_edit:
|
||||
copyurl_edit:
|
||||
children:
|
||||
- $formkit: radio
|
||||
name: mobile_edit
|
||||
help: 启用分享手机访问二维码
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: weibo_edit
|
||||
help: 启用分享到微博
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: copyurl_edit
|
||||
help: 启用复制链接
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: group
|
||||
name: copyrights
|
||||
label: 版权声明
|
||||
|
|
|
|||
|
|
@ -305,3 +305,13 @@ img.post-copyright__author_img_front {
|
|||
background:var(--heo-card-bg);
|
||||
}
|
||||
|
||||
.post-tools .post-tools-left .rewardLeftButton,.post-tools .post-tools-left .shareRight {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: box;
|
||||
display: flex;
|
||||
margin: 10px
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -223,28 +223,40 @@ function showcopy() {
|
|||
// 早上好问好
|
||||
// 获取时间
|
||||
var getTimeState = () => {
|
||||
// 获取当前时间
|
||||
var timeNow = new Date();
|
||||
// 获取当前小时
|
||||
var hours = timeNow.getHours();
|
||||
// 设置默认文字
|
||||
var text = ``;
|
||||
// 判断当前时间段
|
||||
if (hours >= 0 && hours <= 5) {
|
||||
text = `晚安`;
|
||||
} else if (hours > 5 && hours <= 10) {
|
||||
text = `早上好`;
|
||||
} else if (hours > 10 && hours <= 14) {
|
||||
text = `中午好`;
|
||||
} else if (hours > 14 && hours <= 18) {
|
||||
text = `下午好`;
|
||||
} else if (hours > 18 && hours <= 24) {
|
||||
text = `晚上好`;
|
||||
|
||||
if (GLOBAL_CONFIG.profileStyle == 'default') {
|
||||
// 获取当前时间
|
||||
var timeNow = new Date();
|
||||
// 获取当前小时
|
||||
var hours = timeNow.getHours();
|
||||
// 设置默认文字
|
||||
var text = ``;
|
||||
// 判断当前时间段
|
||||
if (hours >= 0 && hours <= 5) {
|
||||
text = `晚安`;
|
||||
} else if (hours > 5 && hours <= 10) {
|
||||
text = `早上好`;
|
||||
} else if (hours > 10 && hours <= 14) {
|
||||
text = `中午好`;
|
||||
} else if (hours > 14 && hours <= 18) {
|
||||
text = `下午好`;
|
||||
} else if (hours > 18 && hours <= 24) {
|
||||
text = `晚上好`;
|
||||
}
|
||||
// console.log(`hours >>>>>`, hours);
|
||||
// console.log(`text >>>>`, text);
|
||||
// 返回当前时间段对应的状态
|
||||
return text;
|
||||
|
||||
}
|
||||
// console.log(`hours >>>>>`, hours);
|
||||
// console.log(`text >>>>`, text);
|
||||
// 返回当前时间段对应的状态
|
||||
return text;
|
||||
|
||||
if (GLOBAL_CONFIG.profileStyle == 'one') {
|
||||
var e = (new Date).getHours()
|
||||
, t = "";
|
||||
return e >= 0 && e <= 5 ? t = "睡个好觉，保证精力充沛" : e > 5 && e <= 10 ? t = "一日之计在于晨" : e > 10 && e <= 14 ? t = "吃饱了才有力气干活" : e > 14 && e <= 18 ? t = "集中精力，攻克难关" : e > 18 && e <= 24 && (t = "不要太劳累了，早睡更健康"),
|
||||
t
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function fly_to_top() {
|
||||
|
|
|
|||
|
|
@ -2098,24 +2098,14 @@ blockquote footer cite::before {
|
|||
}
|
||||
}
|
||||
|
||||
#aside-content .card-info img {
|
||||
width: 28px;
|
||||
right: 24px;
|
||||
top: 20px;
|
||||
border-radius: 500px;
|
||||
transition: all 0.5s ease 0s;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.author-info__top-group {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#aside-content .card-info .author-info__name {
|
||||
font-weight: 500;
|
||||
font-size: 1.57em;
|
||||
}
|
||||
|
||||
|
||||
#aside-content .card-info .author-info__description {
|
||||
margin-top: -0.3rem;
|
||||
|
|
@ -10230,15 +10220,6 @@ div#author-info__sayhi:hover {
|
|||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* 作者卡片背景 */
|
||||
#aside-content > .card-widget:first-child {
|
||||
|
|
@ -10417,62 +10398,7 @@ div#author-info__sayhi:hover {
|
|||
}
|
||||
}
|
||||
|
||||
/* 社交按钮 */
|
||||
#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-secondbg);
|
||||
transform: scale(0.97);
|
||||
color: var(--heo-main);
|
||||
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 .card-info-data > .card-info-data-item:hover {
|
||||
background: var(--heo-post-blockquote-bg);
|
||||
|
|
|
|||
|
|
@ -201,6 +201,7 @@
|
|||
isMusic: [[${ htmlType == 'music'}]],
|
||||
helloText: [[${#strings.listSplit(theme.config.sidebar.profile.helloText, ',')}]],
|
||||
assetsLink: [[${assets_link}]],
|
||||
profileStyle: [[${theme.config.sidebar.profile.profileStyle}]],
|
||||
source: {
|
||||
links:{
|
||||
randomfriendurl: [[${theme.config.link.randomfriendurl}]],
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 分享 -->
|
||||
<div class="share-link mobile">
|
||||
<div class="share-link mobile" th:if="${theme.config.post.share_right.mobile_edit}">
|
||||
<div class="share-qrcode">
|
||||
<div class="share-button" title="使用手机访问这篇文章"><i class="iconfont icon-qrcode"></i>
|
||||
</div>
|
||||
|
|
@ -54,12 +54,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-link weibo">
|
||||
<div class="share-link weibo" th:if="${theme.config.post.share_right.weibo_edit}">
|
||||
<a class="share-button" rel="noopener external nofollow noreferrer noopener" target="_blank"
|
||||
th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}" title="分享到微博">
|
||||
<i class="iconfont icon-weibo" style="font-size:22px"></i></a>
|
||||
</div>
|
||||
<div class="share-link copyurl">
|
||||
<div class="share-link copyurl" th:if="${theme.config.post.share_right.copyurl_edit}">
|
||||
<div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
|
||||
class="iconfont icon-link"></i></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,51 +7,72 @@
|
|||
<div class="post-copyright__author_group"><a class="post-copyright__author_img" href="/about"
|
||||
data-pjax-state="">
|
||||
<img class="post-copyright__author_img_back entered loading"
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
|
||||
></a>
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"></a>
|
||||
<div class="post-copyright__author_name">[[${site.title}]]</div>
|
||||
<div class="post-copyright__author_desc">[[${theme.config.post.desc}]]</div>
|
||||
</div>
|
||||
<div class="post-tools" id="post-tools">
|
||||
<div class="post-tools-left">
|
||||
<div th:if="${theme.config.aboutReward.reward.enable_reward_wz}" class="post-reward"
|
||||
onclick="AddRewardMask()">
|
||||
<div class="reward-button button--animated" title="打赏作者"><i
|
||||
class="fas fa-hamburger"></i> 打赏作者</div>
|
||||
<div class="reward-main">
|
||||
<ul class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span>
|
||||
<ul class="reward-group">
|
||||
<li class="reward-item"><a
|
||||
th:href="@{${theme.config.aboutReward.reward.wxPay}}"
|
||||
target="_blank">
|
||||
<img alt="微信" class="post-qr-code-img"
|
||||
th:src="${theme.config.aboutReward.reward.wxPay}"></a>
|
||||
<div class="post-qr-code-desc">微信</div>
|
||||
</li>
|
||||
<li class="reward-item"><a
|
||||
th:href="@{${theme.config.aboutReward.reward.alipay}}"
|
||||
target="_blank"><img alt="支付宝" class="post-qr-code-img"
|
||||
th:src="${theme.config.aboutReward.reward.alipay}"></a>
|
||||
<div class="post-qr-code-desc">支付宝</div>
|
||||
</li>
|
||||
<div class="rewardLeftButton" th:if="${theme.config.aboutReward.reward.enable_reward_wz || theme.config.post.post_edit.enable_post_edit}">
|
||||
<div th:if="${theme.config.aboutReward.reward.enable_reward_wz}" class="post-reward"
|
||||
onclick="AddRewardMask()">
|
||||
<div class="reward-button button--animated" title="打赏作者"><i class="fas fa-hamburger"></i> 打赏作者
|
||||
</div>
|
||||
<div class="reward-main">
|
||||
<ul class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span>
|
||||
<ul class="reward-group">
|
||||
<li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.wxPay}}"
|
||||
target="_blank">
|
||||
<img alt="微信" class="post-qr-code-img"
|
||||
th:src="${theme.config.aboutReward.reward.wxPay}"></a>
|
||||
<div class="post-qr-code-desc">微信</div>
|
||||
</li>
|
||||
<li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.alipay}}"
|
||||
target="_blank"><img alt="支付宝" class="post-qr-code-img"
|
||||
th:src="${theme.config.aboutReward.reward.alipay}"></a>
|
||||
<div class="post-qr-code-desc">支付宝</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="reward-main-btn" th:href="@{${theme.config.aboutReward.reward.reward_md_url}}"
|
||||
target="_blank">
|
||||
<div class="reward-text">赞赏者名单</div>
|
||||
<div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>
|
||||
</a>
|
||||
</ul>
|
||||
<a class="reward-main-btn"
|
||||
th:href="@{${theme.config.aboutReward.reward.reward_md_url}}"
|
||||
target="_blank">
|
||||
<div class="reward-text">赞赏者名单</div>
|
||||
<div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div th:if="${theme.config.post.post_edit.enable_post_edit}" class="reward-link mode"><a
|
||||
class="reward-link-button" th:href="@{${theme.config.post.post_edit.post_edit_url}}"
|
||||
data-pjax-state=""><i class="fas fa-seedling"></i>订阅</a></div>
|
||||
</div>
|
||||
<div class="shareRight"
|
||||
th:if="${theme.config.post.share_right.mobile_edit || theme.config.post.share_right.weibo_edit || theme.config.post.share_right.copyurl_edit}">
|
||||
<div class="share-link mobile" th:if="${theme.config.post.share_right.mobile_edit}">
|
||||
<div class="share-qrcode">
|
||||
<div class="share-button" title="使用手机访问这篇文章"><i class="iconfont icon-qrcode"></i>
|
||||
</div>
|
||||
<div class="share-main">
|
||||
<div class="share-main-all">
|
||||
<div id="qrcode"></div>
|
||||
<div class="reward-dec">使用手机访问这篇文章</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-link weibo" th:if="${theme.config.post.share_right.weibo_edit}">
|
||||
<a class="share-button" rel="noopener external nofollow noreferrer noopener" target="_blank"
|
||||
th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}"
|
||||
title="分享到微博">
|
||||
<i class="iconfont icon-weibo" style="font-size:22px"></i></a>
|
||||
</div>
|
||||
<div class="share-link copyurl" th:if="${theme.config.post.share_right.copyurl_edit}">
|
||||
<div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
|
||||
class="iconfont icon-link"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:if="${theme.config.post.post_edit.enable_post_edit}" class="reward-link mode"><a
|
||||
class="reward-link-button" th:href="@{${theme.config.post.post_edit.post_edit_url}}"
|
||||
data-pjax-state=""><i class="fas fa-seedling"></i>订阅</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
th:if="${theme.config.post.copyrights.enable}"
|
||||
class="post-copyright__notice">
|
||||
<div th:if="${theme.config.post.copyrights.enable}" class="post-copyright__notice">
|
||||
<span class="post-copyright-info" th:utext="${theme.config.post.copyrights.content}"></span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<!-- 最新评论 -->
|
||||
<!-- 通讯录 -->
|
||||
<div class="card-widget card-friend-link" th:fragment="friend-link">
|
||||
<div class="item-headline"><i class="haofont hao-icon-tongxunlu07"
|
||||
style="font-size: 0.9rem;font-weight: 700;"></i><span>通讯录</span></div>
|
||||
|
|
|
|||
|
|
@ -3,45 +3,411 @@
|
|||
<!-- 侧边栏自我介绍 -->
|
||||
|
||||
<div class="card-widget card-info" th:fragment="profile">
|
||||
<!-- 描述信息 -->
|
||||
<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>
|
||||
<img class="avatar-img entered loaded"
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
|
||||
</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}">
|
||||
|
||||
<!-- 默认 -->
|
||||
<th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'default')}">
|
||||
<!-- 描述信息 -->
|
||||
<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>
|
||||
<img class="avatar-img entered loaded"
|
||||
th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
|
||||
</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>
|
||||
|
||||
<!-- 跳转信息 -->
|
||||
<div class="banner-button-group">
|
||||
<a class="banner-button" href="/about">
|
||||
<i class="iconfont icon-arrow-circle-right"></i>
|
||||
<span class="banner-button-text">了解更多</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 跳转信息 -->
|
||||
<div class="banner-button-group">
|
||||
<a class="banner-button" href="/about">
|
||||
<i class="iconfont icon-arrow-circle-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}">
|
||||
<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 class="iconfont " th:classappend="${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-secondbg);
|
||||
transform: scale(0.97);
|
||||
color: var(--heo-main);
|
||||
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:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
|
||||
<div class="avatar-sticker"><img class="avatar-sticker-img" alt="avatar"
|
||||
th:src="@{${theme.config.sidebar.profile.stickerImg}}"></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 class="iconfont " th:classappend="${socialMedia.icon}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.is-center {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
#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-secondbg);
|
||||
transform: scale(1.1);
|
||||
color: var(--heo-main);
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
#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] #aside-content .card-info .card-info-social-icons i {
|
||||
color: var(--heo-white)
|
||||
}
|
||||
}
|
||||
|
||||
.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-card-bg);
|
||||
color: var(--heo-fontcolor);
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
#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
|
||||
}
|
||||
|
||||
.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: rgba(255, 255, 255, .8)
|
||||
}
|
||||
|
||||
.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 .2s;
|
||||
transform: scale(1);
|
||||
background: var(--heo-white);
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<a class="social-icon" rel="external nofollow" target="_blank"
|
||||
th:each="socialMedia : ${socialMedias}"
|
||||
th:href="${socialMedia.url}"
|
||||
th:title="${socialMedia.name}">
|
||||
<i class="iconfont " th:classappend="${socialMedia.icon}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
|
@ -24,8 +24,11 @@
|
|||
<div class="author-content-item-tips">标签</div>
|
||||
<span class="author-content-item-title">寻找感兴趣的领域</span>
|
||||
</div>
|
||||
<div class="card-tag-cloud" th:with="tags = ${tagFinder.listAll()}">
|
||||
<a style="font-size:1em;color:#d3d3d3" th:each="tag : ${tags}" th:href="@{${tag.status.permalink}}">
|
||||
<div class="card-tag-cloud" th:with="tags = ${tagFinder.listAll()}, tagQuantity = ${#conversions.convert(theme.config.sidebar.tagQuantity, 'java.lang.Integer')}">
|
||||
<a style="font-size:1em;color:#d3d3d3"
|
||||
th:each="tag,iterStat : ${tags}"
|
||||
th:href="@{${tag.status.permalink}}"
|
||||
th:if="${tagQuantity >= 0 && iterStat.index < tagQuantity || tagQuantity < 0}">
|
||||
[[${tag.spec.displayName}]]<sup th:text="${tag.status.visiblePostCount}"></sup>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue