367 lines
13 KiB
HTML
367 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" th:fragment="layout(content, htmlType)" xmlns:th="http://www.thymeleaf.org"
|
||
th:with="assets_link=${theme.config.other.staticResource.use == 'elemecdn' ? 'https://npm.elemecdn.com/hao-theme-static@' + theme.spec.version +'/templates/assets' : theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')}">
|
||
|
||
<!-- head 中自定义的 -->
|
||
|
||
<head th:replace="~{modules/head :: head(htmlType = ${htmlType})}">
|
||
<title th:text="${site.title}"></title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- loading 页面 -->
|
||
<div th:replace="~{modules/loading-box :: loading-box}"></div>
|
||
|
||
<!-- 网站背景 -->
|
||
<div id="web_bg"></div>
|
||
|
||
<!-- 网站背景 -->
|
||
<div id="an_music_bg"></div>
|
||
|
||
<!-- 控制台 -->
|
||
<div th:replace="~{modules/widgets/console :: console}"></div>
|
||
|
||
<div th:replace="~{modules/sidebar :: sidebar}"></div>
|
||
|
||
<!-- 左下角音乐 -->
|
||
<th:block th:if="${theme.config.tool.nav_music.nav_musicEnable}" >
|
||
<div th:replace="~{modules/nav-music :: nav-music}"></div>
|
||
</th:block>
|
||
|
||
<!-- 内容 -->
|
||
<th:block th:replace="${content}"></th:block>
|
||
|
||
<!-- todo 暂时没显示，是右下角悬浮操作按钮 -->
|
||
<div id="rightside">
|
||
<div id="rightside-config-hide">
|
||
<button id="translateLink" title="简繁转换" type="button">简</button>
|
||
<button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
|
||
<button id="hide-aside-btn" title="单栏和双栏切换" type="button"><i class="fas fa-arrows-alt-h"></i></button>
|
||
</div>
|
||
<div id="rightside-config-show">
|
||
<button id="rightside_config" title="设置" type="button"><i class="fas fa-cog fa-spin"></i></button>
|
||
<button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div th:replace="~{modules/right-menu :: right-menu}"></div>
|
||
|
||
<div>
|
||
<script th:src="${assets_link + '/js/utils.js'}"></script>
|
||
<script th:src="${assets_link + '/js/main.js'}"></script>
|
||
<script charset="utf-8" data-pjax th:src="${assets_link + '/zhheo/blogex.js'}"></script>
|
||
|
||
<!-- https://instant.page/ 网站预加载， 放在 </body> 之前 -->
|
||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js" type="module"></script>
|
||
|
||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script>
|
||
|
||
<!-- 右下角通知 https://www.polonel.com/snackbar/ -->
|
||
<!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
|
||
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
|
||
|
||
<!-- 深色模式下添加粒子效果canvas -->
|
||
<canvas th:if="${theme.config.style.universe}" id="universe" width="1312" height="880"></canvas>
|
||
<script th:if="${theme.config.style.universe}" async="" th:src="${assets_link + '/libs/canvas/dark.js'}"></script>
|
||
|
||
<!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
|
||
<!-- 应该是文章页分享使用 -->
|
||
<script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
|
||
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
|
||
<script th:src="${assets_link + '/libs/waterfall/waterfall.min.js'}"></script>
|
||
|
||
<!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
|
||
<!--<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>-->
|
||
<script th:src="${assets_link + '/libs/fast-average-color/index.browser.min.js'}"></script>
|
||
|
||
<script th:src="${assets_link + '/libs/view-image/view-image.min.js'}"></script>
|
||
|
||
|
||
<!--左下角音乐-->
|
||
<script>var meting_api = '[[${theme.config.tool.nav_music.meting_api}]]'; </script>
|
||
|
||
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="all" onload="this.media='all'">
|
||
|
||
<script th:src="${assets_link + '/libs/aplayer/APlayer.min.js'}"></script>
|
||
|
||
<script th:src="${assets_link + '/libs/aplayer/Meting2.min.js'}"></script>
|
||
|
||
|
||
|
||
<script th:src="${assets_link + '/libs/pjax/pjax.min.js'}"></script>
|
||
|
||
<!-- swiper 在瞬间滚动时会使用 -->
|
||
<script data-pjax src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>
|
||
|
||
<!-- 评论弹幕 -->
|
||
<script th:replace="~{modules/commentBarrage :: commentBarrage}"></script>
|
||
|
||
<!-- Tocbot 目录生成 start -->
|
||
<script th:src="${assets_link + '/libs/tocbot/4.18.2/tocbot.min.js'}"></script>
|
||
<link th:href="${assets_link + '/libs/tocbot/4.18.2/tocbot.css'}" rel="stylesheet">
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
|
||
const postContent = document.querySelector('.post-content');
|
||
|
||
if (postContent == null) return;
|
||
|
||
const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
|
||
// 没有 toc 目录，则直接移除
|
||
if (headers.length === 0) {
|
||
document.getElementById("card-toc").remove();
|
||
} else {
|
||
tocbot.init({
|
||
tocSelector: '.toc-content',
|
||
contentSelector: '.post-content',
|
||
headingSelector: 'h1,h2,h3,h4,h5,h6',
|
||
hasInnerContainers: true
|
||
});
|
||
|
||
}
|
||
})
|
||
document.addEventListener('pjax:complete', function () {
|
||
|
||
const postContent = document.querySelector('.post-content');
|
||
|
||
if (postContent == null) return;
|
||
|
||
const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
|
||
// 没有 toc 目录，则直接移除
|
||
if (headers.length === 0) {
|
||
document.getElementById("card-toc").remove();
|
||
} else {
|
||
tocbot.init({
|
||
tocSelector: '.toc-content',
|
||
contentSelector: '.post-content',
|
||
headingSelector: 'h1,h2,h3,h4,h5,h6',
|
||
hasInnerContainers: true
|
||
});
|
||
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!-- Tocbot 目录生成 end -->
|
||
|
||
|
||
|
||
<script>
|
||
!function(p) {
|
||
"use strict";
|
||
!function(t) {
|
||
var s = window
|
||
, e = document
|
||
, i = p
|
||
, c = "".concat("https:" === e.location.protocol ? "https://" : "http://", "sdk.51.la/js-sdk-pro.min.js")
|
||
, n = e.createElement("script")
|
||
, r = e.getElementsByTagName("script")[0];
|
||
n.type = "text/javascript",
|
||
n.setAttribute("charset", "UTF-8"),
|
||
n.async = !0,
|
||
n.src = c,
|
||
n.id = "LA_COLLECT",
|
||
i.d = n;
|
||
var o = function() {
|
||
s.LA.ids.push(i)
|
||
};
|
||
s.LA ? s.LA.ids && o() : (s.LA = p,
|
||
s.LA.ids = [],
|
||
o()),
|
||
r.parentNode.insertBefore(n, r)
|
||
}()
|
||
}({
|
||
id: "[[${theme.config.about.LingQueMonitorID}]]",
|
||
ck: "[[${theme.config.about.LingQueMonitorID}]]",
|
||
hashMode: true
|
||
});
|
||
</script>
|
||
|
||
|
||
<script th:if="${theme.config.other.diytitle.diytitleEnable}">//动态标题
|
||
let leaveTitle = '[[${theme.config.other.diytitle.leaveTitle}]]';
|
||
let backTitle = '[[${theme.config.other.diytitle.backTitle}]]';
|
||
let OriginTitile = document.title
|
||
let titleTime
|
||
document.addEventListener('visibilitychange', function () {
|
||
if (document.hidden) {
|
||
//离开当前页面时标签显示内容
|
||
document.title = leaveTitle
|
||
clearTimeout(titleTime)
|
||
} else {
|
||
//返回当前页面时标签显示内容
|
||
document.title = backTitle + OriginTitile
|
||
//两秒后变回正常标题
|
||
titleTime = setTimeout(function () {
|
||
document.title = OriginTitile
|
||
}, 2000)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<script >
|
||
if(GLOBAL_CONFIG.isFriendLinksInFooter){
|
||
var link = {
|
||
// 页脚友链
|
||
addFriendLinksInFooter: function () {
|
||
|
||
var fetchUrl = [[${theme.config.footer.footer_group.fetchUrl}]]
|
||
fetch(fetchUrl)
|
||
.then(res => res.json())
|
||
.then(json => {
|
||
var randomFriendLinks = getArrayItems(json, 3);
|
||
|
||
var htmlText = '';
|
||
for (let i = 0; i < randomFriendLinks.length; ++i) {
|
||
var item = randomFriendLinks[i]
|
||
htmlText += `<a class='footer-item' href='${item.link}' target="_blank" rel="noopener nofollow">${item.name}</a>`;
|
||
}
|
||
htmlText += `<a class='footer-item' href='/links'>更多</a>`
|
||
document.getElementById("friend-links-in-footer").innerHTML = htmlText;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<div id="js-pjax"></div>
|
||
|
||
|
||
<script>
|
||
let pjaxSelectors = ['title', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '.js-pjax','#site-config']
|
||
|
||
if (false) {
|
||
pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
|
||
}
|
||
|
||
var pjax = new Pjax({
|
||
elements: 'a:not([target="_blank"])',
|
||
selectors: pjaxSelectors,
|
||
cacheBust: false,
|
||
analytics: false,
|
||
scrollRestoration: false
|
||
})
|
||
|
||
document.addEventListener('pjax:send', function () {
|
||
|
||
// removeEventListener toc scroll
|
||
window.removeEventListener('scroll', window.tocScrollFn)
|
||
|
||
typeof preloader === 'object' && preloader.initLoading()
|
||
|
||
if (window.aplayers) {
|
||
for (let i = 0; i < window.aplayers.length; i++) {
|
||
if (!window.aplayers[i].options.fixed) {
|
||
window.aplayers[i].destroy()
|
||
}
|
||
}
|
||
}
|
||
|
||
typeof typed === 'object' && typed.destroy()
|
||
|
||
//reset readmode
|
||
const $bodyClassList = document.body.classList
|
||
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
|
||
})
|
||
|
||
document.addEventListener('pjax:complete', function () {
|
||
window.refreshFn()
|
||
|
||
document.querySelectorAll('script[data-pjax]').forEach(item => {
|
||
const newScript = document.createElement('script')
|
||
const content = item.text || item.textContent || item.innerHTML || ""
|
||
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
|
||
newScript.appendChild(document.createTextNode(content))
|
||
item.parentNode.replaceChild(newScript, item)
|
||
}
|
||
)
|
||
|
||
GLOBAL_CONFIG.lazyload.enable && window.lazyLoadInstance.update()
|
||
|
||
typeof chatBtnFn === 'function' && chatBtnFn()
|
||
typeof panguInit === 'function' && panguInit()
|
||
|
||
// google analytics
|
||
typeof gtag === 'function' && gtag('config', '', {
|
||
'page_path': window.location.pathname
|
||
});
|
||
|
||
// baidu analytics
|
||
typeof _hmt === 'object' && _hmt.push(['_trackPageview', window.location.pathname]);
|
||
|
||
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
|
||
|
||
// Analytics
|
||
if (false) {
|
||
MtaH5.pgv()
|
||
}
|
||
|
||
// prismjs
|
||
typeof Prism === 'object' && Prism.highlightAll()
|
||
|
||
typeof preloader === 'object' && preloader.endLoading()
|
||
})
|
||
|
||
if(GLOBAL_CONFIG.error404Enable){
|
||
document.addEventListener('pjax:error', (e) => {
|
||
if (e.request.status === 404) {
|
||
pjax.loadUrl('/404')
|
||
}
|
||
}
|
||
)
|
||
}
|
||
</script>
|
||
|
||
|
||
</div>
|
||
|
||
<script data-pjax="">
|
||
|
||
|
||
if ([[${ theme.config.post.dynamicBackground }]]) {
|
||
// 图片主色
|
||
coverColor();
|
||
}
|
||
|
||
if ([[${ theme.config.other.loadingBoxs.loadingBoxEnable }]]) {
|
||
// 移除加载动画
|
||
removeLoading();
|
||
}
|
||
navTitle();
|
||
heo.topPostScroll();
|
||
heo.topCategoriesBarScroll();
|
||
heo.sayhi();
|
||
heo.addTag();
|
||
heo.stopImgRightDrag();
|
||
heo.qrcodeCreate();
|
||
heo.onlyHome();
|
||
heo.addNavBackgroundInit();
|
||
//heo.addMediumInEssay();
|
||
heo.darkModeStatus();
|
||
// heo.categoriesBarActive();
|
||
heo.initThemeColor();
|
||
//页脚友联
|
||
if(GLOBAL_CONFIG.isFriendLinksInFooter){
|
||
link.addFriendLinksInFooter()
|
||
}
|
||
|
||
//右下角 snackbar 弹窗
|
||
if ([[${ theme.config.tool.snackbar.switch }]]) {
|
||
heo.hidecookie()
|
||
}
|
||
|
||
//音乐页面切换歌曲调用
|
||
if(GLOBAL_CONFIG.isMusic){
|
||
heo.changeMusicBg(false);
|
||
}
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |