anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配日记簿

Browse Source
This commit is contained in:
anian
2026-03-10 17:21:05 +08:00
parent af82232813
commit 6810791637
46 changed files with 28829 additions and 25659 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/modules/footer.html
+41 -29
View File
@@ -1,29 +1,41 @@
<th:block th:fragment="footer">
<script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js?v='1.1.6'}" class="pjax"></script>
<script th:src="@{/assets/libs/axios/axios.min.js}" id="axios.min-js"></script>
<script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js}" id="jsencrypt.min-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.min.js}" id="jquery.min-js"></script>
<script th:src="@{/assets/libs/qrious/qrious.min.js}"></script>
<script th:src="@{/assets/libs/uikit/uikit.min.js}" id="uikit.js-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.cookie.js}" id="jquery.cookie-js"></script>
<script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js}" id="fancybox.js-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.form.js}" id="jquery.form-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.validate.js}" id="jquery.validate-js"></script>
<script th:src="@{/assets/libs/message/coco-message.js}" id="mesage-js"></script>
<script th:src="@{/assets/libs/lazyload/lazyload.min.js}" id="lazyload-js"></script>
<script th:src="@{/assets/js/moment-push.js?v={version}(version=${theme.spec.version})}" id="moment-push-js"></script>
<script th:src="@{/assets/libs/nprogress/nprogress.js}" id="nprogress-js"></script>
<script th:src="@{/assets/js/poster.js?v={version}(version=${theme.spec.version})}" id="poster-js"></script>
<script th:src="@{/assets/libs/pjax/pjax.min.js}" id="pjax-js"></script>
<script th:src="@{/assets/js/pixplayer.js?v={version}(version=${theme.spec.version})}" id="pixplayer.js-js"></script>
<script th:src="@{/assets/js/pix.js?v={version}(version=${theme.spec.version})}" id="pix-js"></script>
<script th:src="@{/assets/js/app.js?v={version}(version=${theme.spec.version})}" id="app-js"></script>
<!-- 自定义js -->
<script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}"
th:utext="${theme.config.custom.code_js}">
</script>
<th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}"
th:utext="${theme.config.custom.footer_html}"> </th:block>
</th:block>
<th:block th:fragment="footer">
<th:block th:with="customJsVersion='1.2.5-1'">
<div class="center-img-container" id="centerImgContainer">
<img class="center-img" id="targetImg">
</div>
<script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js(v=${customJsVersion})}" class="pjax"></script>
<script th:src="@{/assets/libs/axios/axios.min.js(v=${customJsVersion})}" id="axios.min-js"></script>
<script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js(v=${customJsVersion})}" id="jsencrypt.min-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.min.js(v=${customJsVersion})}" id="jquery.min-js"></script>
<script th:src="@{/assets/libs/qrious/qrious.min.js(v=${customJsVersion})}"></script>
<script th:src="@{/assets/libs/uikit/uikit.min.js(v=${customJsVersion})}" id="uikit.js-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.cookie.js(v=${customJsVersion})}" id="jquery.cookie-js"></script>
<script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js(v=${customJsVersion})}" id="fancybox.js-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.form.js(v=${customJsVersion})}" id="jquery.form-js"></script>
<script th:src="@{/assets/libs/jquery/jquery.validate.js(v=${customJsVersion})}" id="jquery.validate-js"></script>
<script th:src="@{/assets/libs/message/coco-message.js(v=${customJsVersion})}" id="mesage-js"></script>
<script th:src="@{/assets/libs/lazyload/lazyload.min.js(v=${customJsVersion})}" id="lazyload-js"></script>
<script th:src="@{/assets/libs/nprogress/nprogress.js(v=${customJsVersion})}" id="nprogress-js"></script>
<script th:src="@{/assets/libs/pjax/pjax.min.js(v=${customJsVersion})}" id="pjax-js"></script>
<script th:src="@{/assets/js/moment-push.js(v=${customJsVersion})}" id="moment-push-js"></script>
<script th:src="@{/assets/js/poster.js(v=${customJsVersion})}" id="poster-js"></script>
<script th:src="@{/assets/js/pixplayer.js(v=${customJsVersion})}" id="pixplayer.js-js"></script>
<script th:src="@{/assets/js/pix.js(v=${customJsVersion})}" id="pix-js"></script>
<script th:src="@{/assets/js/app.js(v=${customJsVersion})}" id="app-js"></script>
<script th:src="@{/assets/js/anian.js(v=${customJsVersion})}" id="anian-js"></script>
<link rel="prefetch" href="/upload/ma-shan-zheng.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/upload/mu-yao-sui-xin-shou-xie-ti.woff2" as="font" type="font/woff2" crossorigin>
</th:block>
<!-- 自定义js -->
<script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}"
th:utext="${theme.config.custom.code_js}">
</script>
<th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}"
th:utext="${theme.config.custom.footer_html}"> </th:block>
</th:block>
templates/modules/head.html
+100 -109
View File
@@ -1,109 +1,100 @@
<th:block th:fragment="head">
<th:block th:replace="~{'modules/variables/msg'}"/>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title th:text="${site_title}"></title>
<link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon">
<th:block th:replace="~{modules/variables/cst-script-parameter}"/>
<meta name="robots" content="max-image-preview:large">
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}"
th:utext="${theme.config.custom.head_html}"> </th:block>
<meta property="og:title" th:content="${site_title}">
<meta property="og:site_name" th:content="${site.title}">
<meta property="og:type" content="website">
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css?v={version}(version=${theme.spec.version})}" media="all">
<style id="classic-theme-styles-inline-css">
/*! This file is auto-generated */
.wp-block-button__link {
color: #fff;
background-color: #32373c;
border-radius: 9999px;
box-shadow: none;
text-decoration: none;
padding: calc(.667em + 2px) calc(1.333em + 2px);
font-size: 1.125em
}
.wp-block-file__button {
background: #32373c;
color: #fff;
text-decoration: none
}
</style>
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css?v={version}(version=${theme.spec.version})}" media="all">
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css}" media="all">
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css}" media="all">
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css}" media="all">
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css}" media="all">
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css?v={version}(version=${theme.spec.version})}" media="all">
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}"
rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css?v={version}(version=${theme.spec.version},theme_set=${theme.config.style.theme_set})}" media="all">
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css?v={version}(version=${theme.spec.version})}" media="all">
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css?v={version}(version=${theme.spec.version})}" media="all">
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css?v={version}(version=${theme.spec.version})}" media="all">
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js}" id="imgstatus-js"></script>
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}" id="waterfall-js"></script>
<script th:if="${pluginFinder.available('PluginPrismJS')}" src="/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js"></script>
<link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css}" type="text/css"
media="screen">
<style type="text/css"
th:if="${not #strings.isEmpty(theme.config.custom.code_css)}"
th:utext="${theme.config.custom.code_css}" ></style>
<style type="text/css">
:root {
--toc-color: [(${theme.config.post.tocColor})];
}
</style>
<style type="text/css" th:if="${!theme.config.post.toc.mobile_open}">
@media screen and (max-width: 768px) {
.listree-box {
display: none !important;
}
}
</style>
<!-- 自定义css -->
<style type="text/css" th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">
@font-face {
font-style: normal;
font-family: "HarmonyOS_M";
src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype");
font-display: swap;
}
</style>
<th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block>
<script>
(win => {
win.getCookie = function(name) {
var cookieArr = document.cookie.split(';');
for (var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split('=');
var cookieName = cookiePair[0].trim();
if (cookieName === name) {
return decodeURIComponent(cookiePair[1]);
}
}
return "";
}
win.darkmode = function () {
$darkmode = false;
const dark = getCookie("dark")
if (dark) {
$darkmode = (dark == 'dark') ? true : false;
} else if (Theme.theme_set == 'dark-theme') {
$darkmode = true;
}
return $darkmode;
}
if (darkmode()) {
document.documentElement.classList.add('dark')
}
})(window)
</script>
</th:block>
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-1'}">
<th:block th:replace="~{'modules/variables/msg'}" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title th:text="${site_title}"></title>
<link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon">
<meta name="robots" content="max-image-preview:large">
<style>
.dl-warning-card { overflow: hidden; position: fixed; bottom: 1rem; left: 0; right: 0; margin: 0 auto; background-color: #ffffff; border-radius: 0.5rem; max-width: 720px; width: calc(100% - 2rem); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 9999; display: none; opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; border-left: 4px solid #f59e0b; }
.dl-warning-header { display: flex; align-items: center; padding: 1rem; gap: 1rem; }
.dl-warning-image { flex-shrink: 0; background-color: #fef3c7; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; }
.dl-warning-image svg { color: #f59e0b; width: 1.25rem; height: 1.25rem; }
.dl-warning-content { flex: 1; text-align: left; word-wrap: break-word; word-break: break-all; min-width: 0; }
.dl-warning-title { color: #F59E0B; font-size: 0.95rem; font-weight: 600; line-height: 1.3rem; display: block; margin-bottom: 0.25rem; }
.dl-warning-message { color: #6b7280; font-size: 0.875rem; line-height: 1.25rem; margin: 0; }
.dl-warning-actions { display: flex; flex-direction: row; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.dl-warning-desactivate { padding: 0.375rem 0.75rem; background-color: #f59e0b; color: #ffffff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; justify-content: center; align-items: center; display: inline-flex; border-radius: 0.375rem; border: none; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); cursor: pointer; white-space: nowrap; }
.dl-warning-desactivate.loading { background-color: #d97706; cursor: not-allowed; opacity: 0.8; pointer-events: none; }
.dl-warning-desactivate.loading::after { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid rgba(255,255,255,0.5); border-top-color: #ffffff; border-radius: 50%; margin-left: 0.5rem; margin-right: 0.25rem; animation: spin 1s linear infinite; flex-shrink: 0; }
.dl-warning-desactivate:not(.loading):hover { background-color: #fbbf24; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.06); transition: all 0.2s ease-in-out; }
.dl-warning-cancel { padding: 0.375rem 0.75rem; background-color: #ffffff; color: #374151; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; justify-content: center; align-items: center; display: inline-flex; border-radius: 0.375rem; border: 1px solid #d1d5db; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); cursor: pointer; white-space: nowrap; }
.dl-warning-cancel:hover { background-color: #ededed; border-color: #e5e7eb; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.06); transition: all 0.2s ease-in-out; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 480px) {
.dl-warning-card { bottom: 1rem; width: calc(100% - 1rem); max-width: 100%; }
.dl-warning-header { padding: 0.75rem; gap: 0.75rem; align-items: center; }
.dl-warning-image { width: 2rem; height: 2rem; }
.dl-warning-image svg { width: 1rem; height: 1rem; }
.dl-warning-title { font-size: 0.9rem; }
.dl-warning-message { font-size: 0.85rem; }
.dl-warning-actions { flex-direction: column; gap: 0.375rem; align-items: stretch; flex-shrink: 0; width: auto; margin-top: 0; }
.dl-warning-desactivate, .dl-warning-cancel { font-size: 0.75rem; padding: 0.25rem 0.5rem; width: 100%; }
.dl-warning-content { min-width: 0; word-wrap: break-word; word-break: break-all; }
}
</style>
<div class="dl-warning-card" id="lineCard">
<div class="dl-warning-header">
<div class="dl-warning-image"><svg aria-hidden="true" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none"><path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" stroke-linejoin="round" stroke-linecap="round"></path></svg></div>
<div class="dl-warning-content"><span class="dl-warning-title" id="cardHeading"></span><p class="dl-warning-message" id="cardPara"></p></div>
<div class="dl-warning-actions"><button class="dl-warning-desactivate" id="switchBtn"></button><button class="dl-warning-cancel" id="cancelBtn">取消</button></div>
</div>
</div>
<script>
const card=document.getElementById('lineCard'),heading=document.getElementById('cardHeading'),para=document.getElementById('cardPara'),switchBtn=document.getElementById('switchBtn'),cancelBtn=document.getElementById('cancelBtn');
const showCard=()=>{card.style.display='block';setTimeout(()=>{card.style.opacity='1';card.style.transform='translateY(0)';},10)};
const hideCard=()=>{card.style.opacity='0';card.style.transform='translateY(20px)';setTimeout(()=>{card.style.display='none'},300)};
const handleSwitch=(baseUrl)=>{switchBtn.classList.add('loading');switchBtn.textContent='切换中';switchBtn.disabled=true;const currentScrollTop=window.scrollY||document.documentElement.scrollTop;document.cookie=`scrollParam=${currentScrollTop}; path=/; domain=anian.cc`;let finalUrl=baseUrl+location.pathname+location.search+location.hash;setTimeout(()=>location.href=finalUrl,500)};
let isResourceLoaded=false,pageLoadTimeoutTimer=null,isLoadTimeoutAborted=false;
const currentHost=location.hostname,isMainDomain=currentHost.includes('anian.cc')&&!currentHost.includes('www.anian.cc');
cancelBtn.addEventListener('click',hideCard);
const scrollTop = document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1] ? decodeURIComponent(document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1]) : null;
if(!isMainDomain && !scrollTop && !isNaN(scrollTop)){heading.textContent='温馨提示';para.textContent='当前为备用线路，若主线路正常，请优先选择主线路';switchBtn.textContent='切换主线路';switchBtn.onclick=()=>handleSwitch('https://anian.cc');showCard();}
if(isMainDomain){pageLoadTimeoutTimer=setTimeout(()=>{if(!isResourceLoaded){isLoadTimeoutAborted=true;heading.textContent='线路异常';para.textContent='当前线路拥塞，若本地网络正常，可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard();}},15000);window.onload=()=>{isResourceLoaded=true;clearTimeout(pageLoadTimeoutTimer);if(isLoadTimeoutAborted)return;const xhr=new XMLHttpRequest();xhr.open('GET',`/upload/%E4%B8%8B%E8%BD%BD%20(9).mp4?_t=${Date.now()}`,true);let t=setTimeout(()=>{xhr.abort();heading.textContent='线路异常';para.textContent='当前线路拥塞，若本地网络正常，可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard()},7500);xhr.onload=xhr.onerror=xhr.onabort=()=>clearTimeout(t);xhr.send();}}
</script>
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css(v=${customJsVersion})}" media="all">
<link rel="stylesheet" id="anian-css" th:href="@{/assets/css/anian.css(v=${customJsVersion})}" media="all">
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}" rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css(theme_set=${theme.config.style.theme_set},v=${customJsVersion})}" media="all">
<link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css(v=${customJsVersion})}" type="text/css" media="screen">
<style th:if="${not #strings.isEmpty(theme.config.custom.code_css)}" th:utext="${theme.config.custom.code_css}"></style>
<style>:root { --toc-color: [(${theme.config.post.tocColor})]; } .wp-block-button__link { color: #fff; background-color: #32373c; border-radius: 9999px; text-decoration: none; padding: .6em 1.3em; } .wp-block-file__button { background: #32373c; color: #fff; text-decoration: none; }</style>
<style th:if="${!theme.config.post.toc.mobile_open}">@media screen and (max-width: 768px) { .listree-box { display: none !important; } }</style>
<style th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">@font-face { font-family: "HarmonyOS_M"; src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype"); font-display: swap; }</style>
<th:block th:replace="~{modules/variables/cst-script-parameter}" />
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}" th:utext="${theme.config.custom.head_html}"></th:block>
<meta property="og:title" th:content="${site_title}"><meta property="og:site_name" th:content="${site.title}"><meta property="og:type" content="website">
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js(v=${customJsVersion})}" id="imgstatus-js"></script>
<script th:src="@{/assets/libs/waterfall/waterfall.min.js(v=${customJsVersion})}" id="waterfall-js"></script>
<script th:if="${pluginFinder.available('PluginPrismJS')}" th:src="@{/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js(v=${customJsVersion})}"></script>
<th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block>
<script>
(win => {
win.getCookie = (name) => {
let pair = document.cookie.split('; ').find(row => row.startsWith(name + '='));
return pair ? decodeURIComponent(pair.split('=')[1]) : "";
};
win.darkmode = () => {
const dark = getCookie("dark");
return dark ? (dark === 'dark') : (Theme.theme_set === 'dark-theme');
};
if (darkmode()) document.documentElement.classList.add('dark');
})(window)
</script>
</th:block>
templates/modules/header.html
+34 -33
View File
@@ -1,34 +1,35 @@
<header id="masthead" class="site-header">
<div class="top_bar uk-sticky">
<div class="mobile_logo">
<a href="/"><img th:src="${theme.config.base_top_set.mobile_logo}"></a>
</div>
<th:block th:replace="~{'modules/header/header-search'}"></th:block>
<th:block th:if="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool}"></th:block>
</th:block>
<th:block th:unless="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool-third}"></th:block>
</th:block>
</div>
<div class="uk-sticky-placeholder" hidden="" style="height: 72px; width: 590px; margin: 0px;"></div>
</header><!-- #masthead -->
<div class="index_banner"
th:data-src="${theme.config.style.topbg_banner}" uk-img="loading: eager">
<div class="user_info">
<div class="top">
<div class="left">
<div class="name">[[${theme.config.base_set.nice_name}]]</div>
<div class="des">[[${theme.config.base_set.admin_des}]]</div>
</div>
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
</div>
</div>
<header id="masthead" class="site-header">
<div class="top_bar uk-sticky">
<div class="mobile_logo">
<a href="/"><img th:src="${theme.config.base_top_set.mobile_logo}"></a>
</div>
<th:block th:replace="~{'modules/header/header-search'}"></th:block>
<th:block th:if="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool}"></th:block>
</th:block>
<th:block th:unless="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool-third}"></th:block>
</th:block>
</div>
<div class="uk-sticky-placeholder" hidden="" style="height: 72px; width: 590px; margin: 0px;"></div>
</header><!-- #masthead -->
<div class="index_banner">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="user_info">
<div class="top">
<div class="left">
<div class="name">[[${theme.config.base_set.nice_name}]]</div>
<div class="des">[[${theme.config.base_set.admin_des}]]</div>
</div>
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
</div>
</div>
</div>
templates/modules/header/header-tool.html
+60 -60
View File
@@ -1,61 +1,61 @@
<div class="top_right" th:fragment="header-tool">
<th:block sec:authorize="isAuthenticated()">
<div class="top_tool">
<a class="com_msg_btn" href="#msg_modal" check="0" uk-toggle>
<i class="ri-notification-2-line"></i>
</a>
</div>
<div class="t_login top_tool icon_color" th:if="${pluginFinder.available('PluginMoments')}">
<a class="normal_edit" uk-toggle="target: #create_post_box"><i class="ri-edit-box-line"></i></a>
</div>
<div class="admin_ava">
<a class="mobile_edit" uk-toggle="target: #create_post_box"><i class="ri-add-line"></i></a>
<div id="top_ava" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>控制台</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>登出</a>
</div>
</div>
</div>
</th:block>
<div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-4-fill"></i></a>
</div>
</div>
<div class="top_right" id="top_third" th:fragment="header-tool-third">
<th:block sec:authorize="isAuthenticated()">
<div class="top_tool">
<a class="com_msg_btn" href="#msg_modal" check="0" uk-toggle>
<i class="ri-notification-2-line"></i>
</a>
</div>
<div class="t_login top_tool icon_color" th:if="${pluginFinder.available('PluginMoments')}">
<a class="normal_edit" uk-toggle="target: #create_post_box"><i class="ri-edit-box-line"></i></a>
</div>
<div class="admin_ava">
<a class="mobile_edit" uk-toggle="target: #create_post_box"><i class="ri-add-line"></i></a>
<div id="top_ava2" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>控制台</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>登出</a>
</div>
</div>
</div>
</th:block>
<div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-4-fill"></i></a>
</div>
<div class="top_right" th:fragment="header-tool">
<th:block sec:authorize="isAuthenticated()">
<div class="top_tool">
<a class="com_msg_btn" href="#msg_modal" check="0" uk-toggle>
<i class="ri-notification-2-line"></i>
</a>
</div>
<div class="t_login top_tool icon_color" th:if="${pluginFinder.available('PluginMoments')}">
<a class="normal_edit" uk-toggle="target: #create_post_box"><i class="ri-edit-box-line"></i></a>
</div>
<div class="admin_ava">
<a class="mobile_edit" uk-toggle="target: #create_post_box"><i class="ri-add-line"></i></a>
<div id="top_ava" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
</div>
</div>
</div>
</th:block>
<div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
</div>
</div>
<div class="top_right" id="top_third" th:fragment="header-tool-third">
<th:block sec:authorize="isAuthenticated()">
<div class="top_tool">
<a class="com_msg_btn" href="#msg_modal" check="0" uk-toggle>
<i class="ri-notification-2-line"></i>
</a>
</div>
<div class="t_login top_tool icon_color" th:if="${pluginFinder.available('PluginMoments')}">
<a class="normal_edit" uk-toggle="target: #create_post_box"><i class="ri-edit-box-line"></i></a>
</div>
<div class="admin_ava">
<a class="mobile_edit" uk-toggle="target: #create_post_box"><i class="ri-add-line"></i></a>
<div id="top_ava2" class="top_ava"><img th:src="${user.avatar}"></div>
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small">
<div class="inner">
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
</div>
</div>
</div>
</th:block>
<div sec:authorize="isAnonymous()" class="top_tool">
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
</div>
</div>
templates/modules/layouts/layout.html
+70 -70
View File
@@ -1,71 +1,71 @@
<!DOCTYPE html>
<html lang="zh-CN" th:classappend="(${theme.config.style.theme_set=='dark-theme'} ? 'dark' : '')"
th:fragment="layout(_head, _content, _title)" xmlns:th="http://www.thymeleaf.org"
th:with="site_title = ${not #strings.isEmpty(_title) ? _title : #strings.isEmpty(site.subtitle) ? site.title : site.title +' - ' +site.subtitle },
user = ${contributorFinder.getContributor(#authentication.name)},
roleNames = ${#annotations.get(user, 'rbac.authorization.halo.run/role-names')},
roleName= ${roleNames == '[]' ? 'super-' : #strings.substring(roleNames,2, #strings.length(roleNames) - 2) }">
<head>
<th:block th:replace="~{modules/head :: head}"></th:block>
</head>
<body class="home blog normal" th:classappend="${theme.config.style.layout_set}">
<style>
.color-scheme-dark,.dark,[data-color-scheme=dark] {
--halo-search-widget-divider-color: rgb(17, 19, 36);
--halo-search-widget-base-bg-color: rgb(17, 19, 36);
--halo-search-widget-modal-bg-color: #161829;
--halo-search-widget-hit-bg-color: #292c45;
}
</style>
<div class="player_box"></div>
<div id="page" class="site main_wrap">
<div class="main_body uk-flex uk-flex-center uk-grid-collapse" uk-grid>
<div th:replace="~{modules/aside/aside-left}"/>
<th:block th:replace="${_content}"></th:block>
<div th:replace="~{modules/aside/aside-right}"/>
</div>
<div class="listree-box" style="display: none;">
<h3 class="listree-titles"></h3>
<ul id="listree-ol" style="display:none;">
</ul>
</div>
<div class="go_top_box">
<div class="footer_tool">
<div th:if="${theme.config.music.bgm_open}" class="t_music top_tool icon_color">
<a class="bg_music"><i class="ri-disc-line"></i></a>
</div>
<div th:if="${theme.config.music.lrc_open}" class="t_lrc top_tool icon_color" style="margin-bottom: 8px;">
<a class="bg_lrc">
<i class="ri-play-list-line"></i>
</a>
</div>
<div th:if="${theme.config.style.theme_set != 'dark-theme'}" class="t_dark top_tool icon_color"><a><i class="ri-contrast-2-line"></i></a></div>
</div>
<a class="go_top" href="#page" uk-scroll=""><i class="ri-arrow-up-s-line"></i></a>
</div>
<!-- 底部 -->
<dev th:replace="~{modules/footer-nav :: footer-nav}"></dev>
<dev th:replace="~{modules/msg-modal}"/>
<dev th:replace="~{modules/topic-push :: topic-push}"></dev>
</div>
<th:block th:replace="~{modules/footer}"></th:block>
</body>
<!DOCTYPE html>
<html lang="zh-CN" th:classappend="(${theme.config.style.theme_set=='dark-theme'} ? 'dark' : '')"
th:fragment="layout(_head, _content, _title)" xmlns:th="http://www.thymeleaf.org"
th:with="site_title = ${not #strings.isEmpty(_title) ? _title : #strings.isEmpty(site.subtitle) ? site.title : site.title +' - ' +site.subtitle },
user = ${contributorFinder.getContributor(#authentication.name)},
roleNames = ${#annotations.get(user, 'rbac.authorization.halo.run/role-names')},
roleName= ${roleNames == '[]' ? 'super-' : #strings.substring(roleNames,2, #strings.length(roleNames) - 2) }">
<head>
<th:block th:replace="~{modules/head :: head}"></th:block>
</head>
<body class="home blog normal" th:classappend="${theme.config.style.layout_set}">
<style>
.color-scheme-dark,.dark,[data-color-scheme=dark] {
--halo-search-widget-divider-color: rgb(17, 19, 36);
--halo-search-widget-base-bg-color: rgb(17, 19, 36);
--halo-search-widget-modal-bg-color: #161829;
--halo-search-widget-hit-bg-color: #292c45;
}
</style>
<div class="player_box"></div>
<div id="page" class="site main_wrap">
<div class="main_body uk-flex uk-flex-center uk-grid-collapse" uk-grid>
<div th:replace="~{modules/aside/aside-left}"/>
<th:block th:replace="${_content}"></th:block>
<div th:replace="~{modules/aside/aside-right}"/>
</div>
<div class="listree-box" style="display: none;">
<h3 class="listree-titles"></h3>
<ul id="listree-ol" style="display:none;">
</ul>
</div>
<div class="go_top_box">
<div class="footer_tool">
<div th:if="${theme.config.music.bgm_open}" class="t_music top_tool icon_color">
<a class="bg_music"><i class="ri-disc-line"></i></a>
</div>
<div th:if="${theme.config.music.lrc_open}" class="t_lrc top_tool icon_color" style="margin-bottom: 8px;">
<a class="bg_lrc">
<i class="ri-play-list-line"></i>
</a>
</div>
<div th:if="${theme.config.style.theme_set != 'dark-theme'}" class="t_dark top_tool icon_color"><a><i class="ri-contrast-2-line"></i></a></div>
</div>
<a class="go_top" href="#page" uk-scroll=""><i class="ri-arrow-up-s-line"></i></a>
</div>
<!-- 底部 -->
<dev th:replace="~{modules/footer-nav :: footer-nav}"></dev>
<dev th:replace="~{modules/msg-modal}"/>
<dev th:replace="~{modules/topic-push :: topic-push}"></dev>
</div>
<th:block th:replace="~{modules/footer}"></th:block>
</body>
</html>
templates/modules/msg-modal.html
+34 -34
View File
@@ -1,35 +1,35 @@
<div id="msg_modal" uk-modal="" class="uk-modal">
<div class="uk-modal-dialog uk-overflow-auto" uk-overflow-auto="">
<div class="msg_title"><i class="ri-mail-unread-line"></i>消息盒子</div>
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""></button>
<div class="msg_modal_inner">
<p class="no_posts"><small># 暂无消息 #</small>
<img class="s_nodata" rc="/themes/theme-pix/assets/img/nodata.png">
</p>
<p class="msg_limit">只显示最新10条未读和已读信息</p>
</div>
</div>
<style>
.msg_modal_inner .unread_box .box .mark_read{
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
cursor: pointer;
}
.msg_modal_inner .unread_box .box:hover .mark_read{
display: block;
}
.msg_modal_inner .unread_box .box .mark_read:hover{
color: red;
}
.msg_modal_inner .box{
position: relative;
}
.msg_modal_inner .notification-content .head {
display: none;
}
</style>
<div id="msg_modal" uk-modal="" class="uk-modal">
<div class="uk-modal-dialog uk-overflow-auto" uk-overflow-auto="">
<div class="msg_title"><i class="ri-mail-unread-line"></i>消息盒子</div>
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""></button>
<div class="msg_modal_inner">
<p class="no_posts"><small># 暂无消息 #</small>
<img class="s_nodata" rc="/upload/nodata.png">
</p>
<p class="msg_limit">只显示最新10条未读和已读信息</p>
</div>
</div>
<style>
.msg_modal_inner .unread_box .box .mark_read{
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
cursor: pointer;
}
.msg_modal_inner .unread_box .box:hover .mark_read{
display: block;
}
.msg_modal_inner .unread_box .box .mark_read:hover{
color: red;
}
.msg_modal_inner .box{
position: relative;
}
.msg_modal_inner .notification-content .head {
display: none;
}
</style>
</div>
templates/modules/topic-push.html
+140 -140
View File
@@ -1,141 +1,141 @@
<th:block th:fragment="topic-push">
<div id="create_post_box" class="uk-flex-top" uk-modal="bg-close:false"
th:if="${pluginFinder.available('PluginMoments')}">
<div class="modal_inner uk-modal-dialog uk-modal-body round8 uk-margin-auto-vertical">
<div class="t_form">
<div class="edit_text">
<div class="cat_header">
<div class="de_cat">
<span class="t_cat_toogle" tabindex="0" aria-haspopup="true" aria-expanded="false">
<i class="ri-hashtag"></i><span>[[${theme.config.moments.topics_de_cat}]]</span>
</span>
<div class="t_cat_box round8 shadow" uk-dropdown="mode: click;toggle:.t_cat_toogle;boundary: .tool_box; stretch: x;pos: top-center">
<div class="set_cat">
<input type="text" placeholder="创建话题" name="add_cat" id="add_cat">
<a class="up_cat_btn">创建</a>
</div>
<ul style="overscroll-behavior: contain;" th:with="tags = ${momentFinder.listAllTags()}">
<li class="topic_default_cat" th:each="tag : ${tags}">
<span class="c_name">
<i class="ri-hashtag"></i>
<span th:text="${tag.name}"></span>
</span>
</li>
</ul>
</div>
</div>
</div>
<textarea id="topic_content" name="topic_content" placeholder="今日份分享 ! " maxlength="800"></textarea>
</div>
</div>
<div class="topic_tool">
<div class="tool_box">
<div class="left">
<div class="moment_image_type moment_type_btn" uk-tooltip="title:图文; pos:top; offset:2;">
<a><i class="ri-image-line"></i></a>
</div>
<div class="moment_video_type moment_type_btn" uk-tooltip="title:视频; pos:top; offset:2;">
<a><i class="ri-movie-line"></i></a>
</div>
<div class="moment_audio_type moment_type_btn" uk-tooltip="title:音乐; pos: top; offset:2;">
<a><i class="ri-disc-line"></i></a>
</div>
<div class="moment_card_type moment_type_btn" uk-tooltip="title:卡片; pos: top; offset:2;">
<a><i class="ri-pages-line"></i></a>
</div>
<span class="moment_btn_line"> | </span>
<div class="smile_box" uk-tooltip="title:表情; pos: top; offset:2;">
<a><i class="ri-emotion-line"></i></a>
</div>
<div class="simi" uk-tooltip="title:私密; pos: top; offset:2;">
<a visible="PUBLIC"><i class="ri-lock-unlock-line"></i></a>
</div>
</div>
<div class="right">
<div class="loca">
<a class="loca_text" state="0" uk-tooltip="title:自定义; pos: top; offset:2;"></a>
<a class="laqu"><i class="ri-map-pin-2-line"></i></a>
<div class="local_box round8 shadow" uk-dropdown="mode: click;toggle:.loca_text;boundary: .tool_box; stretch: x;pos: top-center">
<div class="inner">
<div class="set_local_box"><input type="text" placeholder="输入自定义位置" name="set_local" id="set_local"><a class="set_local_btn">确定</a></div>
<a class="close_local">位置已开启</a>
</div>
</div>
</div>
</div>
</div>
<div class="smile_show"><div class="smile_show_inner"><a class="smile_btn">😃</a><a class="smile_btn">😊</a><a class="smile_btn">😉</a><a class="smile_btn">😒</a><a class="smile_btn">😘</a><a class="smile_btn">👌</a><a class="smile_btn">👍</a><a class="smile_btn">💖</a><a class="smile_btn">💋</a><a class="smile_btn">👏</a><a class="smile_btn">😂</a><a class="smile_btn">😜</a><a class="smile_btn">✌</a><a class="smile_btn">🎁</a><a class="smile_btn">☕</a><a class="smile_btn">🌹</a><a class="smile_btn">🤦</a><a class="smile_btn">👀</a><a class="smile_btn">😆</a><a class="smile_btn">🤢</a><a class="smile_btn">😈</a><a class="smile_btn">👻</a><a class="smile_btn">🙊</a><a class="smile_btn">😥</a><a class="smile_btn">😶</a><a class="smile_btn">😐</a><a class="smile_btn">😤</a><a class="smile_btn">😱</a><a class="smile_btn">🙏</a><a class="smile_btn">💪</a></div></div>
<div class="moment_type_main">
<div class="add_img_box">
<div class="img_show" uk-sortable="handle: .t_media_item;cls-no-drag:up_img_btn;">
<a class="up_img_btn">
<i class="ri-add-line"></i>
<input type="file" name="topic_img_up" id="topic_img_up" accept="image/jpg,image/jpeg,image/png,image/gif,image/webp" multiple="multiple" title="上传图片">
</a>
</div>
<div class="up_img_type">
<div class="up_from_media">
<a><i class="ri-gallery-line"></i>从媒体库选择</a>
</div>
<div class="up_from_cdn">
<a><i class="ri-image-add-line"></i>插入图床图片</a>
</div>
</div>
<div class="show_media_box" style="display:none">
<div class="wp_get_media_list"></div>
<div class="nav_tool">
<div class="attch_nav" paged="">
<a class="pre"><i class="ri-arrow-left-s-line"></i></a>
<a class="nex"><i class="ri-arrow-right-s-line"></i></a>
</div>
<a class="souqi"><i class="ri-upload-line"></i> 收起</a>
</div>
</div>
<div class="show_cdn_media" style="display:none">
<div class="inner">
<input type="text" placeholder="外部图片链接" name="img_link_up" id="img_link_up">
<a class="img_link_btn">插入</a><a class="img_link_cancel">取消</a>
</div>
<span>支持: jpg | png | gif | webp | jpeg</span>
</div>
</div>
</div>
<div class="form_footer">
<div class="admin_tool">
<a href="/console" target="_blank"><i class="ri-function-line"></i> 控制台</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i> 登出</a>
</div>
<div class="moment_sure">
<button class="uk-modal-close push_close">取消</button>
<button class="push_item" type="image" action="push" pid="0"><i class="ri-send-plane-2-line"></i>发布</button>
</div>
</div>
</div>
</div>
</div>
<div class="image_edit_temp" style="display:none"></div>
<th:block th:fragment="topic-push">
<div id="create_post_box" class="uk-flex-top" uk-modal="bg-close:false"
th:if="${pluginFinder.available('PluginMoments')}">
<div class="modal_inner uk-modal-dialog uk-modal-body round8 uk-margin-auto-vertical">
<div class="t_form">
<div class="edit_text">
<div class="cat_header">
<div class="de_cat">
<span class="t_cat_toogle" tabindex="0" aria-haspopup="true" aria-expanded="false">
<i class="ri-hashtag"></i><span>[[${theme.config.moments.topics_de_cat}]]</span>
</span>
<div class="t_cat_box round8 shadow" uk-dropdown="mode: click;toggle:.t_cat_toogle;boundary: .tool_box; stretch: x;pos: top-center">
<div class="set_cat">
<input type="text" placeholder="创建话题" name="add_cat" id="add_cat">
<a class="up_cat_btn">创建</a>
</div>
<ul style="overscroll-behavior: contain;" th:with="tags = ${momentFinder.listAllTags()}">
<li class="topic_default_cat" th:each="tag : ${tags}">
<span class="c_name">
<i class="ri-hashtag"></i>
<span th:text="${tag.name}"></span>
</span>
</li>
</ul>
</div>
</div>
</div>
<textarea id="topic_content" name="topic_content" placeholder="可否归来？在水一方" maxlength="800"></textarea>
</div>
</div>
<div class="topic_tool">
<div class="tool_box">
<div class="left">
<div class="moment_image_type moment_type_btn" uk-tooltip="title:图文; pos:top; offset:2;">
<a><i class="ri-image-line"></i></a>
</div>
<div class="moment_video_type moment_type_btn" uk-tooltip="title:视频; pos:top; offset:2;">
<a><i class="ri-movie-line"></i></a>
</div>
<div class="moment_audio_type moment_type_btn" uk-tooltip="title:音乐; pos: top; offset:2;">
<a><i class="ri-disc-line"></i></a>
</div>
<div class="moment_card_type moment_type_btn" uk-tooltip="title:卡片; pos: top; offset:2;">
<a><i class="ri-pages-line"></i></a>
</div>
<span class="moment_btn_line"> | </span>
<div class="smile_box" uk-tooltip="title:表情; pos: top; offset:2;">
<a><i class="ri-emotion-line"></i></a>
</div>
<div class="simi" uk-tooltip="title:私密; pos: top; offset:2;">
<a visible="PUBLIC"><i class="ri-lock-unlock-line"></i></a>
</div>
</div>
<div class="right">
<div class="loca">
<a class="loca_text" state="0" uk-tooltip="title:自定义; pos: top; offset:2;"></a>
<a class="laqu"><i class="ri-map-pin-2-line"></i></a>
<div class="local_box round8 shadow" uk-dropdown="mode: click;toggle:.loca_text;boundary: .tool_box; stretch: x;pos: top-center">
<div class="inner">
<div class="set_local_box"><input type="text" placeholder="输入自定义位置" name="set_local" id="set_local"><a class="set_local_btn">确定</a></div>
<a class="close_local">位置已开启，点击关闭</a>
</div>
</div>
</div>
</div>
</div>
<div class="smile_show"><div class="smile_show_inner"><a class="smile_btn">😃</a><a class="smile_btn">😊</a><a class="smile_btn">😉</a><a class="smile_btn">😒</a><a class="smile_btn">😘</a><a class="smile_btn">👌</a><a class="smile_btn">👍</a><a class="smile_btn">💖</a><a class="smile_btn">💋</a><a class="smile_btn">👏</a><a class="smile_btn">😂</a><a class="smile_btn">😜</a><a class="smile_btn">✌</a><a class="smile_btn">🎁</a><a class="smile_btn">☕</a><a class="smile_btn">🌹</a><a class="smile_btn">🤦</a><a class="smile_btn">👀</a><a class="smile_btn">😆</a><a class="smile_btn">🤢</a><a class="smile_btn">😈</a><a class="smile_btn">👻</a><a class="smile_btn">🙊</a><a class="smile_btn">😥</a><a class="smile_btn">😶</a><a class="smile_btn">😐</a><a class="smile_btn">😤</a><a class="smile_btn">😱</a><a class="smile_btn">🙏</a><a class="smile_btn">💪</a></div></div>
<div class="moment_type_main">
<div class="add_img_box">
<div class="img_show" uk-sortable="handle: .t_media_item;cls-no-drag:up_img_btn;">
<a class="up_img_btn">
<i class="ri-add-line"></i>
<input type="file" name="topic_img_up" id="topic_img_up" accept="image/*,video/*" multiple="multiple" title="上传图片/视频">
</a>
</div>
<div class="up_img_type">
<div class="up_from_media">
<a><i class="ri-gallery-line"></i>从媒体库选择</a>
</div>
<div class="up_from_cdn">
<a><i class="ri-image-add-line"></i>从链接中插入</a>
</div>
</div>
<div class="show_media_box" style="display:none">
<div class="wp_get_media_list"></div>
<div class="nav_tool">
<div class="attch_nav" paged="">
<a class="pre"><i class="ri-arrow-left-s-line"></i></a>
<a class="nex"><i class="ri-arrow-right-s-line"></i></a>
</div>
<a class="souqi"><i class="ri-upload-line"></i> 收起</a>
</div>
</div>
<div class="show_cdn_media" style="display:none">
<div class="inner">
<input type="text" placeholder="外部图片链接" name="img_link_up" id="img_link_up">
<a class="img_link_btn">插入</a><a class="img_link_cancel">取消</a>
</div>
<span>仅支持图片与视频类型</span>
</div>
</div>
</div>
<div class="form_footer">
<div class="admin_tool">
<a href="/console" target="_blank"><i class="ri-function-line"></i> 管理</a>
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i> 登出</a>
</div>
<div class="moment_sure">
<button class="uk-modal-close push_close">取消</button>
<button class="push_item" type="image" action="push" pid="0"><i class="ri-send-plane-2-line"></i>发布</button>
</div>
</div>
</div>
</div>
</div>
<div class="image_edit_temp" style="display:none"></div>
</th:block>
templates/modules/variables/moments-img-style.html
+253 -212
View File
@@ -1,213 +1,254 @@
<style th:if="${theme.config.moments.img_style == 'one'}">
.img_list .list_inner {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
}
.img_list span {
padding: 3px;
position: relative;
width: 25%;
margin: 3px;
}
.img_list span:nth-child(1):nth-last-child(4),
.img_list span:nth-child(3):nth-last-child(2),
.img_list span:nth-child(4):nth-last-child(1) {
width: 25%;
}
.img_list span:nth-child(2):nth-last-child(3) {
margin-right: 30%;
}
.img_list span img {
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.img_list .list_inner span:before {
content: "";
display: block;
padding-top: 100%;
}
@media only screen and (max-width:540px) {
.img_list span {
width: 30%;
margin: 2px;
}
.img_list span:nth-child(1):nth-last-child(4),
.img_list span:nth-child(3):nth-last-child(2),
.img_list span:nth-child(4):nth-last-child(1) {
width: 30%;
}
}
</style>
<style th:if="${theme.config.moments.img_style == 'two'}">
.img_list span:nth-last-child(1):first-child {
width: 85%;
}
.img_list .list_inner {
display: grid;
max-width: 25rem;
flex-wrap: wrap;
flex-direction: row;
grid-template-columns: repeat(3, 1fr);
align-content: center;
}
.img_list span {
position: relative;
margin: 3px;
}
.img_list .list_inner[num='1'] {
grid-template-columns: repeat(1, 1fr);
}
.img_list .list_inner[num='1'] img {
aspect-ratio: unset;
max-height: 30rem;
max-width: 25rem;
}
.img_list .list_inner[num='2'],
.img_list .list_inner[num='4'] {
grid-template-columns: repeat(2, 1fr);
}
.img_list .list_inner[num='3'],
.img_list .list_inner[num='6'],
.img_list .list_inner[num='8'] {
grid-template-columns: repeat(3, 1fr);
}
.img_list .list_inner[num='5'] {
grid-template-columns: repeat(6, 1fr);
}
.img_list .list_inner[num='7'] {
grid-template-columns: repeat(4, 1fr);
}
.img_list .list_inner[num='3'] span:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.img_list .list_inner[num='3'] span:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
.img_list .list_inner[num='3'] span:nth-child(3) {
grid-area: 2 / 3 / 3 / 4;
}
.img_list .list_inner[num='5'] span:nth-child(1) {
grid-area: 1 / 1 / 5 / 5;
}
.img_list .list_inner[num='5'] span:nth-child(2) {
grid-area: 1 / 5 / 3 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(3) {
grid-area: 3 / 5 / 5 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(4) {
grid-area: 5 / 1 / 7 / 4;
}
.img_list .list_inner[num='5'] span:nth-child(5) {
grid-area: 5 / 4 / 7 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
height: 127.35px;
}
.img_list .list_inner[num='6'] span:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.img_list .list_inner[num='6'] span:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
.img_list .list_inner[num='6'] span:nth-child(3) {
grid-area: 2 / 3 / 3 / 4;
}
.img_list .list_inner[num='6'] span:nth-child(4) {
grid-area: 3 / 1 / 4 / 2;
}
.img_list .list_inner[num='6'] span:nth-child(5) {
grid-area: 3 / 2 / 4 / 3;
}
.img_list .list_inner[num='6'] span:nth-child(6) {
grid-area: 3 / 3 / 4 / 4;
}
.img_list .list_inner[num='7'] span:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.img_list .list_inner[num='7'] span:nth-child(2) {
grid-area: 1 / 3 / 3 / 5;
}
.img_list .list_inner[num='7'] span:nth-child(3) {
grid-area: 3 / 1 / 5 / 3;
}
.img_list .list_inner[num='7'] span:nth-child(4) {
grid-area: 3 / 3 / 4 / 4;
}
.img_list .list_inner[num='7'] span:nth-child(5) {
grid-area: 3 / 4 / 4 / 5;
}
.img_list .list_inner[num='7'] span:nth-child(6) {
grid-area: 4 / 3 / 5 / 4;
}
.img_list .list_inner[num='7'] span:nth-child(7) {
grid-area: 4 / 4 / 5 / 5;
}
.img_list .list_inner[num='8'] span:nth-child(8) {
grid-area: 3 / 2 / 4 / 4;
}
.img_list .list_inner[num='8'] span:nth-child(8) img {
aspect-ratio: 3;
}
.img_list span img {
aspect-ratio: 1;
display: block;
border-radius: 5px;
width: 100%;
height: 100%;
object-fit: cover;
}
<style th:if="${theme.config.moments.img_style == 'one'}">
.img_list .list_inner {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
}
.img_list span {
padding: 3px;
position: relative;
width: 25%;
margin: 3px;
}
.img_list span:nth-child(1):nth-last-child(4),
.img_list span:nth-child(3):nth-last-child(2),
.img_list span:nth-child(4):nth-last-child(1) {
width: 25%;
}
.img_list span:nth-child(2):nth-last-child(3) {
margin-right: 30%;
}
.img_list span img {
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.img_list .list_inner span:before {
content: "";
display: block;
padding-top: 100%;
}
@media only screen and (max-width:540px) {
.img_list span {
width: 30%;
margin: 2px;
}
.img_list span:nth-child(1):nth-last-child(4),
.img_list span:nth-child(3):nth-last-child(2),
.img_list span:nth-child(4):nth-last-child(1) {
width: 30%;
}
}
</style>
<style th:if="${theme.config.moments.img_style == 'two'}">
.img_list span:nth-last-child(1):first-child {
width: 85%;
}
.img_list .list_inner {
display: grid;
max-width: 25rem;
flex-wrap: wrap;
flex-direction: row;
grid-template-columns: repeat(3, 1fr);
align-content: center;
}
.img_list span {
position: relative;
margin: 3px;
}
.img_list .list_inner[num='1'] {
grid-template-columns: repeat(1, 1fr);
}
.img_list .list_inner[num='1'] img {
aspect-ratio: unset;
max-height: 30rem;
max-width: 25rem;
}
.img_list .list_inner[num='2'],
.img_list .list_inner[num='4'] {
grid-template-columns: repeat(2, 1fr);
}
.img_list .list_inner[num='3'],
.img_list .list_inner[num='6'],
.img_list .list_inner[num='8'] {
grid-template-columns: repeat(3, 1fr);
}
.img_list .list_inner[num='5'] {
grid-template-columns: repeat(6, 1fr);
}
.img_list .list_inner[num='7'] {
grid-template-columns: repeat(4, 1fr);
}
.img_list .list_inner[num='3'] span:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.img_list .list_inner[num='3'] span:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
.img_list .list_inner[num='3'] span:nth-child(3) {
grid-area: 2 / 3 / 3 / 4;
}
.img_list .list_inner[num='5'] span:nth-child(1) {
grid-area: 1 / 1 / 5 / 5;
}
.img_list .list_inner[num='5'] span:nth-child(2) {
grid-area: 1 / 5 / 3 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(3) {
grid-area: 3 / 5 / 5 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(4) {
grid-area: 5 / 1 / 7 / 4;
}
.img_list .list_inner[num='5'] span:nth-child(5) {
grid-area: 5 / 4 / 7 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
height: 127.35px;
}
.img_list .list_inner[num='6'] span:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.img_list .list_inner[num='6'] span:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
.img_list .list_inner[num='6'] span:nth-child(3) {
grid-area: 2 / 3 / 3 / 4;
}
.img_list .list_inner[num='6'] span:nth-child(4) {
grid-area: 3 / 1 / 4 / 2;
}
.img_list .list_inner[num='6'] span:nth-child(5) {
grid-area: 3 / 2 / 4 / 3;
}
.img_list .list_inner[num='6'] span:nth-child(6) {
grid-area: 3 / 3 / 4 / 4;
}
.img_list .list_inner[num='7'] {
display: grid;
/* 采用 6 列网格，支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
grid-template-columns: repeat(6, 1fr);
/* 间距修正 */
gap: 6px;
padding: 3px;
/* 清除干扰 */
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='7'] span {
/* 清除干扰，保持稳定性 */
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 默认尺寸：中等 (33.3% 宽度, span 2/6) */
grid-column: span 2;
}
/* 第一行 (Item 1, 2)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(1),
.img_list .list_inner[num='7'] span:nth-child(2) {
grid-column: span 3;
}
/* 第三行 (Item 6, 7)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(6),
.img_list .list_inner[num='7'] span:nth-child(7) {
grid-column: span 3;
}
/* 容器设置：保持 6 列网格，用于计算 1/3 和 1/2 宽度 */
.img_list .list_inner[num='8'] {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 列 */
max-height: 100vw;
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
/* 默认规则：应用到所有子项，用于第 1 行和第 3 行 (1/3 宽度) */
.img_list .list_inner[num='8'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
grid-column: span 2;
}
/* 特殊规则：仅应用于第 2 行的 2 张图片 (1/2 宽度) */
.img_list .list_inner[num='8'] span:nth-child(4),
.img_list .list_inner[num='8'] span:nth-child(5) {
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
grid-column: span 3;
}
/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
.img_list .list_inner[num='8'] span:nth-child(-n+3), /* 第 1, 2, 3 个 */
.img_list .list_inner[num='8'] span:nth-child(n+6) { /* 第 6, 7, 8 个 */
grid-column: span 2;
}
.img_list span img {
aspect-ratio: 1;
display: block;
border-radius: 5px;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
templates/modules/widgets/aside/pix_widget_yiyan.html
+15 -15
View File
@@ -1,16 +1,16 @@
<section id="pix_widget_yiyan-2" class="widget pix_widget_yiyan">
<div class="wid_title" th:text="${theme.config.sidebar.pix_widget_yiyan.title}">一言</div>
<ul class="items wid_yiyan">
<div class="yiyan_box">
<img class="lazy"
th:data-src="${theme.config.sidebar.pix_widget_yiyan.yiyan_bg}">
<div class="yiyan_info">
<div class="time">
<div class="left"><span class="day">[[${#dates.format(#dates.createNow(),'dd')}]]</span><span class="ym">[[${#dates.format(#dates.createNow(),'yyyy/MM')}]]</span></div><a
class="change"><i class="ri-refresh-line"></i></a>
</div>
<p uk-tooltip="东京喰种" aria-describedby="uk-tooltip-23" tabindex="0">错的不是我，而是这个世界！</p>
</div>
</div>
</ul>
<section id="pix_widget_yiyan-2" class="widget pix_widget_yiyan">
<div class="wid_title" th:text="${theme.config.sidebar.pix_widget_yiyan.title}">一言</div>
<ul class="items wid_yiyan">
<div class="yiyan_box">
<img class="lazy"
th:data-src="${theme.config.sidebar.pix_widget_yiyan.yiyan_bg}">
<div class="yiyan_info">
<div class="time">
<div class="left"><span class="day">[[${#dates.format(#dates.createNow(),'dd')}]]</span><span class="ym">[[${#dates.format(#dates.createNow(),'yyyy/MM')}]]</span></div><a
class="change"><i class="ri-refresh-line"></i></a>
</div>
<p uk-tooltip="阿年的日记簿" aria-describedby="uk-tooltip-23" tabindex="0">一日不见 如隔三秋</p>
</div>
</div>
</ul>
</section>