bug: 代码行号可控制,代码一直开启,无法控制

This commit is contained in:
shy 2022-10-18 14:46:18 +08:00
parent 70bd06dd75
commit 963bd9ca46
6 changed files with 16278 additions and 847 deletions

View File

@ -160,6 +160,15 @@ spec:
value: true
- label: 关闭
value: false
- $formkit: radio
name: enable_code_lineNumber
label: 代码块显示行号
value: true
options:
- label: 开启
value: true
- label: 关闭
value: false
- $formkit: select
name: switch_highlight
label: 代码块高亮工具

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -149,59 +149,4 @@ pre[class*="language-"].line-numbers > code {
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: 0.8em;
padding: 0 0.5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
color: inherit;
text-decoration: none;
}

View File

@ -30,3 +30,58 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
background: unset;
color: unset;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: 0.8em;
padding: 0 0.5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
color: inherit;
text-decoration: none;
}

View File

@ -3,8 +3,13 @@
<!-- head 中自定义的 -->
<head th:replace="modules/head :: head(metas = null,links = null, scripts = null)"></head>
<th:block th:if="${theme.config.content.enable_code_lineNumber}">
<link rel="stylesheet" th:href="@{/assets/libs/prism/template/plugin-line-numbers.css}"/>
</th:block>
<link rel="stylesheet" th:href="@{/assets/libs/prism/template/plugin-toolbar.css}"/>
<script th:src="@{/assets/libs/prism.js}"></script>
<body>
<body class="line-numbers">
<!-- loading 页面 -->
<div th:replace="modules/loading-box :: loading-box"></div>
@ -20,242 +25,238 @@
<!-- todo 暂时不知道用处 -->
<div id="rightside">
<div id="rightside-config-hide">
<button id="translateLink" title="简繁转换" type="button"></button>
<button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
<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">
</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>
<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>
<link rel="stylesheet" src="../../assets/libs/prism/template/plugin-line-numbers.css"/>
<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>
<!-- 繁简翻译 js -->
<!-- 改成可配置 -->
<script th:src="@{/assets/translate/tw_cn.js}"></script>
<!-- 繁简翻译 js -->
<!-- 改成可配置 -->
<script th:src="@{/assets/translate/tw_cn.js}"></script>
<!-- https://instant.page/ 网站预加载, 放在 </body> 之前 -->
<script th:src="@{/assets/instantpage/instantpage.min.js}" type="module"></script>
<!-- https://instant.page/ 网站预加载, 放在 </body> 之前 -->
<script th:src="@{/assets/instantpage/instantpage.min.js}" type="module"></script>
<!-- https://www.andreaverlicchi.eu/vanilla-lazyload/ 懒加载-->
<!-- todo 图片懒加载,并且可自定义懒加载图片 -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
<!-- https://www.andreaverlicchi.eu/vanilla-lazyload/ 懒加载-->
<!-- todo 图片懒加载,并且可自定义懒加载图片 -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
<!-- 右下角通知 https://www.polonel.com/snackbar/ -->
<!-- todo head 中有它的 css应该可以写一块并改成后台可配置的功能代码中应该还有他的 js -->
<!-- 右下角通知 https://www.polonel.com/snackbar/ -->
<!-- todo head 中有它的 css应该可以写一块并改成后台可配置的功能代码中应该还有他的 js -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<script>
<!-- todo 暂时不知道用处 -->
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>
<script>
<!-- todo 暂时不知道用处 -->
<div class="js-pjax"></div>
<script>
// todo 暂时不知道用处
// 看着像评论模块,如果是的话,则可以删除掉了,评论使用评论插件
window.addEventListener('load', () => {
const changeContent = (content) => {
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>
<!-- todo 暂时不知道用处 -->
<div class="js-pjax"></div>
<script>
// todo 暂时不知道用处
// 看着像评论模块,如果是的话,则可以删除掉了,评论使用评论插件
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
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
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>`
}
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'>
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 += '没有评论'
}
}
} 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)
}
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()
}
}
}
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>
<!-- line-numbers可以显示行号后面的css是为了自动换行的-->
<script type="text/javascript">
document.getElementsByTagName("pre").addClass("line-numbers").css("white-space", "pre-wrap");
</script>
<!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
<!-- 应该是文章页分享使用 -->
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})
</script>
<!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
<!-- 应该是文章页分享使用 -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- todo -->
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<!-- todo -->
<script data-pjax=""
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
<!-- todo 不知道是否可以抽到 right-menu.html 中,做到后台可配置 -->
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<!-- todo 不知道是否可以抽到 right-menu.html 中,做到后台可配置 -->
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
<script src="https://cdn.zhheo.com/public/waterfall/waterfall.min.js"></script>
<!-- 无障碍功能 https://github.com/duheng/assist 无用就可以删除了 -->
<!-- 无障碍功能 https://github.com/duheng/assist 无用就可以删除了 -->
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<script src="https://cdn.zhheo.com/public/assist/assist-entry.min.js"></script>
<!-- 音乐播放器,应该还有相关 js 可以一并移除,或者抽出公共模块,最好是使用 halo2.0 插件 -->
<script src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>
<!-- 音乐播放器,应该还有相关 js 可以一并移除,或者抽出公共模块,最好是使用 halo2.0 插件 -->
<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 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'
]
<!-- 不知道干啥的 -->
<script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'.js-pjax'
]
if (false) {
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()
}
}
}
var pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
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)
})
document.addEventListener('pjax:send', function () {
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
// removeEventListener toc scroll
window.removeEventListener('scroll', window.tocScrollFn)
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
typeof preloader === 'object' && preloader.initLoading()
typeof preloader === 'object' && preloader.endLoading()
})
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()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script>
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>
<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>