github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

抽离公共部分 head、loading-box、right-menu，调整为 layout 统一模版

This commit is contained in:
liuzhihang 2022-10-15 13:21:25 +08:00
parent 7f30a9479e
commit 31c57ef67c
11 changed files with 1227 additions and 2982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
settings.yaml
View File

@ -136,3 +136,32 @@ spec:
label: 底部相关链接
placeholder: 请填写 metadata name
help: "需要通过开发者模式获取菜单对应的 metadata name"
- group: loading
label: 加载页
formSchema:
- $formkit: radio
name: switch
label: 开关
value: true
options:
- label: 打开
value: true
- label: 关闭
value: false
- $formkit: url
name: img
validation: "url"
label: 加载页图片 URL
placeholder: 请输入图片 url
- group: right_menu
label: 右键菜单
formSchema:
- $formkit: radio
name: switch
label: 开关
value: true
options:
- label: 打开
value: true
- label: 关闭
value: false

328
templates/assets/js/main.js
View File

File diff suppressed because one or more lines are too long

707
templates/category.html
View File

@ -1,649 +1,96 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
<!-- 右下角通知 -->
<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"
/>
<script>var GLOBAL_CONFIG = {
root: "/",
algolia: {
appId: "29APOGIOTD",
apiKey: "49d70d2ba6e9c2a001a1c8737785d7ee",
indexName: "Heo",
hits: {per_page: 10},
languages: {
input_placeholder: "输入关键词快速查找",
hits_empty: "找不到你查询的内容：${query}",
hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
}
},
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "分类: 翻译内容",
isPost: !1,
isHome: !1,
isHighlightShrink: !1,
isToc: !1,
postUpdate: "2022-09-30 12:24:38"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
<th:block th:fragment="content">
.justified-gallery img {
opacity: 1
}
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout" id="content-inner">
<div id="category">
<div class="category-in-bar">
<div class="category-in-bar-tips">分类</div>
<div id="category-bar">
<div class="category-bar-items" id="category-bar-items">
<div class="category-bar-item select" id="category-bar-home">
<a href="/">首页</a>
</div>
<div class="category-bar-item"
th:each="categoryItem : ${categoryFinder.listAll()}"
th:id="${categoryItem.spec.displayName}">
<a th:href="${categoryItem.status.permalink}"
th:text="${categoryItem.spec.displayName}"></a>
</div>
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
</head>
<body>
<div id="loading-box" onclick="heo.hideLoading()">
<div class="loading-bg"><img class="loading-img" src="https://img.zhheo.com/i/2022/08/31/630f01a3755aa.webp"></div>
</div>
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div id="sidebar">
<div id="menu-mask"></div>
<div id="sidebar-menus">
<div class="author-avatar"></div>
<div class="site-data">
<div class="data-item is-center">
<div class="data-item-link"><a href="../../archives/index.html">
<div class="headline">文章</div>
<div class="length-num">649</div>
</a></div>
</div>
<div class="data-item is-center">
<div class="data-item-link"><a href="../../tags/index.html">
<div class="headline">标签</div>
<div class="length-num">47</div>
</a></div>
</div>
<div class="data-item is-center">
<div class="data-item-link"><a href="../index.html">
<div class="headline">分类</div>
<div class="length-num">11</div>
</a></div>
</div>
</div>
<hr>
<div class="menus_items">
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>文库</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../archives/index.html"><i
class="fa-fw fa-duotone fa-list-timeline"></i> <span>文章列表</span></a></li>
<li><a class="site-page child" href="../index.html"><i class="fa-fw fa-duotone fa-list-tree"></i>
<span>全部分类</span></a></li>
<li><a class="site-page child" href="../../tags/index.html"><i class="fa-fw fa-duotone fa-tags"></i>
<span>全部标签</span></a></li>
<li><a class="site-page child" href="../../essay/index.html"><i
class="fa-fw fa-duotone fa-rectangles-mixed"></i> <span>即刻短文</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>专栏</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../tags/%E8%AE%BE%E8%AE%A1%E6%8A%A5%E5%91%8A/index.html"><i
class="fa-fw fa-duotone fa-swatchbook"></i> <span>设计报告</span></a></li>
<li><a class="site-page child" href="../../tags/Heocan/index.html"><i
class="fa-fw fa-duotone fa-pen-paintbrush"></i> <span>设计分享</span></a></li>
<li><a class="site-page child" href="../../tags/Sketch/index.html"><i
class="fa-fw fa-duotone fa-palette"></i> <span>设计工具</span></a></li>
<li><a class="site-page child" href="../../tags/%E6%B7%B7%E5%89%AA/index.html"><i
class="fa-fw fa-duotone fa-scissors"></i> <span>视频混剪</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>友链</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../moments/index.html"><i
class="fa-fw fa-duotone fa-fish-fins"></i> <span>友链鱼塘</span></a></li>
<li><a class="site-page child" href="../../link/index.html"><i
class="fa-fw fa-duotone fa-user-group"></i> <span>友情链接</span></a></li>
<li><a class="site-page child" href="javascript:travelling()" rel="external nofollow"><i
class="fa-fw fa-duotone fa-treasure-chest"></i> <span>宝藏博主</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>我的</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../tlink/index.html"><i
class="fa-fw fa-duotone fa-screwdriver-wrench"></i> <span>在线工具</span></a></li>
<li><a class="site-page child" href="../../movies/index.html"><i
class="fa-fw fa-duotone fa-film-simple"></i> <span>电影推荐</span></a></li>
<li><a class="site-page child" href="../../about/index.html"><i
class="fa-fw fa-duotone fa-face-awesome"></i> <span>关于本站</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout" id="content-inner">
<div id="category">
<div class="category-in-bar">
<div class="category-in-bar-tips">分类</div>
<div id="category-bar">
<div class="category-bar-items" id="category-bar-items">
<div class="category-bar-item select" id="category-bar-home">
<a href="/">首页</a>
</div>
<div class="category-bar-item"
th:each="categoryItem : ${categoryFinder.listAll()}"
th:id="${categoryItem.spec.displayName}">
<a th:href="${categoryItem.status.permalink}"
th:text="${categoryItem.spec.displayName}"></a>
</div>
</div>
<!-- 跳转到分类页 -->
<a class="category-bar-more" href="#">更多</a></div>
</div>
<div class="article-sort-title" th:text="${category.spec.displayName}"></div>
<div class="article-sort">
<!-- 按照年份分组 -->
<div class="article-sort-item year">等待halo提供数据</div>
<div class="article-sort-item" th:each="post : ${posts.items}">
<a class="article-sort-item-img" th:href="${post.status.permalink}"
th:title="${post.spec.title}">
<img th:alt="${post.spec.title}" th:src="${post.spec.cover}">
</a>
<div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
<time class="post-meta-date-created"
th:attr="datetime=${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="'创建于' + ${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</div>
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
th:href="${post.status.permalink}" th:text="${post.spec.title}"
th:title="${post.spec.title}"></a>
<div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:title="${tag.spec.displayName}"></th:block>
</a>
<span class="article-meta__link">•</span>
<!-- 跳转到分类页 -->
<a class="category-bar-more" href="#">更多</a></div>
</div>
<div class="article-sort-title" th:text="${category.spec.displayName}"></div>
<div class="article-sort">
<!-- 按照年份分组 -->
<div class="article-sort-item year">等待halo提供数据</div>
<div class="article-sort-item" th:each="post : ${posts.items}">
<a class="article-sort-item-img" th:href="${post.status.permalink}"
th:title="${post.spec.title}">
<img th:alt="${post.spec.title}" th:src="${post.spec.cover}">
</a>
<div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
<time class="post-meta-date-created"
th:attr="datetime=${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="'创建于' + ${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</div>
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
th:href="${post.status.permalink}" th:text="${post.spec.title}"
th:title="${post.spec.title}"></a>
<div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:title="${tag.spec.displayName}"></th:block>
</a>
<span class="article-meta__link">•</span>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<nav id="pagination">
<div class="pagination"><span class="page-number current">1</span></div>
</nav>
</div>
<!-- 分页 -->
<nav id="pagination">
<div class="pagination"><span class="page-number current">1</span></div>
</nav>
</div>
<div class="aside-content" id="aside-content">
<div class="aside-content" id="aside-content">
<div th:replace="modules/widgets/profile :: profile"></div>
<div th:replace="modules/widgets/profile :: profile"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/statistics :: statistics"></th:block>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/tags :: tags"></th:block>
</main>
<hr>
<th:block th:replace="modules/widgets/statistics :: statistics"></th:block>
</div>
</div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</div>
<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>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</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 class="js-pjax">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="../index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="../../tags/index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="../../cc/index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="../../cc/index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax"></div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
</th:block>
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo.zhheo.com',
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn2.tianli0.top/npm/twikoo@1.6.5/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print"
onload='this.media="all"' rel="stylesheet">
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && 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) {
pjax.loadUrl('/404.html')
}
})</script>
</div>
<div class="js-pjax">
<script>coverColor(), removeLoading(), addRightMenuClickEvent(), navTitle(), heo.topPostScroll(), heo.topCategoriesBarScroll(), heo.sayhi(), heo.addTag(), heo.stopImgRightDrag(), heo.addFriendLinksInFooter(), heo.qrcodeCreate(), heo.hidecookie(), heo.onlyHome(), heo.addNavBackgroundInit(), heo.initIndexEssay(), heo.changeTimeInEssay(), heo.reflashEssayWaterFall(), heo.addMediumInEssay(), heo.darkModeStatus(), heo.categoriesBarActive(), heo.initThemeColor()</script>
</div>
</body>
</html>

