困困鱼
GitHub
commit
bb565c5963
17
README.md
17
README.md
|
|
@ -37,14 +37,15 @@
|
|||
|
||||
## 🔥 预览
|
||||
|
||||
| 站点名称 | 站点地址 |
|
||||
| :---: | :----: |
|
||||
| 程序员小航 | https://liuzhihang.com |
|
||||
| 小孙同学 | https://blog.sunguoqi.com |
|
||||
| 流殃 | https://shyblog.world |
|
||||
| 羡羡 | https://www.hydsb0.com/ |
|
||||
| 困困鱼 | https://0206.ink |
|
||||
| Top John | https://op-lab.top |
|
||||
| 站点名称 | 站点地址 |
|
||||
|:--------:|:-------------------------:|
|
||||
| 程序员小航 | https://liuzhihang.com |
|
||||
| 小孙同学 | https://blog.sunguoqi.com |
|
||||
| 流殃 | https://shyblog.world |
|
||||
| 羡羡 | https://www.hydsb0.com/ |
|
||||
| 困困鱼 | https://0206.ink |
|
||||
| Top John | https://op-lab.top |
|
||||
| Roozen | https://roozen.top |
|
||||
|
||||
## 👋 简介
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,15 @@ spec:
|
|||
value: true
|
||||
- label: 隐藏
|
||||
value: false
|
||||
- $formkit: repeater
|
||||
name: typed
|
||||
label: 打字机显示的文字
|
||||
value: [ ]
|
||||
children:
|
||||
- $formkit: text
|
||||
name: text
|
||||
label: 文字
|
||||
placeholder: 请输入文字
|
||||
- $formkit: attachment
|
||||
name: index_img
|
||||
if: $get(enable_above).value
|
||||
|
|
@ -1152,7 +1161,6 @@ spec:
|
|||
value: "/links"
|
||||
label: 友链链接
|
||||
|
||||
|
||||
- group: fcircle
|
||||
label: 友链鱼塘
|
||||
formSchema:
|
||||
|
|
@ -1208,6 +1216,7 @@ spec:
|
|||
value: true
|
||||
- label: 关闭
|
||||
value: false
|
||||
|
||||
- group: todo
|
||||
label: 待办清单
|
||||
formSchema:
|
||||
|
|
@ -1266,6 +1275,77 @@ spec:
|
|||
- label: 未完成
|
||||
value: false
|
||||
|
||||
- group: equipment
|
||||
label: 我的装备
|
||||
formSchema:
|
||||
- $formkit: attachment
|
||||
name: backgroundImg
|
||||
validation: url
|
||||
label: 图片
|
||||
value: https://liuzhihang.com/upload/moments.png
|
||||
placeholder: 请输入图片地址
|
||||
- $formkit: text
|
||||
name: smallTitle
|
||||
label: 小标题
|
||||
value: 好物
|
||||
- $formkit: text
|
||||
name: bigTitle
|
||||
label: 大标题
|
||||
value: 实物装备推荐
|
||||
- $formkit: text
|
||||
name: detail
|
||||
label: 描述
|
||||
value: 跟我一起享受科技带来的乐趣
|
||||
- $formkit: repeater
|
||||
name: category_list
|
||||
label: 我的装备
|
||||
value: [ ]
|
||||
children:
|
||||
- $formkit: text
|
||||
name: category_name
|
||||
label: 装备分类名称
|
||||
placeholder: 请输入装备分类名称
|
||||
value: 生产力
|
||||
- $formkit: text
|
||||
name: description
|
||||
label: 分类描述信息
|
||||
placeholder: 请输入分类描述信息
|
||||
value: 提升自己生产效率的硬件设备
|
||||
- $formkit: repeater
|
||||
name: equipment_list
|
||||
label: 装备列表
|
||||
value: [ ]
|
||||
children:
|
||||
- $formkit: attachment
|
||||
name: img
|
||||
label: 装备展示图
|
||||
placeholder: 请输入装备展示图地址
|
||||
- $formkit: text
|
||||
name: name
|
||||
label: 装备名称
|
||||
placeholder: 请输入装备名称
|
||||
value: MacBookPro
|
||||
- $formkit: text
|
||||
name: model
|
||||
label: 装备型号/版本
|
||||
placeholder: 请输入装备型号/版本
|
||||
value: M1Pro 32G / 1TB
|
||||
- $formkit: textarea
|
||||
name: description
|
||||
label: 装备描述
|
||||
placeholder: 请输入装备描述
|
||||
value: 屏幕显示效果好、色彩准确、对比度强、性能强劲、续航优秀。可以用来开发和设计。
|
||||
- $formkit: text
|
||||
name: button
|
||||
label: 左下角按钮显示文字
|
||||
placeholder: 请输入左下角按钮显示文字
|
||||
value: 详情
|
||||
- $formkit: text
|
||||
name: url
|
||||
label: 左下角按钮跳转链接
|
||||
placeholder: 请输入左下角按钮跳转链接
|
||||
value: https://www.apple.com.cn/macbook-pro/
|
||||
|
||||
- group: about
|
||||
label: 关于
|
||||
formSchema:
|
||||
|
|
@ -2277,10 +2357,10 @@ spec:
|
|||
- $formkit: radio
|
||||
name: bubbleEnable
|
||||
label: 页面卡片顶部气泡升起效果
|
||||
help: 已有页面(友链鱼塘,瞬间)
|
||||
help: 已有页面(友链鱼塘,瞬间,ToDoList,我的装备)
|
||||
value: false
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
value: false
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
:root {
|
||||
|
||||
--light-grey:rgba(255,255,255,0.7);
|
||||
--white: rgba(255,255,255,0.9);
|
||||
--light-grey: rgba(255, 255, 255, 0.7);
|
||||
--white: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
|
@ -14,14 +14,16 @@
|
|||
}
|
||||
|
||||
|
||||
.back-home-button{
|
||||
color: rgba(255,255,255,0.7);
|
||||
.back-home-button {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
#nav #site-name{
|
||||
|
||||
#nav #site-name {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
#nav .site-page{
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
#nav .site-page {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
#page-header.full_page {
|
||||
|
|
@ -29,12 +31,14 @@
|
|||
background-attachment: fixed;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#page-header.full_page #site-info {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page-header #scroll-down {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -60,6 +64,7 @@
|
|||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#page-header #scroll-down .scroll-down-effects {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -132,4 +137,8 @@
|
|||
.pl-blur {
|
||||
/* 小图锯齿多，增加高斯模糊 */
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
#nav a {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
|
@ -714,24 +714,11 @@
|
|||
</script>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- 评论模块 -->
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block
|
||||
th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
|
||||
<div th:replace="~{modules/twikoo :: twikoo}"></div>
|
||||
</th:block>
|
||||
<div id="post-comment"
|
||||
th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}">
|
||||
<div class="comment-head">
|
||||
<div class="comment-headline"><i class="iconfont icon-comment-alt"></i> <span>评论</span></div>
|
||||
<div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
|
||||
<div class="comment-tips" id="comment-tips">
|
||||
<span>你无需删除空行，直接评论以获取最佳展示效果</span>
|
||||
</div>
|
||||
</div>
|
||||
<halo:comment group="content.halo.run" kind="SinglePage"
|
||||
th:attr="name=${singlePage.metadata.name}"
|
||||
colorScheme="document.documentElement.getAttribute('data-theme')"/>
|
||||
</div>
|
||||
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
kind = 'SinglePage',
|
||||
name = ${singlePage.metadata.name})}"/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')}"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<th:block th:fragment="content">
|
||||
|
||||
<div class="page" id="body-wrap">
|
||||
|
||||
<!-- 头部导航栏 -->
|
||||
<header class="not-top-img" id="page-header">
|
||||
<nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
|
||||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
<div class="author-content author-content-item essayPage single"
|
||||
th:style="'background:url('+${theme.config.equipment.backgroundImg}+') left 28% / cover no-repeat !important;'">
|
||||
<div class="card-content">
|
||||
<div class="author-content-item-tips" th:text="${theme.config.equipment.smallTitle}"></div>
|
||||
<span class="author-content-item-title" th:text="${theme.config.equipment.bigTitle}"></span>
|
||||
<div class="content-bottom">
|
||||
<div class="tips" th:text="${theme.config.equipment.detail}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="equipment" th:if="${not #lists.isEmpty(theme.config.equipment.category_list)}"
|
||||
th:with="categoryList = ${theme.config.equipment.category_list}">
|
||||
<th:block th:each="category : ${categoryList}">
|
||||
<div class="equipment-item">
|
||||
<h2 class="equipment-item-title">[[${category.category_name}]]</h2>
|
||||
<div class="equipment-item-description">[[${category.description}]]</div>
|
||||
<div class="equipment-item-content" th:with="equipmentList = ${category.equipment_list}">
|
||||
|
||||
<div class="equipment-item-content-item" th:each="equipment : ${equipmentList}">
|
||||
<div class="equipment-item-content-item-cover">
|
||||
<img class="equipment-item-content-item-image entered loaded"
|
||||
th:alt="${equipment.name}"
|
||||
th:src="${equipment.img}">
|
||||
</div>
|
||||
<div class="equipment-item-content-item-info">
|
||||
<div class="equipment-item-content-item-name"
|
||||
th:onclick="rm.rightmenuCopyText([[${equipment.name}]]);btf.snackbarShow('已复制装备名称');">
|
||||
[[${equipment.name}]]
|
||||
</div>
|
||||
<div class="equipment-item-content-item-specification">[[${equipment.model}]]
|
||||
</div>
|
||||
<div class="equipment-item-content-item-description">
|
||||
[[${equipment.description}]]
|
||||
</div>
|
||||
<div class="equipment-item-content-item-toolbar">
|
||||
<a class="equipment-item-content-item-link" th:href="${equipment.url}"
|
||||
target="_blank">[[${equipment.button}]]</a>
|
||||
<a class="bber-reply"
|
||||
th:onclick="rm.rightMenuCommentText([['"'+${equipment.name}+' '+${equipment.model}+' '+${equipment.description}+'"']]);"
|
||||
data-pjax-state="">
|
||||
<i class="fa-solid fa-message" style="font-size: 18px;"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
<style>
|
||||
/* 我的装备 */
|
||||
.equipment-item-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.equipment-item-content-item {
|
||||
width: calc(25% - 12px);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border-always);
|
||||
overflow: hidden;
|
||||
margin: 8px 6px;
|
||||
background: var(--heo-card-bg);
|
||||
box-shadow: var(--heo-shadow-border);
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.equipment-item-content-item {
|
||||
width: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.equipment-item-content-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-item-content-item-info {
|
||||
padding: 8px 16px 16px 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.equipment-item-content-item-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.equipment-item-content-item-name:hover {
|
||||
color: var(--heo-main);
|
||||
}
|
||||
|
||||
.equipment-item-content-item-specification {
|
||||
font-size: 12px;
|
||||
color: var(--heo-secondtext);
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.equipment-item-content-item-description {
|
||||
line-height: 20px;
|
||||
color: var(--heo-secondtext);
|
||||
height: 60px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a.equipment-item-content-item-link {
|
||||
font-size: 12px;
|
||||
background: var(--heo-gray-op);
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.equipment-item-content-item-link:hover {
|
||||
background: var(--heo-main);
|
||||
color: var(--heo-white);
|
||||
}
|
||||
|
||||
h2.equipment-item-title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.equipment-item-description {
|
||||
line-height: 1;
|
||||
margin: 4px 0 8px 0;
|
||||
color: var(--heo-secondtext);
|
||||
}
|
||||
|
||||
.equipment-item-content-item-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: var(--heo-secondbg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img.equipment-item-content-item-image {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#equipment {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.equipment-item-content-item-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
a.bber-reply {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block
|
||||
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
kind = 'SinglePage',
|
||||
name = ${singlePage.metadata.name})}"/>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<!-- 底部 -->
|
||||
<footer th:replace="~{modules/footer :: footer}"></footer>
|
||||
<!-- 卡片顶部气泡效果 -->
|
||||
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
|
||||
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
|
||||
</div>
|
||||
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<!-- 第一屏 -->
|
||||
<th:block th:fragment="index-img">
|
||||
<th:block th:if="${theme.config.top.above.enable_above}">
|
||||
<div id="greetingBox"></div>
|
||||
<div class="pl-container">
|
||||
<div class="pl-img pl-blur pl-visible"></div>
|
||||
<div class="pl-img pl-visible"></div>
|
||||
|
|
@ -11,12 +12,187 @@
|
|||
|
||||
<div id="site-info">
|
||||
<h1 id="site-title">[[${site.title}]]</h1>
|
||||
<div id="site-subtitle">
|
||||
<span id="subtitle"></span>
|
||||
<span class="typed-cursor" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
|
||||
|
||||
<link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css'}">
|
||||
|
||||
<style>
|
||||
#site-title {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0);
|
||||
animation: 1.5s linear 1s 1 normal both running show;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
#site-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin: auto;
|
||||
border-radius: 12px;
|
||||
top: 11px;
|
||||
height: 55px;
|
||||
width: 110%;
|
||||
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-title::after {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-subtitle::after {
|
||||
background: rgb(255, 255, 255) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#site-subtitle {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
animation: 1.5s linear 1s 1 normal both running show;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
#site-subtitle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
border-radius: 12px;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
|
||||
}
|
||||
|
||||
@keyframes color_change {
|
||||
0% {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: var(--xlfd-main);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes color_change {
|
||||
0% {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: var(--xlfd-main);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swipe_box {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swipe_box {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes swipe_box2 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swipe_box2 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 0px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show {
|
||||
0% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
text-shadow: transparent 2px 3px 10px;
|
||||
}
|
||||
|
||||
81% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
text-shadow: transparent 2px 3px 10px;
|
||||
}
|
||||
|
||||
81% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.pl-img {
|
||||
background-image: url([[${theme.config.top.above.index_img}]]);
|
||||
|
||||
|
|
@ -27,8 +203,125 @@
|
|||
background-image: url([[${theme.config.top.above.phone_index_img}]]);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.typed-cursor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.typed-cursor.typed-cursor--blink {
|
||||
animation: typedjsBlink 0.7s infinite;
|
||||
-webkit-animation: typedjsBlink 0.7s infinite;
|
||||
animation: typedjsBlink 0.7s infinite;
|
||||
}
|
||||
|
||||
@keyframes typedjsBlink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes typedjsBlink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#greetingBox {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 15%;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
#greeting {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
top: -110px;
|
||||
padding: 5px 40px;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: small;
|
||||
transition: .5s;
|
||||
box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
|
||||
}
|
||||
|
||||
#greeting.shown {
|
||||
opacity: 1;
|
||||
top: 0
|
||||
}
|
||||
</style>
|
||||
<script th:inline="javascript">
|
||||
function subtitleType() {
|
||||
fetch("https://v1.hitokoto.cn").then((t => t.json())).then((t => {
|
||||
{
|
||||
const e = "出自 " + t.from;
|
||||
const n = [[${theme.config.top.above.typed}]].map((item)=>{
|
||||
return item.realNode.text;
|
||||
});
|
||||
n.unshift(t.hitokoto, e), window.typed = new Typed("#subtitle", {
|
||||
strings: n,
|
||||
startDelay: 300,
|
||||
typeSpeed: 100,
|
||||
loop: !0,
|
||||
backSpeed: 50
|
||||
})
|
||||
}
|
||||
}))
|
||||
}
|
||||
"function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
|
||||
</script>
|
||||
<script>
|
||||
(() => {
|
||||
const e = [{greeting: "晚安😴", startTime: 0, endTime: 5}, {
|
||||
greeting: "早上好鸭👋, 祝你一天好心情！",
|
||||
startTime: 6,
|
||||
endTime: 9
|
||||
}, {
|
||||
greeting: "上午好👋, 状态很好，鼓励一下～",
|
||||
startTime: 10,
|
||||
endTime: 10
|
||||
}, {greeting: "11点多啦, 在坚持一下就吃饭啦～", startTime: 11, endTime: 11}, {
|
||||
greeting: "午安👋, 宝贝",
|
||||
startTime: 12,
|
||||
endTime: 14
|
||||
}, {
|
||||
greeting: "🌈充实的一天辛苦啦！",
|
||||
startTime: 14,
|
||||
endTime: 18
|
||||
}, {
|
||||
greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
|
||||
startTime: 19,
|
||||
endTime: 19
|
||||
}, {greeting: "晚上好👋, 在属于自己的时间好好放松😌~", startTime: 20, endTime: 24}];
|
||||
let t = document.createElement("div");
|
||||
t.id = "greeting", setTimeout((() => {
|
||||
t.classList.add("shown")
|
||||
}), 1e3);
|
||||
let i = document.querySelector("#greetingBox");
|
||||
i.appendChild(t);
|
||||
const n = (new Date).getHours();
|
||||
let r = "晚上好👋";
|
||||
for (let t = 0; t < e.length; t++) if (n >= e[t].startTime && n <= e[t].endTime) {
|
||||
r = e[t].greeting;
|
||||
break
|
||||
}
|
||||
t.innerHTML = r, setTimeout((() => {
|
||||
t.classList.remove("shown"), setTimeout((() => {
|
||||
i.remove()
|
||||
}), 500)
|
||||
}), 3e3)
|
||||
})()</script>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<a class="bber-reply"
|
||||
th:attr="onclick='rm.rightMenuCommentText("\''+ ${content.html} +'"\')'"
|
||||
th:onclick="rm.rightMenuCommentText([[${content.html}]]);"
|
||||
data-pjax-state=""> <i class="fa-solid fa-message"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,43 +25,46 @@
|
|||
<div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
|
||||
th:with="todoList = ${theme.config.todo.list}">
|
||||
|
||||
<th:block th:each="todo : ${todoList}">
|
||||
|
||||
<div id="todolist-left" th:if="${#strings.equals(todo.seat, 'left')}">
|
||||
|
||||
|
||||
<div class="todolist-item">
|
||||
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
|
||||
<ul class="todolist-ul">
|
||||
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
|
||||
th:each="data : ${todo.todo_list}">
|
||||
<li th:class="${data.completed ? 'achieve' : ''}">
|
||||
<i style="margin-right: 5px;"
|
||||
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
|
||||
</i>[[${data.content}]]
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
<div id="todolist-left-container">
|
||||
<th:block th:each="todo : ${todoList}">
|
||||
<div id="todolist-left" th:if="${#strings.equals(todo.seat, 'left')}">
|
||||
<div class="todolist-item">
|
||||
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
|
||||
<ul class="todolist-ul">
|
||||
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
|
||||
th:each="data : ${todo.todo_list}">
|
||||
<li th:class="${data.completed ? 'achieve' : ''}">
|
||||
<i style="margin-right: 5px;"
|
||||
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
|
||||
</i>[[${data.content}]]
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="todolist-right" th:if="${#strings.equals(todo.seat, 'right')}">
|
||||
<div class="todolist-item">
|
||||
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
|
||||
<ul>
|
||||
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
|
||||
th:each="data : ${todo.todo_list}">
|
||||
<li th:class="${data.completed ? 'achieve' : ''}">
|
||||
<i style="margin-right: 5px;"
|
||||
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
|
||||
</i>[[${data.content}]]
|
||||
</li>
|
||||
</th:block>
|
||||
|
||||
</ul>
|
||||
</th:block>
|
||||
</div>
|
||||
<div id="todolist-right-container">
|
||||
<th:block th:each="todo : ${todoList}">
|
||||
<div id="todolist-right" th:if="${#strings.equals(todo.seat, 'right')}">
|
||||
<div class="todolist-item">
|
||||
<h3 class="todolist-title">[[${todo.class_name}]]</h3>
|
||||
<ul>
|
||||
<th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
|
||||
th:each="data : ${todo.todo_list}">
|
||||
<li th:class="${data.completed ? 'achieve' : ''}">
|
||||
<i style="margin-right: 5px;"
|
||||
th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
|
||||
</i>[[${data.content}]]
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -79,7 +82,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0 10px
|
||||
}
|
||||
|
||||
|
|
@ -93,13 +96,21 @@
|
|||
padding: 0
|
||||
}
|
||||
|
||||
#todolist-left {
|
||||
#todolist-left-container, #todolist-right-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#todolist-left {
|
||||
width: 100%;
|
||||
padding: 0 8px 0 0
|
||||
}
|
||||
|
||||
#todolist-right {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
padding: 0 0 0 8px
|
||||
}
|
||||
|
||||
|
|
@ -113,9 +124,13 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#todolist-left,#todolist-right {
|
||||
#todolist-left-container, #todolist-right-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#todolist-left, #todolist-right {
|
||||
padding: 0 0 0 0
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme=dark] .todolist-item {
|
||||
|
|
@ -145,7 +160,6 @@
|
|||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ spec:
|
|||
description: 追番页面
|
||||
screenshot:
|
||||
file: bangumis.html
|
||||
- name: 我的装备页面模版
|
||||
description: 我的装备页面
|
||||
screenshot:
|
||||
file: equipment.html
|
||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||
logo: https://liuzhihang.com/upload/logo.jpg
|
||||
website: https://liuzhihang.com
|
||||
|
|
|
|||
Loading…
Reference in New Issue