github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #273 from chengzhongxue/main 

页脚样式添加
This commit is contained in:
困困鱼 2023-07-12 22:26:24 +08:00 committed by GitHub
parent 3872e6c0ae 72f13f7723
commit 25828a29a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 267 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
settings.yaml
View File

@ -343,6 +343,15 @@ spec:
label: 随机封面
value: https://source.unsplash.com/random/600x400/?blog,scenery,night,desert,sea
help: 未设置文章封面时，将使用随机封面 (二次元随机图地址：https://www.dmoe.cc/random.php)
- $formkit: radio
name: articleCardPolish
label: 首页文章卡片(擦亮效果)
value: false
options:
- label: 显示
value: true
- label: 隐藏
value: false
- group: sidebar
label: 侧栏
@ -762,6 +771,95 @@ spec:
label: 页脚友链地址
placeholder: 请输入页脚友链地址
help: 注意格式 (`友链地址`)
- $formkit: group
name: footerContent
label: 页脚内容
value:
runtime:
footeStyle:
children:
- $formkit: select
name: footerStyle
id: footeStyle
key: footeStyle
label: 样式
value: default
options:
- value: default
label: 默认
- value: one
label: 样式一
- $formkit: group
if: $get(footeStyle).value == 'one'
name: style_one
label: 样式一
value:
runtime_enable:
work_img:
work_description:
offduty_img:
offduty_description:
bdageitem:
children:
- $formkit: radio
name: runtime_enable
id: runtime_enable
key: runtime_enable
value: true
label: 运行时间
options:
- label: 显示
value: true
- label: 隐藏
value: false
- $formkit: attachment
if: $get(runtime_enable).value
name: work_img
label: 上班时间的徽标
placeholder: 请输入内容
value: "https://0206.ink/upload/%E5%9B%B0%E5%9B%B0%E9%B1%BC-%E4%B8%8B%E7%8F%AD%E5%95%A6-yellowgreen.svg"
- $formkit: text
if: $get(runtime_enable).value
name: work_description
label: 上班时间的 title 描述
placeholder: 请输入内容
value: "距离月入25k也就还差一个大佬带我~"
- $formkit: attachment
if: $get(runtime_enable).value
name: offduty_img
label: 下班时间的徽标
placeholder: 请输入内容
value: "https://0206.ink/upload/%E5%9B%B0%E5%9B%B0%E9%B1%BC-%E4%B8%8B%E7%8F%AD%E5%95%A6-yellowgreen.svg"
- $formkit: text
if: $get(runtime_enable).value
name: offduty_description
label: 下班时间的 title 描述
placeholder: 请输入内容
value: "下班了就该开开心心的玩耍，嘿嘿~"
- $formkit: repeater
name: bdageitem
label: 徽标配置项
value: []
children:
- $formkit: url
name: link
label: 链接
placeholder: 请输入内容
value: "https://hexo.io/"
validation: required
- $formkit: attachment
name: shields
label: 徽标
placeholder: 请输入内容
validation: required
value: "https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg"
- $formkit: text
name: message
label: 徽标 title
placeholder: 请输入内容
validation: required
value: "博客框架为Hexo_v5.4.0"
- group: post
label: 文章
@ -986,7 +1084,7 @@ spec:
- group: fcircle
label: 友链鱼塘
formSchema:
- $formkit: url
- $formkit: attachment
name: backgroundImg
validation: url
label: 图片
@ -1673,7 +1771,7 @@ spec:
if: "$get(use).value == 'custom'"
label: cdn地址，外链地址
validation: required
value: '(https://npm.elemecdn.com/hao-theme-static@1.1.5/templates/assets'
value: 'https://npm.elemecdn.com/hao-theme-static@1.1.5/templates/assets'
help: '默认为npmJs的elemecdn加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
- $formkit: group
name: diytitle

58
templates/assets/zhheo/zhheoblog.css
View File

@ -14844,6 +14844,64 @@ figure.gallery-group:hover .gallery-group-name::after {
letter-spacing: -10px;
}
/*页脚样式一*/
[data-theme="light"] .copyright,#ghbdages,#workboard{
color: var(--font-color);
}
.copyright,#ghbdages,#workboard {
position: relative;
padding: 0px 20px;
text-align: center;
}
.haofont.hao-icon-heartbeat {
transition: 0.3s;
animation: heartbeat-bounce 2s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block);
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
#ghbdages .github-badge img {
height: 20px;
max-width: 150px;
border-radius: 4px;
pointer-events: none
}
#workboard img.boardsign {
width: 100%;
max-width: 130px;
border-radius: 0
}
@keyframes heartbeat-bounce {
0%,
100% {
transform: scale(1);
}
10%,
30% {
transform: scale(0.9);
}
20%,
40%,
60%,
80% {
transform: scale(1.1);
}
50%,
70% {
transform: scale(1.1);
}
}
#workboard {
font-size: 12px;
}
/*页脚样式一*/
/* 页脚底层背景 */
#footer:before {
position: absolute !important;

