halo-theme-hao/templates/modules/head.html

321 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 公共的 head 部分,可以定义部分 links,scripts,styles -->
<th:block th:fragment="head(htmlType)">
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<title th:text="${siteTitle}"></title>
<link rel="shortcut icon"
th:href="@{${#strings.isEmpty(site.favicon) ? assets_link + '/images/hao-logo.jpg' : site.favicon}}"/>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script th:src="${assets_link + '/js/heo.js' + theme_version}"></script>
<script th:src="${assets_link + '/js/halo.js' + theme_version}"></script>
<link rel="stylesheet" th:href="${assets_link + '/zhheo/zhheoblog.css' + theme_version}">
<link rel="stylesheet" th:href="${assets_link + '/zhheo/custom.css' + theme_version}">
<link rel="stylesheet" th:href="${assets_link + '/zhheo/commentBarrage.css'}">
<style th:if="${theme.config.other.scrollbarLinearGradientEnable}">
*::-webkit-scrollbar-thumb {
background-color: var(--heo-main);
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
border-radius: 2em
}
</style>
<!-- swiper 在瞬间滚动时会使用 -->
<link th:if="${theme.config.top.moment}" rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"/>
<!-- 右下角通知 -->
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<!-- 代码块自动识别语言 -->
<th:block th:replace="~{modules/common/code :: code}"/>
<!-- 代码块-->
<th:block th:replace="~{macro/prism-code :: prism-code}"/>
<!-- 页脚内容-样式一 -->
<th:block th:replace="~{modules/common/footer-style-one :: footer-style-one}"/>
<script>
(win => {
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function () {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
heo.initThemeColor()
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
heo.initThemeColor()
}
const t = saveToLocal.get('theme')
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if (t === undefined) {
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport) {
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else if (t === 'light') activateLightMode()
else activateDarkMode()
if("[[${theme.config.style.colorScheme}]]" === 'dark')
activateDarkMode()
if("[[${theme.config.style.colorScheme}]]" === 'light')
activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
})(window)
</script>
<!-- 动态加载条 -->
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
th:src="${assets_link + '/libs/pace/pace.min.js'}"
th:if="${theme.config.other.loadingBoxs.loadProgressBar}">
</script>
<!-- 复制 https://githubfast.com/zenorocha/clipboard.js -->
<script th:src="${assets_link + '/libs/clipboard/clipboard.min.js'}"></script>
<!-- 全局图片预览-->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css">
<!-- 关于统计-->
<script th:if="${#strings.contains(theme.config.about.widgets,'statistics-map')}" th:src="${assets_link + '/libs/countup/countup.js'}"></script>
<!-- 小板报 -->
<th:block th:if="${not #strings.isEmpty(theme.config.sidebar.welcome.key)}">
<script defer th:if="${#strings.contains(theme.config.sidebar.widgetss.indexWidgets,'welcome') ||
#strings.contains(theme.config.sidebar.widgetss.postWidgets,'welcome') ||
#strings.contains(theme.config.sidebar.widgetss.tagWidgets,'welcome') ||
#strings.contains(theme.config.sidebar.widgetss.categoryWidgets,'welcome')}"
th:src="${assets_link + '/libs/welcome/welcome.js'}"></script>
</th:block>
<!-- icon图标 -->
<link rel="stylesheet" th:href="'https://cdn.cbd.int/hao-theme-static@'+${theme.spec.version}+'/icon/iconfont.css'">
<!-- 声明一些公共信息 -->
<script id="site-config" th:inline="javascript">
var GLOBAL_CONFIG = {
// 页面类型 index,page,post,tag,category
htmlType: [[${ htmlType }]],
postTitle: [[${ htmlType == 'post' ? post.spec.title : htmlType == 'page' ? singlePage.spec.title : ''}]],
isPost: [[${htmlType == 'post'}]],
isHome: [[${ htmlType == 'index'}]],
copyright: undefined,
lightbox: 'fancybox',
lazyload: {enable: [[${theme.config.other.vanillaLazyload.enable}]], error: [[@{${theme.config.other.vanillaLazyload.errorImg}}]] },
isFriendLinksInFooter: [[${theme.config.footer.footer_group.enable_footer_group}]],
loadingBox: [[${theme.config.other.loadingBoxs.loadingBoxEnable}]],
loadProgressBar: [[${theme.config.other.loadingBoxs.loadProgressBar}]],
navMusicEnable:[[${theme.config.tool.nav_music.nav_musicEnable}]],
isMusic: [[${ htmlType == 'music'}]],
helloText: [[${#strings.listSplit(theme.config.sidebar.profile.helloText, ',')}]],
profileStyle: [[${theme.config.sidebar.profile.profileStyle}]],
rightMenuEnable: [[${theme.config.tool.rightMenu.rightMenuEnable}]],
source: {
links: {
linksUrl: [[${ theme.config.link.linksUrl }]],
linksNum: [[${theme.config.footer.footer_group.num}]],
},
jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
justifiedGallery: {
js: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js',
css: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.css'
},
fancybox: {
js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css'
},
comments:{
use: [[${theme.config.comments.use}]],
maxBarrage: [[${ theme.config.comments.commentBarrageConfig.maxBarrage }]],
barrageTime: [[${ theme.config.comments.commentBarrageConfig.barrageTime }]],
mailMd5: "[(${theme.config.comments.commentBarrageConfig.mailMd5})]",
lazyload: [[${theme.config.comments.lazyload}]],
textarea: [[${ theme.config.comments.use == 'Twikoo' ? 'el-textarea__inner' :
theme.config.comments.use == 'Artalk' ? 'atk-textarea' :
theme.config.comments.use == 'Waline' ? 'wl-editor' : 'appearance-none' }]]
},
twikoo:{
js:[[${not #strings.isEmpty(theme.config.comments.twikoos.js) ? theme.config.comments.twikoos.js : assets_link +'/libs/twikoo/twikoo.all.min.js' }]],
twikooUrl: "[(${theme.config.comments.twikoos.envId})]",
accessToken: "[(${theme.config.comments.twikoos.accessToken})]",
},
artalk:{
js:[[${not #strings.isEmpty(theme.config.comments.artalks.artalkJs) ? theme.config.comments.artalks.artalkJs : assets_link +'/libs/artalk/Artalk.js' }]],
css:[[${not #strings.isEmpty(theme.config.comments.artalks.artalkCss) ? theme.config.comments.artalks.artalkCss : assets_link +'/libs/artalk/Artalk.css' }]],
artalkUrl: "[(${theme.config.comments.artalks.server})]",
siteName: "[(${theme.config.comments.artalks.siteName})]",
},
waline:{
js:[[${not #strings.isEmpty(theme.config.comments.walines.walinesJs) ? theme.config.comments.walines.walinesJs : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.js' }]],
serverURL: "[(${theme.config.comments.walines.serverURL})]",
},
welcome:{
key:"[(${theme.config.sidebar.welcome.key})]",
locationLng: [[${theme.config.sidebar.welcome.locationLng}]],
locationLat: [[${theme.config.sidebar.welcome.locationLat}]],
},
post:{
dynamicBackground: [[${ theme.config.post.dynamicBackground }]]
},
tool:{
switch: [[${ theme.config.tool.snackbar.switch }]]
},
postAi:{
ai : [[${htmlType != 'post' || !theme.config.post.aiDescription.aiDescriptionEnable ? '' :
theme.config.post.aiDescription.mode != 'local' && !theme.config.post.aiDescription.switchBtn ? '' :
post.spec.excerpt.autoGenerate ? '本地模式需要自己填写文章摘要' :
#strings.isEmpty(post.status.excerpt) ? '请填写文章摘要' : post.status.excerpt }]],
randomNum : [[${theme.config.post.aiDescription.randomNum}]],
basicWordCount : [[${theme.config.post.aiDescription.basicWordCount}]],
btnLink : "[(${theme.config.post.aiDescription.btnLink})]",
gptName : "[(${theme.config.post.aiDescription.gptName})]",
modeName : [[${theme.config.post.aiDescription.mode}]],
switchBtn : [[${theme.config.post.aiDescription.switchBtn}]],
keys : "[(${theme.config.post.aiDescription.key})]",
Referers : "[(${theme.config.post.aiDescription.Referer})]",
},
img:{
src: [[${isLazyload ? 'data-lazy-src' : 'src' }]]
}
},
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "[(${theme.config.style.themeLightSkin})]",
bgDark: "[(${theme.config.style.themeDarkSkin})]",
position: "top-center",
},
translate: {
defaultEncoding:[[${theme.config.style.translate.defaultEncoding}]],
translateDelay:0,
msgToTraditionalChinese:"繁",
msgToSimplifiedChinese:"简",
rightMenuMsgToTraditionalChinese:"轉為繁體",
rightMenuMsgToSimplifiedChinese:"转为简体"
},
prism: {
enable: [[${ theme.config.code.enable }]],
enable_title: [[${ theme.config.code.enable_title }]],
enable_hr: [[${ theme.config.code.enable_hr }]],
enable_line: [[${ theme.config.code.enable_line }]],
enable_copy: [[${ theme.config.code.enable_copy }]],
enable_expander: [[${ theme.config.code.enable_expander }]],
prism_limit: Number([[${#strings.isEmpty(theme.config.code.height_limit) ? 300 : theme.config.code.height_limit}]])+30,
enable_height_limit: [[${theme.config.code.enable_height_limit}]]
},
};
</script>
</th:block>
</html>