769 lines
37 KiB
HTML
769 lines
37 KiB
HTML
<!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>
|
||
|
||
<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: "/",
|
||
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">
|
||
<a class="post-meta-categories"
|
||
th:each="category : ${post.categories}"
|
||
th:href="${category.status.permalink}"
|
||
th:text="${category.spec.displayName}"
|
||
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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<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-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-label">评论:</span><a href="#post-comment">
|
||
<span id="twikoo-count"><i class="fa fa-spinner fa-spin"></i></span></a></span>
|
||
</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>
|
||
|
||
|
||
<div class="post-tools" id="post-tools">
|
||
<div class="post-tools-left">
|
||
|
||
<!-- 打赏 -->
|
||
<!--<div class="post-reward" onclick="AddRewardMask()">-->
|
||
<!-- <div class="reward-button button--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="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="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 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">
|
||
<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>
|
||
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 近期文章 -->
|
||
<div th:replace="modules/widgets/recent-posts :: recent-posts"></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>
|
||
</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&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);
|
||
});
|
||
}
|
||
|
||
const runFn = () => {
|
||
init()
|
||
GLOBAL_CONFIG_SITE.isPost && getCount()
|
||
}
|
||
|
||
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> |