536
templates/index.html
View File

@ -1,521 +1,35 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<script th:src="@{/assets/js/heo.js}"></script>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<th:block th:fragment="content">
<!-- 右下角通知 -->
<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"
/>
<!-- 全局配置 -->
<script>var GLOBAL_CONFIG = {
root: "/",
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<!-- 站点配置 -->
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "张洪Heo",
isPost: !1,
isHome: !0,
isHighlightShrink: !1,
isToc: !1,
postUpdate: "2022-09-30 12:24:38"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
</head>
<body>
<!-- loading 页面 -->
<div id="loading-box" onclick="heo.hideLoading()">
<div class="loading-bg"><img class="loading-img" src="https://img.zhheo.com/i/2022/08/31/630f01a3755aa.webp"></div>
</div>
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div class="page" id="body-wrap">
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<div id="home_top">
<!-- 每日说说 -->
<div th:replace="modules/time-list :: time-list"></div>
<!-- 置顶内容 -->
<div th:replace="modules/recent-top :: recent-top"></div>
</div>
<main class="layout" id="content-inner">
<div class="recent-posts" id="recent-posts">
<!-- 分类导航栏 -->
<div th:replace="modules/category-bar :: category-bar"></div>
<th:block th:replace="modules/post-list :: post-list"></th:block>
<div class="page" id="body-wrap">
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<div id="home_top">
<!-- 每日说说 -->
<div th:replace="modules/time-list :: time-list"></div>
<!-- 置顶内容 -->
<div th:replace="modules/recent-top :: recent-top"></div>
</div>
<div th:replace="modules/aside :: aside"></div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</div>
<main class="layout" id="content-inner">
<div class="recent-posts" id="recent-posts">
<!--<div th:replace="module/rightside :: rightside"></div>-->
<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 th:replace="modules/category-bar :: category-bar"></div>
<th:block th:replace="modules/post-list :: post-list"></th:block>
</div>
<div th:replace="modules/aside :: aside"></div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</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 class="js-pjax">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="categories/index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="tags/index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="cc/index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="cc/index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script defer src="https://cdn.zhheo.com/public/algolia/algolia.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax"></div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo.zhheo.com',
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn2.tianli0.top/npm/twikoo@1.6.5/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// google analytics
typeof gtag === 'function' && gtag('config', '', {'page_path': 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) {
pjax.loadUrl('/404.html')
}
})</script>
</div>
<div class="js-pjax">
<script>
coverColor(),
removeLoading(),
addRightMenuClickEvent(),
navTitle(),
heo.topPostScroll(),
heo.topCategoriesBarScroll(),
heo.sayhi(),
heo.addTag(),
heo.stopImgRightDrag(),
heo.addFriendLinksInFooter(),
heo.qrcodeCreate(),
heo.hidecookie(),
heo.onlyHome(),
heo.addNavBackgroundInit(),
heo.initIndexEssay(),
heo.changeTimeInEssay(),
heo.reflashEssayWaterFall(),
heo.addMediumInEssay(),
heo.darkModeStatus(),
heo.categoriesBarActive(),
heo.initThemeColor()
</script>
</div>
</body>
</th:block>
</html>

194
templates/modules/head.html Normal file
View File

@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 公共的 head 部分，可以定义部分 links,scripts,styles -->
<head th:fragment="head(metas,links,scripts)">
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<script th:src="@{/assets/js/heo.js}"></script>
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<!-- 右下角通知 -->
<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"
/>
<!-- 全局配置 -->
<script>var GLOBAL_CONFIG = {
root: "/",
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<!-- 站点配置 -->
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "张洪Heo",
isPost: !1,
isHome: !0,
isHighlightShrink: !1,
isToc: !1,
postUpdate: "2022-09-30 12:24:38"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
<!-- 补充部分 -->
<th:block th:if="${metas != null}">
<th:block th:replace="${metas}"/>
</th:block>
<th:block th:if="${links != null}">
<th:block th:replace="${links}"/>
</th:block>
<th:block th:if="${scripts != null}">
<th:block th:replace="${scripts}"/>
</th:block>
</head>
</html>

222
templates/modules/layouts/layout.html
View File

@ -1,6 +1,224 @@
<!DOCTYPE html>
<!-- 文章布局模版 -->
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="layout(content)">
<!-- head 中自定义的 -->
<head th:replace="modules/head :: head(metas = null,links = null, scripts = null)"></head>
<body>
<!-- loading 页面 -->
<div th:replace="modules/loading-box :: loading-box"></div>
<!-- todo 还不知道干啥用的 -->
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<!-- 内容 -->
<th:block th:replace="${content}"></th:block>
<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/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script defer src="https://cdn.zhheo.com/public/algolia/algolia.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax"></div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script>
</div>
<div class="js-pjax">
<script>
coverColor(),
removeLoading(),
addRightMenuClickEvent(),
navTitle(),
heo.topPostScroll(),
heo.topCategoriesBarScroll(),
heo.sayhi(),
heo.addTag(),
heo.stopImgRightDrag(),
heo.addFriendLinksInFooter(),
heo.qrcodeCreate(),
heo.hidecookie(),
heo.onlyHome(),
heo.addNavBackgroundInit(),
heo.initIndexEssay(),
heo.changeTimeInEssay(),
heo.reflashEssayWaterFall(),
heo.addMediumInEssay(),
heo.darkModeStatus(),
heo.categoriesBarActive(),
heo.initThemeColor()
</script>
</div>
</body>
</html>

13
templates/modules/loading-box.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- loading 页面 -->
<div id="loading-box" onclick="heo.hideLoading()"
th:fragment="loading-box"
th:if="${theme.config.loading.switch} and not ${#strings.isEmpty(theme.config.loading.img)}">
<div class="loading-bg">
<img class="loading-img" th:src="${theme.config.loading.img}">
</div>
</div>
</html>

66
templates/modules/right-menu.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 右键菜单 -->
<div class="js-pjax" th:fragment="right-menu">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="categories/index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="tags/index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="cc/index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="cc/index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
</html>

531
templates/page.html
View File

@ -1,523 +1,24 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<script th:src="@{/assets/js/heo.js}"></script>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<th:block th:fragment="content">
<!-- 右下角通知 -->
<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"
/>
<script>var GLOBAL_CONFIG = {
root: "/",
algolia: {
appId: "29APOGIOTD",
apiKey: "49d70d2ba6e9c2a001a1c8737785d7ee",
indexName: "Heo",
hits: {per_page: 10},
languages: {
input_placeholder: "输入关键词快速查找",
hits_empty: "找不到你查询的内容：${query}",
hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
}
},
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "版权协议",
isPost: !1,
isHome: !1,
isHighlightShrink: !1,
isToc: !1,
postUpdate: "2020-07-22 22:06:17"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
<div class="page" id="body-wrap">
.justified-gallery img {
opacity: 1
}
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
</head>
<body>
<!-- loading 页面 -->
<div id="loading-box" onclick="heo.hideLoading()">
<div class="loading-bg"><img class="loading-img" src="https://img.zhheo.com/i/2022/08/31/630f01a3755aa.webp"></div>
</div>
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<div id="article-container" th:utext="${singlePage.content.content}"></div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</div>
<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>
<!-- 头部导航栏 -->
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout hide-aside" id="content-inner">
<div id="page">
<div id="article-container" th:utext="${singlePage.content.content}"></div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</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 id="algolia-search">
<div class="search-dialog">
<div class="search-dialog__title" id="algolia-search-title">搜索</div>
<div id="algolia-input-panel">
<div id="algolia-search-input"></div>
</div>
<div id="algolia-search-results">
<div id="algolia-hits"><a class="tag-list" href="../tags/%E7%83%AD%E9%97%A8/index.html">热门</a><a
class="tag-list" href="../tags/Hexo/index.html">Hexo</a><a class="tag-list"
href="../tags/Sketch/index.html">Sketch</a><a
class="tag-list" href="../tags/%E8%AE%BE%E8%AE%A1/index.html">设计</a><a class="tag-list"
href="../tags/%E6%95%99%E7%A8%8B/index.html">教程</a>
</div>
<div id="algolia-pagination"></div>
<div id="algolia-stats"></div>
</div>
<div id="algolia-tips"><i class="fa-brands fa-algolia"></i><span
class="algolia-tips-text">Algolia 提供搜索服务</span></div>
<span class="search-close-button"><i class="fas fa-times"></i></span></div>
<div id="search-mask"></div>
</div>
<div class="js-pjax">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="../categories/index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="../tags/index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script defer src="https://cdn.zhheo.com/public/algolia/algolia.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax"></div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
</th:block>
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
</html>
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo.zhheo.com',
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn2.tianli0.top/npm/twikoo@1.6.5/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print"
onload='this.media="all"' rel="stylesheet">
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && 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) {
pjax.loadUrl('/404.html')
}
})</script>
<script>!function () {
var d = document.createElement("script");
d.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?b6b512a6a0006dd6fcb565df2b0da0b748a4d749e4d1f2212c129ca4a479426dfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a", d.id = "ttzz";
var e = document.getElementsByTagName("script")[0];
e.parentNode.insertBefore(d, e)
}(window)</script>
<script async data-pjax src="../../busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</div>
<div class="js-pjax">
<script>coverColor(), removeLoading(), addRightMenuClickEvent(), navTitle(), heo.topPostScroll(), heo.topCategoriesBarScroll(), heo.sayhi(), heo.addTag(), heo.stopImgRightDrag(), heo.addFriendLinksInFooter(), heo.qrcodeCreate(), heo.hidecookie(), heo.onlyHome(), heo.addNavBackgroundInit(), heo.initIndexEssay(), heo.changeTimeInEssay(), heo.reflashEssayWaterFall(), heo.addMediumInEssay(), heo.darkModeStatus(), heo.categoriesBarActive(), heo.initThemeColor()</script>
</div>
</body>
</html>

896
templates/post.html
View File

