页脚图标添加自定义

This commit is contained in:
1152958806@qq.com 2023-10-18 17:15:33 +08:00
parent f18fad8b3f
commit 5098b2d41f
5 changed files with 66 additions and 15 deletions

View File

@ -509,8 +509,6 @@ spec:
value: col2
- label: 三列
value: col3
- label: 四列
value: col4
- $formkit: select
name: postLocation
label: 封面位置
@ -933,29 +931,56 @@ spec:
label: 左侧
value: [ ]
children:
- $formkit: text
- $formkit: radio
name: option_social_data
label: 类型
value: icon
help: "icon图标选择icon图标svg代码或者图片(如果使用图片请输入完整img标签)选择自定义"
options:
- value: icon
label: icon图标
- value: custom
label: 自定义
- $formkit: textarea
name: icon
help: "icon图标svg代码图片(如果使用图片请输入完整img标签)"
label: 图标
validation: "required"
- $formkit: text
name: name
label: 名称
validation: "required"
- $formkit: text
name: url
label: 链接
validation: "required"
- $formkit: repeater
name: socialMediaRight
label: 右侧
value: [ ]
children:
- $formkit: text
- $formkit: radio
name: option_social_data
label: 类型
value: icon
options:
- value: icon
label: icon图标
- value: custom
label: 自定义
- $formkit: textarea
name: icon
help: "icon图标或svg代码或者图片(如果使用图片请输入完整img标签)"
label: 图标
validation: "required"
- $formkit: text
name: name
label: 名称
validation: "required"
- $formkit: text
name: url
label: 链接
validation: "required"
- $formkit: menuRadio
name: menu
label: 相关链接

View File

@ -11,14 +11,18 @@
}
.back-home-button {
.page .back-home-button {
color: rgba(255, 255, 255, 0.7);
}
#nav #site-name {
.page #nav #site-name span {
color: var(--light-grey);
}
.nav-fixed #nav #site-name span{
color: var(--heo-fontcolor);
}
#nav .site-page {
color: rgba(255, 255, 255, 0.7);
}

View File

@ -5362,10 +5362,11 @@ html {
}
}
.nav-fixed #nav .back-home-button {
.nav-fixed #nav .back-home-button{
color: var(--heo-fontcolor);
}
.back-home-button:hover {
background: var(--heo-main);
color: var(--heo-white);
@ -6276,6 +6277,22 @@ a.deal_link:hover {
transform: scale(1.1)
}
a.custom_socials {
display: flex;
margin: 1rem 27px;
border-radius: 3rem;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
transition: 0.3s;
}
a.custom_socials:hover {
transform: scale(1.1)
}
img.footer_mini_logo {
width: 50px;
height: 50px;

View File

@ -72,10 +72,12 @@
<script type="text/javascript" th:src="${assets_link + '/libs/moments/bundle.js'}"></script>
<style>
/*修复友链朋友圈管理面板显示太大导致无法关闭的bug*/
.cf-manage-pannel[data-v-34921c7c] {
width: 80% !important;
height: 80% !important;
.cf-article-author:hover {
color: var(--heo-card-bg)!important
}
#cf-more:hover{
background: var(--heo-lighttext)!important;
color: var(--heo-card-bg)!important
}
</style>

View File

@ -12,9 +12,10 @@
<!-- 社交链接,需要填入 href class title -->
<div id="footer_deal">
<th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaLeft}">
<a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
<a th:class="${socialMedia.option_social_data == 'custom' ? 'custom_socials' : 'deal_link'}" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
<i th:class="${socialMedia.icon}"></i>
<i th:if="${socialMedia.option_social_data == 'icon'}" th:class="${socialMedia.icon}"></i>
<th:block th:if="${socialMedia.option_social_data == 'custom'}" th:utext="${socialMedia.icon}"></th:block>
</a>
</th:block>
@ -22,9 +23,11 @@
th:with="img = @{${theme.config.footer.social_media.centerImg}}" th:src="${isLazyload ? '' : img}"
th:data-lazy-src="${ isLazyload ? img : ''}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
<th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaRight}">
<a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
<a th:class="${socialMedia.option_social_data == 'custom' ? 'custom_socials' : 'deal_link'}" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
<i th:class="${socialMedia.icon}"></i>
<i th:if="${socialMedia.option_social_data == 'icon' || #strings.isEmpty(socialMedia.option_social_data)}"
th:class="${socialMedia.icon}"></i>
<th:block th:if="${socialMedia.option_social_data == 'custom'}" th:utext="${socialMedia.icon}"></th:block>
</a>
</th:block>
</div>