halo-theme-hao/templates/modules/layouts/layout.html

244 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 == 'onmicrosoft' ? 'https://npm.onmicrosoft.cn/hao-theme-static@' + theme.spec.version +'/templates/assets' :
theme.config.other.staticResource.use == 'cbd' ? 'https://cdn.cbd.int/hao-theme-static@' + theme.spec.version +'/templates/assets' :
theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
isLazyload = ${theme.config.other.vanillaLazyload.enable},
loadingImg = ${theme.config.other.vanillaLazyload.loadingImg}">
<!-- 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/widgets/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' + theme_version}"></script>
<script th:src="${assets_link + '/js/main.js' + theme_version}"></script>
<script charset="utf-8" data-pjax th:src="${assets_link + '/zhheo/blogex.js' + theme_version}"></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' + theme_version}"></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' + theme_version}"></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' + theme_version}"></script>
<script th:src="${assets_link + '/libs/view-image/view-image.min.js' + theme_version}"></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' + theme_version}"></script>
<script th:src="${assets_link + '/libs/aplayer/Meting2.min.js' + theme_version}"></script>
<script th:src="${assets_link + '/libs/pjax/pjax.min.js' + theme_version}"></script>
<!-- swiper 在瞬间滚动时会使用 -->
<script data-pjax src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<!-- 评论弹幕 -->
<script th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') &&
not #strings.isEmpty(theme.config.comments.twikoos.envId) &&
not #strings.isEmpty(theme.config.comments.twikoos.accessToken)}" data-pjax=""
th:src="${assets_link + '/libs/twikoo/commentBarrage.js' + theme_version}"></script>
<!-- Tocbot 目录生成 start -->
<th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>
<!-- 51统计 -->
<th:block th:replace="~{modules/common/51-la :: 51-la}"></th:block>
<!-- 动态标题 -->
<script th:replace="~{modules/common/diytitle :: diytitle}"></script>
<!--官方评论插件js-->
<script th:if="${pluginFinder.available('PluginCommentWidget')}" src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>
<div id="js-pjax"></div>
<script th:if="${theme.config.envelope_comment.enable_danmu}" th:src="${assets_link + '/libs/twikoo/easy-Danmaku.min.js' + theme_version}" id="Danmaku"></script>
<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()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404 || e.request.status === 500) {
window.location.href = e.request.responseURL;
}
}
)
</script>
</div>
<!-- 根据配置设置 css 变量值,全局 css 通过变量值进行处理 -->
<th:block th:replace="modules/variables/layout"></th:block>
<script data-pjax="">
if ([[${ theme.config.other.loadingBoxs.loadingBoxEnable }]]) {
// 移除加载动画
removeLoading();
}
//页脚友联
if(GLOBAL_CONFIG.isFriendLinksInFooter){
heo.addFriendLinksInFooter()
}
//音乐页面切换歌曲调用
if(GLOBAL_CONFIG.isMusic){
heo.changeMusicBg(false);
}
//代码块
if(GLOBAL_CONFIG.prism.enable){
halo.addPrismTool()
halo.dataCodeTheme()
}
if(document.querySelector('#danmu') &&
document.body.clientWidth > 768 &&
[[${theme.config.envelope_comment.enable_danmu}]]){
halo.closeCommentBarrage();
halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
}
</script>
</body>
</html>