91
templates/modules/footer.html
View File

@ -49,7 +49,7 @@
</th:block>
<!-- 底部 banner -->
<div id="footer-banner">
<div th:if="${theme.config.footer.footerContent.footerStyle == 'default'}" id="footer-banner">
<div class="footer-banner-links">
<div class="footer-banner-left">
<div id="footer-banner-tips">
@ -91,6 +91,95 @@
</div>
</div>
<th:block th:if="${theme.config.footer.footerContent.footerStyle == 'one'}">
<div class="copyright" th:if="${not #strings.isEmpty(theme.config.basics.siteStartTime)}">
©[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] - [[${#dates.format(new
java.util.Date(), 'yyyy')}]] By [[${site.title}]]
</div>
<div class="copyright" th:if="${#strings.isEmpty(theme.config.basics.siteStartTime)}">
©[[${#dates.format(new java.util.Date(), 'yyyy')}]] By [[${site.title}]]
</div>
<div th:if="${theme.config.footer.footerContent.style_one.runtime_enable}" id="workboard">
<img class="workSituationImg boardsign"
th:src="${theme.config.footer.footerContent.style_one.work_img}"
th:alt="${theme.config.footer.footerContent.style_one.work_description}"
th:title="${theme.config.footer.footerContent.style_one.work_description}" />
<div id="runtimeTextTip"></div>
</div>
<p id="ghbdages"
th:with="bdageitem = ${theme.config.footer.footerContent.style_one.bdageitem}">
<a class="github-badge" th:each="data : ${bdageitem}" target="_blank"
th:href="@{${data.link}}" style="margin-inline:5px"
th:title="${data.message}">
<img th:src="@{${data.shields}}"
th:alt="${data.message}" />
</a>
</p>
<span style="padding: 20px 20px;">
</span>
<script async="async">(function () {
var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
var now = new Date();
var dnum;
var hnum;
var mnum;
var snum;
var nowHour;
// 计算并更新天数、小时数、分钟数和秒数
function updateTime() {
now = new Date(); // 更新 now 的值
nowHour = now.getHours(); // 更新 nowHour 的值
var days = (now - grt) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
hnum = Math.floor(hours);
if (String(hnum).length == 1) {
hnum = "0" + hnum;
}
var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
mnum = Math.floor(minutes);
if (String(mnum).length == 1) {
mnum = "0" + mnum;
}
var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
snum = Math.round(seconds);
if (String(snum).length == 1) {
snum = "0" + snum;
}
}
// 更新网页中显示的网站运行时间
function updateHtml() {
const footer = document.getElementById("footer");
if (!footer) return
let currentTimeHtml = "";
if (nowHour < 18 && nowHour >= 9) {
// 如果是上班时间，默认就是"困困鱼-上班摸鱼中.svg"图片，不需要更改
currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i>`;
} else {
// 如果是下班时间，插入"困困鱼-下班啦.svg"图片
let img = document.querySelector("#workboard .workSituationImg");
img.src = "[[${theme.config.footer.footerContent.style_one.work_img}]]";
img.title = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
img.alt = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i>`;
}
if (document.getElementById("runtimeTextTip")) {
document.getElementById("runtimeTextTip").innerHTML = currentTimeHtml;
}
}
setInterval(() => {
updateTime();
updateHtml();
}, 1000);
})();</script>
</th:block>
<!-- 右下角 snackbar 弹窗 -->
<div th:if="${theme.config.tool.snackbar.switch}" class="needEndHide" id="cookies-window">

19
templates/modules/post-list.html
View File

@ -80,6 +80,25 @@
</span>
</div>
</div>
<!-- 文章卡片擦亮效果 -->
<style th:if="${theme.config.layout.articleCardPolish}">
#recent-posts > .recent-post-item:not(a)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background: linear-gradient(to right, transparent, white, transparent);
transform: translateX(-200%);
transition: transform 0.5s linear;
z-index: 1;
}
#recent-posts > .recent-post-item:not(a):hover::before {
transform: translateX(100%) skewX(-60deg);
}
</style>
</div>
<!-- 分页 -->