@ -1,215 +1,20 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${post.spec.title} + ' | ' + ${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-main)" name="theme-color">
<script th:src="@{/assets/js/heo.js}"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script crossorigin="anonymous" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<th:block th:fragment="content">
<div class="post" id="body-wrap">
<header class="post-bg" id="page-header" th:style="'background-image:url(' + ${post.spec.cover} + ')'">
<nav th:replace="modules/nav :: nav"></nav>
<div class="coverdiv" id="coverdiv">
<img alt="cover" id="post-cover" th:src="${post.spec.cover}">
</div>
<!-- 右下角通知 -->
<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"
/>
<script>var GLOBAL_CONFIG = {
root: "/",
algolia: {
appId: "29APOGIOTD",
apiKey: "49d70d2ba6e9c2a001a1c8737785d7ee",
indexName: "Heo",
hits: {per_page: 10},
languages: {
input_placeholder: "输入关键词快速查找",
hits_empty: "找不到你查询的内容：${query}",
hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
}
},
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "在 illustrator（Ai）中去色、对图片进行简单调色",
isPost: !0,
isHome: !1,
isHighlightShrink: !1,
isToc: !0,
postUpdate: "2019-11-24 10:54:00"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
</head>
<body>
<!-- loading 页面 -->
<div id="loading-box" onclick="heo.hideLoading()">
<div class="loading-bg"><img class="loading-img" src="https://img.zhheo.com/i/2022/08/31/630f01a3755aa.webp"></div>
</div>
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div class="post" id="body-wrap">
<header class="post-bg" id="page-header" th:style="'background-image:url(' + ${post.spec.cover} + ')'">
<nav th:replace="modules/nav :: nav"></nav>
<div class="coverdiv" id="coverdiv">
<img alt="cover" id="post-cover" th:src="${post.spec.cover}">
</div>
<div id="post-info">
<div id="post-firstinfo">
<div class="meta-firstline">
<!-- 这里要跳转到版权页 -->
<a class="post-meta-original" th:href="@{/cc}" title="该文章为原创文章，注意版权协议">原创</a>
<span class="post-meta-categories">
<div id="post-info">
<div id="post-firstinfo">
<div class="meta-firstline">
<!-- 这里要跳转到版权页 -->
<a class="post-meta-original" th:href="@{/cc}" title="该文章为原创文章，注意版权协议">原创</a>
<span class="post-meta-categories">
<a class="post-meta-categories"
th:each="category : ${post.categories}"
th:href="${category.status.permalink}"
@ -217,553 +22,244 @@
th:title="${category.spec.displayName}">
</a>
</span>
<div class="tag_share">
<div class="post-meta__tag-list">
<a class="post-meta__tags"
th:each="tag : ${post.tags}"
th:href="${tag.status.permalink}"
th:text="'#'+${tag.spec.displayName}"
th:title="${tag.spec.displayName}"></a>
<div class="tag_share">
<div class="post-meta__tag-list">
<a class="post-meta__tags"
th:each="tag : ${post.tags}"
th:href="${tag.status.permalink}"
th:text="'#'+${tag.spec.displayName}"
th:title="${tag.spec.displayName}"></a>
</div>
</div>
</div>
</div>
</div>
<h1 class="post-title" th:text="${post.spec.title}"></h1>
<div id="post-meta">
<div class="meta-secondline">
<h1 class="post-title" th:text="${post.spec.title}"></h1>
<div id="post-meta">
<div class="meta-secondline">
<span class="post-meta-wordcount">
<i class="fas fa-file-word fa-fw post-meta-icon" title="字数"></i>
<span class="post-meta-label">字数:</span><span class="word-count">xxx</span>
<span class="post-meta-separator"></span>
<i class="fas fa-clock post-meta-icon" title="阅读耗时"></i>
<span class="post-meta-label">阅读耗时:</span><span>xxx 分钟</span></span>
<span class="post-meta-date"><i class="fa-fw post-meta-icon fas fa-calendar"></i>
<span class="post-meta-date"><i class="fa-fw post-meta-icon fas fa-calendar"></i>
<time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm:ss')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</span>
<span class="post-meta-wechat" title="该文章已在公众号中更新"><i
class="fab fa-weixin post-meta-icon"></i>公众号同步</span>
<span class="post-meta-position" title="作者IP属地为北京"><i
class="fas fa-location-dot post-meta-icon"></i>北京</span>
<span class="post-meta-pv" data-flag-title="热度"><i class="fab fa-hotjar fa-fw post-meta-icon"></i>
<span class="post-meta-wechat" title="该文章已在公众号中更新"><i
class="fab fa-weixin post-meta-icon"></i>公众号同步</span>
<span class="post-meta-position" title="作者IP属地为北京"><i
class="fas fa-location-dot post-meta-icon"></i>北京</span>
<span class="post-meta-pv" data-flag-title="热度"><i
class="fab fa-hotjar fa-fw post-meta-icon"></i>
<span class="post-meta-label">热度:</span>
<span id="busuanzi_value_page_pv"><div class="fa fa-spinner fa-spin"></div></span></span>
<span class="post-meta-commentcount" title="评论数"><i class="fa-solid fa-message"></i>
<span class="post-meta-commentcount" title="评论数"><i class="fa-solid fa-message"></i>
<span class="post-meta-label">评论:</span><a href="#post-comment">
<span id="twikoo-count"><i class="fa fa-spinner fa-spin"></i></span></a></span>
</div>
</div>
</div>
</div>
</header>
<main class="layout" id="content-inner">
<div id="post">
<!-- 文章内容 -->
<article class="post-content" id="article-container" th:utext="${post.content.content}"></article>
</header>
<main class="layout" id="content-inner">
<div id="post">
<!-- 文章内容 -->
<article class="post-content" id="article-container" th:utext="${post.content.content}"></article>
<div class="post-tools" id="post-tools">
<div class="post-tools-left">
<div class="post-tools" id="post-tools">
<div class="post-tools-left">
<!-- 打赏 -->
<!--<div class="post-reward" onclick="AddRewardMask()">-->
<!-- <div class="reward-button button&#45;&#45;animated" title="赞赏作者"><i class="fas fa-hamburger"></i>-->
<!-- 打赏作者-->
<!-- </div>-->
<!-- <div class="reward-main">-->
<!-- <ul class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span>-->
<!-- <ul class="reward-group">-->
<!-- <li class="reward-item"><a href="../img/wechat.png" target="_blank"><img-->
<!-- alt="微信" class="post-qr-code-img" data-lazy-src="/img/wechat.png"></a>-->
<!-- <div class="post-qr-code-desc">微信</div>-->
<!-- </li>-->
<!-- <li class="reward-item"><a href="../img/alipay.png" target="_blank"><img-->
<!-- alt="支付宝" class="post-qr-code-img" data-lazy-src="/img/alipay.png"></a>-->
<!-- <div class="post-qr-code-desc">支付宝</div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <a class="reward-main-btn" href="../about/index.html" target="_blank">-->
<!-- <div class="reward-text">赞赏者名单</div>-->
<!-- <div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>-->
<!-- </a></ul>-->
<!-- </div>-->
<!--</div>-->
<!-- 打赏 -->
<!--<div class="post-reward" onclick="AddRewardMask()">-->
<!-- <div class="reward-button button&#45;&#45;animated" title="赞赏作者"><i class="fas fa-hamburger"></i>-->
<!-- 打赏作者-->
<!-- </div>-->
<!-- <div class="reward-main">-->
<!-- <ul class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span>-->
<!-- <ul class="reward-group">-->
<!-- <li class="reward-item"><a href="../img/wechat.png" target="_blank"><img-->
<!-- alt="微信" class="post-qr-code-img" data-lazy-src="/img/wechat.png"></a>-->
<!-- <div class="post-qr-code-desc">微信</div>-->
<!-- </li>-->
<!-- <li class="reward-item"><a href="../img/alipay.png" target="_blank"><img-->
<!-- alt="支付宝" class="post-qr-code-img" data-lazy-src="/img/alipay.png"></a>-->
<!-- <div class="post-qr-code-desc">支付宝</div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <a class="reward-main-btn" href="../about/index.html" target="_blank">-->
<!-- <div class="reward-text">赞赏者名单</div>-->
<!-- <div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>-->
<!-- </a></ul>-->
<!-- </div>-->
<!--</div>-->
<!-- 说明 -->
<!--<div class="reward-link mode"><a class="reward-link-button" href="../wechat/index.html">-->
<!-- <i class="fas fa-seedling"></i>运营模式与责任</a>-->
<!--</div>-->
<!-- 说明 -->
<!--<div class="reward-link mode"><a class="reward-link-button" href="../wechat/index.html">-->
<!-- <i class="fas fa-seedling"></i>运营模式与责任</a>-->
<!--</div>-->
<!-- 分享 -->
<div class="share-link mobile">
<div class="share-qrcode">
<div class="share-button" title="使用手机访问这篇文章"><i class="fas fa-qrcode"></i></div>
<div class="share-main">
<div class="share-main-all">
<div id="qrcode"></div>
<div class="reward-dec">使用手机访问这篇文章</div>
<!-- 分享 -->
<div class="share-link mobile">
<div class="share-qrcode">
<div class="share-button" title="使用手机访问这篇文章"><i class="fas fa-qrcode"></i>
</div>
<div class="share-main">
<div class="share-main-all">
<div id="qrcode"></div>
<div class="reward-dec">使用手机访问这篇文章</div>
</div>
</div>
</div>
</div>
<div class="share-link weibo">
<a class="share-button"
rel="noopener external nofollow noreferrer noopener"
target="_blank"
th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}"
title="分享到微博">
<i class="fab fa-weibo" style="font-size:22px"></i></a></div>
<div class="share-link copyurl">
<div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
class="fas fa-link"></i></div>
</div>
</div>
<div class="share-link weibo">
<a class="share-button"
rel="noopener external nofollow noreferrer noopener"
target="_blank"
th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}"
title="分享到微博">
<i class="fab fa-weibo" style="font-size:22px"></i></a></div>
<div class="share-link copyurl">
<div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
class="fas fa-link"></i></div>
</div>
</div>
<div class="post-tools-right">
<div class="tag_share">
<div class="post-meta__tag-list">
<a class="post-meta__tags" th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:text="${tag.spec.displayName}"
th:title="${tag.spec.displayName}"></th:block>
<span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
</a>
<div class="post-tools-right">
<div class="tag_share">
<div class="post-meta__tag-list">
<a class="post-meta__tags" th:each="tag : ${post.tags}"
th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:text="${tag.spec.displayName}"
th:title="${tag.spec.displayName}"></th:block>
<span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 版权声明 -->
<div class="post-copyright">
<div class="post-copyright__author">
<!-- 版权页 以及版权描述文字 -->
<a class="post-copyright__original" th:href="@{/cc}"
title="该文章为原创文章，注意版权协议">原创</a>
<a class="post-copyright-title" href="#"><span th:text="${post.spec.title}"></span></a>
</div>
<div class="post-copyright__type">
<!-- 版权声明 -->
<div class="post-copyright">
<div class="post-copyright__author">
<!-- 版权页 以及版权描述文字 -->
<a class="post-copyright__original" th:href="@{/cc}"
title="该文章为原创文章，注意版权协议">原创</a>
<a class="post-copyright-title" href="#"><span th:text="${post.spec.title}"></span></a>
</div>
<div class="post-copyright__type">
<span class="post-copyright-info" id="post-copyright-url">
<a href="javascript:window.location.href;">
text
</a>
</span>
<button class="post-copyright-copybtn" onclick="rm.copyPageUrl()">
<i class="fas fa-paste copy-btn"></i>
</button>
</div>
<div class="post-copyright__notice">
<button class="post-copyright-copybtn" onclick="rm.copyPageUrl()">
<i class="fas fa-paste copy-btn"></i>
</button>
</div>
<div class="post-copyright__notice">
<span class="post-copyright-info">
本文是原创文章，采用 <a target="_blank" th:href="@{/cc}">CC BY-NC-ND 4.0</a> 协议，完整转载请注明来自 <a
href="/" target="_blank" th:text="${site.title}"></a>
</span>
</div>
</div>
</div>
<nav class="pagination-post" id="pagination">
<div class="prev-post pull-left">
<a href="#">
<div class="pagination-info">
<div class="label">上一篇</div>
<div class="prev_info">上一篇文章的标题</div>
</div>
</a>
</div>
<div class="next-post pull-right">
<a href="#">
<div class="pagination-info">
<div class="label">下一篇</div>
<div class="next_info">下一篇文章的标题</div>
</div>
</a>
</div>
</nav>
<div class="relatedPosts">
<div class="headline"><i class="fas fa-robot fa-fw"></i> <span>阅读建议</span></div>
<div class="relatedPosts-list">
<!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
<div>
<a href="#" title="相关推荐文章">
<img alt="cover" class="cover"
src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF">
<div class="content is-center">
<div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-05-28</div>
<div class="title">这是一篇相关推荐文章</div>
<nav class="pagination-post" id="pagination">
<div class="prev-post pull-left">
<a href="#">
<div class="pagination-info">
<div class="label">上一篇</div>
<div class="prev_info">上一篇文章的标题</div>
</div>
</a>
</div>
</div>
</div>
<hr>
<!-- 评论模块，使用评论插件 -->
<div id="post-comment">
<div class="comment-head">
<div class="comment-headline"><i class="fas fa-message fa-fw"></i> <span>评论</span></div>
<div class="comment-privacy"><a href="../privacy/index.html">隐私政策</a></div>
<div class="comment-tips" id="comment-tips"><span>你无需删除空行，直接评论以获取最佳展示效果</span>
<div class="next-post pull-right">
<a href="#">
<div class="pagination-info">
<div class="label">下一篇</div>
<div class="next_info">下一篇文章的标题</div>
</div>
</a>
</div>
</div>
<halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}"/>
</div>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>var clipboard = new ClipboardJS(".copybtn")</script>
</div>
<!-- 侧栏 -->
<div class="aside-content" id="aside-content">
<!-- 个人信息卡片 -->
<div th:replace="modules/widgets/profile :: profile"></div>
<div class="sticky_layout">
<!-- 目录 -->
<div th:replace="modules/widgets/toc :: toc"></div>
<!--<div class="card-widget" id="card-toc">-->
<!-- <div class="item-headline"><i class="fas fa-bars"></i><span>文章目录</span></div>-->
<!-- <div class="toc-content">-->
<!-- <ol class="toc">-->
<!-- <li class="toc-item toc-level-2">-->
<!-- <a class="toc-link" href="#"><span class="toc-text">通过转换为灰度来进行去色</span></a>-->
<!-- </li>-->
<!-- </ol>-->
<!-- </div>-->
<!--</div>-->
<!-- 微信卡片 -->
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</nav>
<div class="relatedPosts">
<div class="headline"><i class="fas fa-robot fa-fw"></i> <span>阅读建议</span></div>
<div class="relatedPosts-list">
<!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
<div>
<a href="#" title="相关推荐文章">
<img alt="cover" class="cover"
src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF">
<div class="content is-center">
<div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-05-28</div>
<div class="title">这是一篇相关推荐文章</div>
</div>
</a>
</div>
</div>
</div>
<!-- 近期文章 -->
<div th:replace="modules/widgets/recent-posts :: recent-posts"></div>
<hr>
<!-- 评论模块，使用评论插件 -->
<div id="post-comment">
<div class="comment-head">
<div class="comment-headline"><i class="fas fa-message fa-fw"></i> <span>评论</span></div>
<div class="comment-privacy"><a href="../privacy/index.html">隐私政策</a></div>
<div class="comment-tips" id="comment-tips">
<span>你无需删除空行，直接评论以获取最佳展示效果</span>
</div>
</div>
<halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}"/>
</div>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>var clipboard = new ClipboardJS(".copybtn")</script>
</div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
<!-- 侧栏 -->
</div>
<div class="aside-content" id="aside-content">
<!-- 个人信息卡片 -->
<div th:replace="modules/widgets/profile :: profile"></div>
<div class="sticky_layout">
<!-- 目录 -->
<div th:replace="modules/widgets/toc :: toc"></div>
<!--<div class="card-widget" id="card-toc">-->
<!-- <div class="item-headline"><i class="fas fa-bars"></i><span>文章目录</span></div>-->
<!-- <div class="toc-content">-->
<!-- <ol class="toc">-->
<!-- <li class="toc-item toc-level-2">-->
<!-- <a class="toc-link" href="#"><span class="toc-text">通过转换为灰度来进行去色</span></a>-->
<!-- </li>-->
<!-- </ol>-->
<!-- </div>-->
<!--</div>-->
<!-- 微信卡片 -->
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>
<!-- 近期文章 -->
<div th:replace="modules/widgets/recent-posts :: recent-posts"></div>
</div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
<!-- 右键菜单 -->
<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 class="close" id="mobile-toc-button" title="目录" type="button"><i class="fas fa-list-ul"></i></button>
<a href="#post-comment" id="to_comment" title="直达评论"><i class="fas fa-comments"></i></a>
<button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
</div>
</div>
<div class="js-pjax">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="../categories/index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="../tags/index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="../cc/index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="../cc/index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script defer src="https://cdn.zhheo.com/public/algolia/algolia.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax">
<script>(() => {
const init = () => {
twikoo.init(Object.assign({
el: '#twikoo-wrap',
envId: 'https://twikoo.zhheo.com',
region: '',
onCommentLoaded: function () {
//- btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
}
}, null))
}
const getCount = () => {
twikoo.getCommentsCount({
envId: 'https://twikoo.zhheo.com',
region: '',
urls: [window.location.pathname],
includeReply: true
}).then(function (res) {
document.getElementById('twikoo-count').innerText = res[0].count
}).catch(function (err) {
console.error(err);
});
}
</th:block>
const runFn = () => {
init()
GLOBAL_CONFIG_SITE.isPost && getCount()
}
</html>
const loadTwikoo = () => {
if (typeof twikoo === 'object') {
setTimeout(runFn, 0)
return
}
getScript('https://cdn2.tianli0.top/npm/twikoo@1.6.5/dist/twikoo.all.min.js').then(runFn)
}
if ('Twikoo' === 'Twikoo' || !false) {
if (false) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
else loadTwikoo()
} else {
window.loadOtherComment = () => {
loadTwikoo()
}
}
})()</script>
</div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print"
onload='this.media="all"' rel="stylesheet">
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script>
</div>
<div class="js-pjax">
<script>coverColor(),
removeLoading(),
addRightMenuClickEvent(),
navTitle(),
heo.topPostScroll(),
heo.topCategoriesBarScroll(),
heo.sayhi(),
heo.addTag(),
heo.stopImgRightDrag(),
heo.addFriendLinksInFooter(),
heo.qrcodeCreate(),
heo.hidecookie(),
heo.onlyHome(),
heo.addNavBackgroundInit(),
heo.initIndexEssay(),
heo.changeTimeInEssay(),
heo.reflashEssayWaterFall(),
heo.addMediumInEssay(),
heo.darkModeStatus(),
heo.categoriesBarActive(),
heo.initThemeColor()
</script>
</div>
<!-- 代码高亮highlight.js -->
<script>hljs.highlightAll();</script>
</body>
</html>

687
templates/tag.html
View File

@ -1,644 +1,85 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title th:text="${site.title}"></title>
<meta content="telephone=no" name="format-detection">
<meta content="var(--heo-card-bg)" name="theme-color">
<link rel="stylesheet" th:href="@{/assets/zhheo/zhheoblog.css}">
<!-- fontawesome-pro https://github.com/duyplus/fontawesome-pro -->
<link href="https://cdn.jsdelivr.net/gh/duyplus/fontawesome-pro/css/all.min.css"
media="print"
onload='this.media="all"'
rel="stylesheet"
/>
<html lang="en" th:replace="modules/layouts/layout :: layout(~{::content})" xmlns:th="http://www.thymeleaf.org">
<!-- 右下角通知 -->
<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"
/>
<script>var GLOBAL_CONFIG = {
root: "/",
algolia: {
appId: "29APOGIOTD",
apiKey: "49d70d2ba6e9c2a001a1c8737785d7ee",
indexName: "Heo",
hits: {per_page: 10},
languages: {
input_placeholder: "输入关键词快速查找",
hits_empty: "找不到你查询的内容：${query}",
hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
}
},
localSearch: void 0,
translate: {defaultEncoding: 2, translateDelay: 0, msgToTraditionalChinese: "简", msgToSimplifiedChinese: "繁"},
noticeOutdate: void 0,
highlight: {plugin: "highlighjs", highlightCopy: !0, highlightLang: !0, highlightHeightLimit: 400},
copy: {success: "复制成功", error: "复制错误", noSupport: "浏览器不支持"},
relativeDate: {homepage: !0, post: !1},
runtime: "天",
date_suffix: {just: "刚刚", min: "分钟前", hour: "小时前", day: "天前", month: "个月前"},
copyright: void 0,
lightbox: "fancybox",
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center"
},
source: {
jQuery: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js",
justifiedGallery: {
js: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js",
css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.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"
}
},
isPhotoFigcaption: !0,
islazyload: !0,
isanchor: !1
}</script>
<script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: "标签: 日常",
isPost: !1,
isHome: !1,
isHighlightShrink: !1,
isToc: !1,
postUpdate: "2022-09-30 12:24:38"
}</script>
<noscript>
<style>#nav {
opacity: 1
}
<th:block th:fragment="content">
.justified-gallery img {
opacity: 1
}
#post-meta time, #recent-posts time {
display: inline !important
}</style>
</noscript>
<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.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()
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 src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<link href="https://at.alicdn.com/t/font_1891866_47sukspu18q.css" rel="stylesheet">
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/zhheo/commentBarrage.css}">
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"></script>
</head>
<body>
<div id="loading-box" onclick="heo.hideLoading()">
<div class="loading-bg"><img class="loading-img" src="../../../img.zhheo.com/i/2022/08/31/630f01a3755aa.webp"></div>
</div>
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div id="sidebar">
<div id="menu-mask"></div>
<div id="sidebar-menus">
<div class="author-avatar"></div>
<div class="site-data">
<div class="data-item is-center">
<div class="data-item-link"><a href="../../archives/index.html">
<div class="headline">文章</div>
<div class="length-num">649</div>
</a></div>
</div>
<div class="data-item is-center">
<div class="data-item-link"><a href="../index.html">
<div class="headline">标签</div>
<div class="length-num">47</div>
</a></div>
</div>
<div class="data-item is-center">
<div class="data-item-link"><a href="../../categories/index.html">
<div class="headline">分类</div>
<div class="length-num">11</div>
</a></div>
</div>
</div>
<hr>
<div class="menus_items">
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>文库</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../archives/index.html"><i
class="fa-fw fa-duotone fa-list-timeline"></i> <span>文章列表</span></a></li>
<li><a class="site-page child" href="../../categories/index.html"><i
class="fa-fw fa-duotone fa-list-tree"></i> <span>全部分类</span></a></li>
<li><a class="site-page child" href="../index.html"><i class="fa-fw fa-duotone fa-tags"></i> <span>全部标签</span></a>
</li>
<li><a class="site-page child" href="../../essay/index.html"><i
class="fa-fw fa-duotone fa-rectangles-mixed"></i> <span>即刻短文</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>专栏</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../%E8%AE%BE%E8%AE%A1%E6%8A%A5%E5%91%8A/index.html"><i
class="fa-fw fa-duotone fa-swatchbook"></i> <span>设计报告</span></a></li>
<li><a class="site-page child" href="../Heocan/index.html"><i
class="fa-fw fa-duotone fa-pen-paintbrush"></i> <span>设计分享</span></a></li>
<li><a class="site-page child" href="../Sketch/index.html"><i
class="fa-fw fa-duotone fa-palette"></i> <span>设计工具</span></a></li>
<li><a class="site-page child" href="../%E6%B7%B7%E5%89%AA/index.html"><i
class="fa-fw fa-duotone fa-scissors"></i> <span>视频混剪</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>友链</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../moments/index.html"><i
class="fa-fw fa-duotone fa-fish-fins"></i> <span>友链鱼塘</span></a></li>
<li><a class="site-page child" href="../../link/index.html"><i
class="fa-fw fa-duotone fa-user-group"></i> <span>友情链接</span></a></li>
<li><a class="site-page child" href="javascript:travelling()" rel="external nofollow"><i
class="fa-fw fa-duotone fa-treasure-chest"></i> <span>宝藏博主</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);"
rel="external nofollow"><span>我的</span><i
class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="../../tlink/index.html"><i
class="fa-fw fa-duotone fa-screwdriver-wrench"></i> <span>在线工具</span></a></li>
<li><a class="site-page child" href="../../movies/index.html"><i
class="fa-fw fa-duotone fa-film-simple"></i> <span>电影推荐</span></a></li>
<li><a class="site-page child" href="../../about/index.html"><i
class="fa-fw fa-duotone fa-face-awesome"></i> <span>关于本站</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout" id="content-inner">
<div id="tag">
<div id="tag-page-tags" th:with="tags = ${tagFinder.listAll()}">
<a style="font-size:1em;color:#3c228c"
th:each="tag : ${tags}"
th:href="${tag.status.permalink}"
th:id="${tag.spec.displayName}">
<span class="tags-punctuation">#</span> [[${tag.spec.displayName}]]
<span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
</a>
</div>
<div class="article-sort-title" th:text="${tag.spec.displayName}"></div>
<div class="article-sort" th:with="postItems=${posts.items}">
<!--<div class="article-sort-item year">2022</div>-->
<div class="article-sort-item" th:each="post : ${postItems}">
<a class="article-sort-item-img" th:href="${post.status.permalink}" th:title="${post.spec.title}">
<img th:alt="${post.status.excerpt}" th:src="@{${post.spec.cover}}">
<div class="page" id="body-wrap">
<header class="not-top-img" id="page-header">
<nav th:replace="modules/nav :: nav"></nav>
</header>
<main class="layout" id="content-inner">
<div id="tag">
<div id="tag-page-tags" th:with="tags = ${tagFinder.listAll()}">
<a style="font-size:1em;color:#3c228c"
th:each="tag : ${tags}"
th:href="${tag.status.permalink}"
th:id="${tag.spec.displayName}">
<span class="tags-punctuation">#</span> [[${tag.spec.displayName}]]
<span class="tagsPageCount" th:text="${tag.status.postCount}"></span>
</a>
<div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
<time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
</time>
</div>
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
th:href="${post.status.permalink}"
th:text="${post.status.excerpt}" th:title="${post.status.excerpt}">
</div>
<div class="article-sort-title" th:text="${tag.spec.displayName}"></div>
<div class="article-sort" th:with="postItems=${posts.items}">
<!--<div class="article-sort-item year">2022</div>-->
<div class="article-sort-item" th:each="post : ${postItems}">
<a class="article-sort-item-img" th:href="${post.status.permalink}"
th:title="${post.spec.title}">
<img th:alt="${post.status.excerpt}" th:src="@{${post.spec.cover}}">
</a>
<div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:title="${tag.spec.displayName}"></th:block>
<div class="article-sort-item-info">
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
<time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
</time>
</div>
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
th:href="${post.status.permalink}"
th:text="${post.status.excerpt}" th:title="${post.status.excerpt}">
</a>
<span class="article-meta__link">•</span>
<div class="article-sort-item-tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="${tag.status.permalink}">
<span class="tags-punctuation">#</span>
<th:block th:title="${tag.spec.displayName}"></th:block>
</a>
<span class="article-meta__link">•</span>
</div>
</div>
</div>
</div>
<nav id="pagination">
<div class="pagination"><span class="page-number current">1</span></div>
</nav>
</div>
<nav id="pagination">
<div class="pagination"><span class="page-number current">1</span></div>
</nav>
</div>
<div class="aside-content" id="aside-content">
<div class="aside-content" id="aside-content">
<div th:replace="modules/widgets/profile :: profile"></div>
<div th:replace="modules/widgets/profile :: profile"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
<div class="card-widget heo-right-widget" id="card-wechat" onclick='window.open("/wechat/")'>
<div id="flip-wrapper">
<div id="flip-content">
<div class="face"></div>
<div class="back face"></div>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/tags :: tags"></th:block>
<hr>
<th:block th:replace="modules/widgets/statistics :: statistics"></th:block>
</div>
</div>
</div>
<div class="sticky_layout">
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<th:block th:replace="modules/widgets/tags :: tags"></th:block>
</main>
<hr>
<th:block th:replace="modules/widgets/statistics :: statistics"></th:block>
</div>
</div>
</div>
</main>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</div>
<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>
<!-- 底部 -->
<footer th:replace="modules/footer :: footer"></footer>
</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 class="js-pjax">
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div>
<div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div>
<div class="rightMenu-item" id="menu-top"><i class="fa-solid fa-arrow-up"></i></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuPlugin">
<div class="rightMenu-item" id="menu-copytext"><i class="fa-duotone fa-copy"></i><span>复制选中文本</span>
</div>
<div class="rightMenu-item" id="menu-pastetext"><i class="fa-duotone fa-paste"></i><span>粘贴文本</span>
</div>
<a class="rightMenu-item" id="menu-commenttext"><i
class="fa-duotone fa-comment-medical"></i><span>引用到评论</span></a>
<div class="rightMenu-item" id="menu-newwindow"><i
class="fa-duotone fa-window-restore"></i><span>新窗口打开</span></div>
<div class="rightMenu-item" id="menu-copylink"><i
class="fa-duotone fa-link-horizontal"></i><span>复制链接地址</span></div>
<div class="rightMenu-item" id="menu-copyimg"><i class="fa-duotone fa-images"></i><span>复制此图片</span>
</div>
<div class="rightMenu-item" id="menu-downloadimg"><i
class="fa-duotone fa-download"></i><span>下载此图片</span></div>
<div class="rightMenu-item" id="menu-search"><i
class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div>
<div class="rightMenu-item" id="menu-searchBaidu"><i
class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div>
<div class="rightMenu-item" id="menu-music-toggle"><i class="fas fa-play"></i><span>播放音乐</span></div>
<div class="rightMenu-item" id="menu-music-back"><i
class="fa-duotone fa-backward"></i><span>切换到上一首</span></div>
<div class="rightMenu-item" id="menu-music-forward"><i
class="fa-duotone fa-forward"></i><span>切换到下一首</span></div>
<div class="rightMenu-item" id="menu-music-playlist"
onclick='window.open("https://music.163.com/#/playlist?app_version=8.8.36&amp;id=5197802668","_blank")'>
<i class="fa-duotone fa-list-music"></i><span>查看所有歌曲</span></div>
<div class="rightMenu-item" id="menu-music-copyMusicName"><i class="fa-duotone fa-copy"></i>
<span>复制歌名</span></div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link"
id="menu-randomPost"><i
class="fa-duotone fa-dice"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link"
href="../../categories/index.html"><i
class="fa-duotone fa-list-tree"></i><span>博客分类</span></a><a class="rightMenu-item menu-link"
href="../index.html"><i
class="fa-duotone fa-tags"></i><span>文章标签</span></a></div>
<div class="rightMenu-group rightMenu-line"><a class="rightMenu-item menu-link" href="../../cc/index.html"><i
class="fa-solid fa-hand"></i><span>隐私协议</span></a><a class="rightMenu-item menu-link"
href="../../cc/index.html"><i
class="fa-solid fa-closed-captioning"></i><span>版权协议</span></a></div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<div class="rightMenu-item" id="menu-copy"><i
class="fa-duotone fa-link-horizontal"></i><span>复制地址</span></div>
<div class="rightMenu-item" id="menu-commentBarrage"><i class="fa-solid fa-message-captions"></i><span
class="menu-commentBarrage-text">关闭热评</span></div>
<div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span
class="menu-darkmode-text">显示模式</span></div>
<div class="rightMenu-item" id="menu-translate"><i class="fa-duotone fa-language"></i><span>轉為繁體</span>
</div>
</div>
</div>
<div id="rightmenu-mask"></div>
</div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<script src="https://cdn.zhheo.com/JS-Heo/translate/tw_cn.js"></script>
<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>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script>var preloader = {
endLoading: () => {
//- document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
//- document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load', preloader.endLoading())
setTimeout(function () {
preloader.endLoading();
}, 3000)</script>
<div class="js-pjax"></div>
<script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
</th:block>
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo.zhheo.com',
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.id,
'date': new Date(e.created).toISOString()
}
})
saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn2.tianli0.top/npm/twikoo@1.6.5/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<script th:src="@{/assets/zhheo/random.js}"></script>
<script data-pjax th:src="@{/zhheo/commentBarrage.js}"></script>
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print"
onload='this.media="all"' rel="stylesheet">
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<script src="https://cdn.zhheo.com/public/pjax/pjax.min.js"></script>
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
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.islazyload && 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) {
pjax.loadUrl('/404.html')
}
})</script>
<script>!function () {
var d = document.createElement("script");
d.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?b6b512a6a0006dd6fcb565df2b0da0b748a4d749e4d1f2212c129ca4a479426dfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a", d.id = "ttzz";
var e = document.getElementsByTagName("script")[0];
e.parentNode.insertBefore(d, e)
}(window)</script>
<script async data-pjax src="../../../busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</div>
<div class="js-pjax">
<script>coverColor(), removeLoading(), addRightMenuClickEvent(), navTitle(), heo.topPostScroll(), heo.topCategoriesBarScroll(), heo.sayhi(), heo.addTag(), heo.stopImgRightDrag(), heo.addFriendLinksInFooter(), heo.qrcodeCreate(), heo.hidecookie(), heo.onlyHome(), heo.addNavBackgroundInit(), heo.initIndexEssay(), heo.changeTimeInEssay(), heo.reflashEssayWaterFall(), heo.addMediumInEssay(), heo.darkModeStatus(), heo.categoriesBarActive(), heo.initThemeColor()</script>
</div>
</body>
</html>