困困鱼
GitHub
commit
02008d34df
245
settings.yaml
245
settings.yaml
|
|
@ -1724,6 +1724,251 @@ spec:
|
|||
label: 全局字体
|
||||
placeholder: '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"'
|
||||
|
||||
- group: code
|
||||
label: 代码块
|
||||
formSchema:
|
||||
- $formkit: radio
|
||||
name: enable
|
||||
id: enable
|
||||
key: enable
|
||||
label: 启用代码块
|
||||
help: 如果安装代码块插件，可关闭此功能
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_title
|
||||
if: $get(enable).value
|
||||
label: 启用代码标题
|
||||
help: 启用代码块的标题，默认显示语言类型，也可自定义标题
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_hr
|
||||
if: $get(enable).value
|
||||
label: 启用代码标题分割线
|
||||
help: 启用代码标题和内容之间的分割线，不展示时会更加简洁
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_line
|
||||
if: $get(enable).value
|
||||
label: 启用代码行号
|
||||
help: 启用代码块行号功能
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_copy
|
||||
if: $get(enable).value
|
||||
label: 启用代码复制
|
||||
help: 启用代码块复制按钮
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_expander
|
||||
if: $get(enable).value
|
||||
label: 启用代码折叠
|
||||
help: 启用代码折叠功能
|
||||
value: true
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: radio
|
||||
name: enable_height_limit
|
||||
id: enable_height_limit
|
||||
key: enable_height_limit
|
||||
if: $get(enable).value
|
||||
label: 启用代码高度限制
|
||||
help: 启用代码高度限制功能
|
||||
value: false
|
||||
options:
|
||||
- label: 启用
|
||||
value: true
|
||||
- label: 禁用
|
||||
value: false
|
||||
- $formkit: number
|
||||
name: height_limit
|
||||
if: $get(enable_height_limit).value
|
||||
value: 300
|
||||
label: 代码高度限制
|
||||
- $formkit: select
|
||||
name: theme_light
|
||||
if: $get(enable).value
|
||||
label: 代码块主题（浅色）随着系统主题变化
|
||||
value: one-light
|
||||
options:
|
||||
- value: "one-dark"
|
||||
label: "one-dark"
|
||||
- value: "one-light"
|
||||
label: "one-light"
|
||||
- value: "a11y-dark"
|
||||
label: "a11y-dark"
|
||||
- value: "atom-dark"
|
||||
label: "atom-dark"
|
||||
- value: "base16-ateliersulphurpool.light"
|
||||
label: "base16-ateliersulphurpool.light"
|
||||
- value: "cb"
|
||||
label: "cb"
|
||||
- value: "coldark-cold"
|
||||
label: "coldark-cold"
|
||||
- value: "coldark-dark"
|
||||
label: "coldark-dark"
|
||||
- value: "coy-without-shadows"
|
||||
label: "coy-without-shadows"
|
||||
- value: "darcula"
|
||||
label: "darcula"
|
||||
- value: "dracula"
|
||||
label: "dracula"
|
||||
- value: "duotone-dark"
|
||||
label: "duotone-dark"
|
||||
- value: "duotone-earth"
|
||||
label: "duotone-earth"
|
||||
- value: "duotone-forest"
|
||||
label: "duotone-forest"
|
||||
- value: "duotone-light"
|
||||
label: "duotone-light"
|
||||
- value: "duotone-sea"
|
||||
label: "duotone-sea"
|
||||
- value: "duotone-space"
|
||||
label: "duotone-space"
|
||||
- value: "ghcolors"
|
||||
label: "ghcolors"
|
||||
- value: "gruvbox-dark"
|
||||
label: "gruvbox-dark"
|
||||
- value: "gruvbox-light"
|
||||
label: "gruvbox-light"
|
||||
- value: "holi-theme"
|
||||
label: "holi-theme"
|
||||
- value: "hopscotch"
|
||||
label: "hopscotch"
|
||||
- value: "lucario"
|
||||
label: "lucario"
|
||||
- value: "material-dark"
|
||||
label: "material-dark"
|
||||
- value: "material-light"
|
||||
label: "material-light"
|
||||
- value: "material-oceanic"
|
||||
label: "material-oceanic"
|
||||
- value: "night-owl"
|
||||
label: "night-owl"
|
||||
- value: "nord"
|
||||
label: "nord"
|
||||
- value: "pojoaque"
|
||||
label: "pojoaque"
|
||||
- value: "shades-of-purple"
|
||||
label: "shades-of-purple"
|
||||
- value: "solarized-dark-atom"
|
||||
label: "solarized-dark-atom"
|
||||
- value: "synthwave84"
|
||||
label: "synthwave84"
|
||||
- value: "vs"
|
||||
label: "vs"
|
||||
- value: "vsc-dark-plus"
|
||||
label: "vsc-dark-plus"
|
||||
- value: "xonokai"
|
||||
label: "xonokai"
|
||||
- value: "z-touch"
|
||||
label: "z-touch"
|
||||
- $formkit: select
|
||||
name: theme_dark
|
||||
if: $get(enable).value
|
||||
label: 代码块主题（深色）随着系统主题变化
|
||||
value: one-dark
|
||||
options:
|
||||
- value: "one-dark"
|
||||
label: "one-dark"
|
||||
- value: "one-light"
|
||||
label: "one-light"
|
||||
- value: "a11y-dark"
|
||||
label: "a11y-dark"
|
||||
- value: "atom-dark"
|
||||
label: "atom-dark"
|
||||
- value: "base16-ateliersulphurpool.light"
|
||||
label: "base16-ateliersulphurpool.light"
|
||||
- value: "cb"
|
||||
label: "cb"
|
||||
- value: "coldark-cold"
|
||||
label: "coldark-cold"
|
||||
- value: "coldark-dark"
|
||||
label: "coldark-dark"
|
||||
- value: "coy-without-shadows"
|
||||
label: "coy-without-shadows"
|
||||
- value: "darcula"
|
||||
label: "darcula"
|
||||
- value: "dracula"
|
||||
label: "dracula"
|
||||
- value: "duotone-dark"
|
||||
label: "duotone-dark"
|
||||
- value: "duotone-earth"
|
||||
label: "duotone-earth"
|
||||
- value: "duotone-forest"
|
||||
label: "duotone-forest"
|
||||
- value: "duotone-light"
|
||||
label: "duotone-light"
|
||||
- value: "duotone-sea"
|
||||
label: "duotone-sea"
|
||||
- value: "duotone-space"
|
||||
label: "duotone-space"
|
||||
- value: "ghcolors"
|
||||
label: "ghcolors"
|
||||
- value: "gruvbox-dark"
|
||||
label: "gruvbox-dark"
|
||||
- value: "gruvbox-light"
|
||||
label: "gruvbox-light"
|
||||
- value: "holi-theme"
|
||||
label: "holi-theme"
|
||||
- value: "hopscotch"
|
||||
label: "hopscotch"
|
||||
- value: "lucario"
|
||||
label: "lucario"
|
||||
- value: "material-dark"
|
||||
label: "material-dark"
|
||||
- value: "material-light"
|
||||
label: "material-light"
|
||||
- value: "material-oceanic"
|
||||
label: "material-oceanic"
|
||||
- value: "night-owl"
|
||||
label: "night-owl"
|
||||
- value: "nord"
|
||||
label: "nord"
|
||||
- value: "pojoaque"
|
||||
label: "pojoaque"
|
||||
- value: "shades-of-purple"
|
||||
label: "shades-of-purple"
|
||||
- value: "solarized-dark-atom"
|
||||
label: "solarized-dark-atom"
|
||||
- value: "synthwave84"
|
||||
label: "synthwave84"
|
||||
- value: "vs"
|
||||
label: "vs"
|
||||
- value: "vsc-dark-plus"
|
||||
label: "vsc-dark-plus"
|
||||
- value: "xonokai"
|
||||
label: "xonokai"
|
||||
- value: "z-touch"
|
||||
label: "z-touch"
|
||||
|
||||
- group: tool
|
||||
label: 小部件
|
||||
formSchema:
|
||||
|
|
|
|||
|
|
@ -5,8 +5,257 @@ let halo = {
|
|||
if(commentDOMclass.contains('light'))
|
||||
commentDOMclass.replace('light','dark')
|
||||
else
|
||||
commentDOMclass.replace('dark','light')
|
||||
commentDOMclass.replace('dark','light')
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
dataCodeTheme : ()=>{
|
||||
|
||||
var t = document.documentElement.getAttribute('data-theme')
|
||||
var e = document.querySelector("link[data-code-theme=light]"),
|
||||
o = document.querySelector("link[data-code-theme=dark]");
|
||||
(o || e) && ("light" === t ? (o.disabled = !0, e.disabled = !1) : (e.disabled = !0, o.disabled = !1))
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 代码
|
||||
* 只适用于halo的代码渲染
|
||||
*/
|
||||
addPrismTool : ()=>{
|
||||
if (typeof Prism === 'undefined' || typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Prism.plugins.toolbar) {
|
||||
console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const enable = GLOBAL_CONFIG.prism.enable;
|
||||
if (!enable) return;
|
||||
const isEnableTitle = GLOBAL_CONFIG.prism.enable_title;
|
||||
const isEnableHr = GLOBAL_CONFIG.prism.enable_hr;
|
||||
const isEnableLine = GLOBAL_CONFIG.prism.enable_line;
|
||||
const isEnableCopy = GLOBAL_CONFIG.prism.enable_copy;
|
||||
const isEnableExpander = GLOBAL_CONFIG.prism.enable_expander;
|
||||
const prismLimit = GLOBAL_CONFIG.prism.prism_limit;
|
||||
const isEnableHeightLimit = GLOBAL_CONFIG.prism.enable_height_limit;
|
||||
|
||||
// https://stackoverflow.com/a/30810322/7595472
|
||||
|
||||
/** @param {CopyInfo} copyInfo */
|
||||
function fallbackCopyTextToClipboard(copyInfo) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.value = copyInfo.getText();
|
||||
|
||||
// Avoid scrolling to bottom
|
||||
textArea.style.top = '0';
|
||||
textArea.style.left = '0';
|
||||
textArea.style.position = 'fixed';
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
var successful = document.execCommand('copy');
|
||||
setTimeout(function () {
|
||||
if (successful) {
|
||||
copyInfo.success();
|
||||
} else {
|
||||
copyInfo.error();
|
||||
}
|
||||
}, 1);
|
||||
} catch (err) {
|
||||
setTimeout(function () {
|
||||
copyInfo.error(err);
|
||||
}, 1);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
/** @param {CopyInfo} copyInfo */
|
||||
function copyTextToClipboard(copyInfo) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(copyInfo.getText()).then(copyInfo.success, function () {
|
||||
// try the fallback in case `writeText` didn't work
|
||||
fallbackCopyTextToClipboard(copyInfo);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyTextToClipboard(copyInfo);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects the text content of the given element.
|
||||
*
|
||||
* @param {Element} element
|
||||
*/
|
||||
function selectElementText(element) {
|
||||
// https://stackoverflow.com/a/20079910/7595472
|
||||
window.getSelection().selectAllChildren(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* Traverses up the DOM tree to find data attributes that override the default plugin settings.
|
||||
*
|
||||
* @param {Element} startElement An element to start from.
|
||||
* @returns {Settings} The plugin settings.
|
||||
* @typedef {Record<"copy" | "copy-error" | "copy-success" | "copy-timeout", string | number>} Settings
|
||||
*/
|
||||
function getSettings(startElement) {
|
||||
/** @type {Settings} */
|
||||
var settings = {
|
||||
'copy': 'Copy',
|
||||
'copy-error': 'Press Ctrl+C to copy',
|
||||
'copy-success': 'Copied!',
|
||||
'copy-timeout': 5000
|
||||
};
|
||||
|
||||
var prefix = 'data-prismjs-';
|
||||
for (var key in settings) {
|
||||
var attr = prefix + key;
|
||||
var element = startElement;
|
||||
while (element && !element.hasAttribute(attr)) {
|
||||
element = element.parentElement;
|
||||
}
|
||||
if (element) {
|
||||
settings[key] = element.getAttribute(attr);
|
||||
}
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var r = Prism.plugins.toolbar.hook = function (a) {
|
||||
|
||||
|
||||
var r = a.element.parentNode;
|
||||
var toolbar = r.nextElementSibling;
|
||||
|
||||
//标题
|
||||
isEnableTitle && toolbar.classList.add("c-title")
|
||||
//标题分割线
|
||||
isEnableHr && toolbar.classList.add("c-hr")
|
||||
var customItem = document.createElement("div");
|
||||
customItem.className = 'custom-item absolute top-0'
|
||||
|
||||
//复制
|
||||
if(isEnableCopy){
|
||||
var copy = document.createElement("i");
|
||||
|
||||
copy.className = 'haofont hao-icon-paste copy-button code-copy cursor-pointer'
|
||||
customItem.appendChild(copy)
|
||||
|
||||
copy.addEventListener('click', function () {
|
||||
copyTextToClipboard({
|
||||
getText: function () {
|
||||
return a.element.textContent;
|
||||
},
|
||||
success: function () {
|
||||
btf.snackbarShow('复制成功')
|
||||
setState('copy-success');
|
||||
resetText();
|
||||
},
|
||||
error: function () {
|
||||
setState('copy-error');
|
||||
|
||||
setTimeout(function () {
|
||||
selectElementText(a.element);
|
||||
}, 1);
|
||||
|
||||
resetText();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const prismToolsFn = function (e) {
|
||||
const $target = e.target.classList;
|
||||
if ($target.contains("code-expander")) prismShrinkFn(this);
|
||||
};
|
||||
|
||||
//折叠
|
||||
if(isEnableExpander){
|
||||
var expander = document.createElement("i");
|
||||
expander.className = 'fa-sharp fa-solid fa-caret-down code-expander cursor-pointer'
|
||||
customItem.appendChild(expander)
|
||||
|
||||
expander.addEventListener('click', prismToolsFn)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
const expandCode = function () {
|
||||
this.classList.toggle("expand-done");
|
||||
this.style.display = "none";
|
||||
r.classList.toggle("expand-done");
|
||||
};
|
||||
|
||||
if (isEnableHeightLimit && r.offsetHeight > prismLimit) {
|
||||
|
||||
r.classList.add("close")
|
||||
const ele = document.createElement("div");
|
||||
ele.className = "code-expand-btn";
|
||||
ele.innerHTML = '<i class="haofont hao-icon-angle-double-down"></i>';
|
||||
ele.addEventListener("click", expandCode);
|
||||
r.offsetParent.appendChild(ele);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const prismShrinkFn = ele => {
|
||||
const $nextEle = r.offsetParent.lastElementChild.classList
|
||||
toolbar.classList.toggle('c-expander')
|
||||
r.classList.toggle("expand-done-expander");
|
||||
if (toolbar.classList.contains('c-expander')) {
|
||||
r.firstElementChild.style.display = "none";
|
||||
if($nextEle.contains('code-expand-btn')){
|
||||
r.offsetParent.lastElementChild.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
r.firstElementChild.style.display = "block";
|
||||
if($nextEle.contains('code-expand-btn') && !r.classList.contains('expand-done')){
|
||||
r.offsetParent.lastElementChild.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
toolbar.appendChild(customItem)
|
||||
|
||||
var settings = getSettings(a.element);
|
||||
|
||||
|
||||
function resetText() {
|
||||
setTimeout(function () {
|
||||
setState('copy');
|
||||
}, settings['copy-timeout']);
|
||||
}
|
||||
|
||||
/** @param {"copy" | "copy-error" | "copy-success"} state */
|
||||
function setState(state) {
|
||||
copy.setAttribute('data-copy-state', state);
|
||||
}
|
||||
|
||||
};
|
||||
Prism.hooks.add("complete", r)
|
||||
}
|
||||
}
|
||||
|
|
@ -473,6 +473,7 @@ var heo = {
|
|||
? saveToLocal.set('aside-status', 'show', 2)
|
||||
: saveToLocal.set('aside-status', 'hide', 2)
|
||||
$htmlDom.toggle('hide-aside')
|
||||
$htmlDom.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
|
||||
},
|
||||
|
||||
changeSayHelloText: function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,293 @@
|
|||
/*代码块*/
|
||||
[data-theme=light] {
|
||||
--rl-code-bar-shadow: 0 5px 10px 0 rgba(144, 164, 174, 0.4);
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
--rl-code-bar-shadow: 0 0 6px 2px #272727;
|
||||
}
|
||||
|
||||
|
||||
#article-container .code-toolbar {
|
||||
margin: 18px 0;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: var(--rl-code-bar-shadow);
|
||||
box-shadow: var(--rl-code-bar-shadow);
|
||||
border-radius: 7px
|
||||
}
|
||||
|
||||
#article-container .code-toolbar:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 12px;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fc625d;
|
||||
-webkit-box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b;
|
||||
box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: unset;
|
||||
height: 35px;
|
||||
line-height: 32px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar-item:first-child {
|
||||
display: none
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar-item:first-child span {
|
||||
background-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar .custom-item {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 1rem;
|
||||
right: 12px;
|
||||
color: #999;
|
||||
pointer-events: all
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar .custom-item>i {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: -webkit-transform .2s;
|
||||
transition: transform .2s;
|
||||
transition: transform .2s,-webkit-transform .2s
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar .custom-item>i:hover {
|
||||
-webkit-filter: brightness(1.2);
|
||||
filter: brightness(1.2)
|
||||
}
|
||||
|
||||
#article-container .toolbar .copy-button:hover,
|
||||
#article-container .toolbar .code-expander:hover{
|
||||
color: var(--heo-main);
|
||||
}
|
||||
|
||||
|
||||
#article-container .code-toolbar .toolbar.c-expander i.code-expander {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
|
||||
|
||||
#article-container .code-toolbar .toolbar.c-title .toolbar-item:first-child {
|
||||
display: block
|
||||
}
|
||||
|
||||
#article-container .code-toolbar .toolbar.c-hr {
|
||||
border-bottom: 1px solid #b2a8a84d
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 35px 0 0;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-shadow: none;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] .line-numbers-rows {
|
||||
border-right: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-top: 12px;
|
||||
width: 2.7em;
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] code[class*=language-] {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
overflow-x: auto;
|
||||
padding: 5px 18px 10px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
text-shadow: none
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] code[class*=language-]::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] code[class*=language-] .style .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.entity,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.operator,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.url {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-].line-numbers code[class*=language-] {
|
||||
padding: 10px 20px 10px 48px;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre[class*=language-] code[class*=language-].c-toggle{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 代码展开图标 */
|
||||
#article-container .code-expand-btn {
|
||||
transition: 0.3s;
|
||||
backdrop-filter: saturate(180%) blur(500px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: var(--global-font-size);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#article-container .code-expand-btn:hover i {
|
||||
color: var(--heo-white);
|
||||
}
|
||||
|
||||
#article-container .code-expand-btn i {
|
||||
color: var(--hlnumber-color);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
#article-container .code-expand-btn.expand-done {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#article-container pre{
|
||||
border:0px;
|
||||
}
|
||||
|
||||
#article-container .code-expand-btn:hover {
|
||||
background: var(--heo-main);
|
||||
}
|
||||
|
||||
#article-container .code-expand-btn:hover i {
|
||||
color: var(--heo-white);
|
||||
}
|
||||
|
||||
#article-container .code-toolbar pre.close.expand-done{
|
||||
height: 100%;
|
||||
}
|
||||
#article-container .code-toolbar pre.close.expand-done-expander{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes code-expand-key {
|
||||
0% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
filter: alpha(opacity=10)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes code-expand-key {
|
||||
0% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
filter: alpha(opacity=10)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes code-expand-key {
|
||||
0% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
filter: alpha(opacity=10)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes code-expand-key {
|
||||
0% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
filter: alpha(opacity=10)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .6;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60)
|
||||
}
|
||||
}
|
||||
|
||||
/*代码块*/
|
||||
|
|
@ -52,3 +52,6 @@ ul li {
|
|||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -205,6 +205,12 @@ rm.switchDarkMode = function () {
|
|||
navFn.switchDarkMode();
|
||||
rm.hideRightMenu();
|
||||
heo.darkModeStatus();
|
||||
//代码块
|
||||
if(GLOBAL_CONFIG.prism.enable){
|
||||
halo.dataCodeTheme();
|
||||
}
|
||||
|
||||
|
||||
//halo.darkComment();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1195,7 +1195,7 @@ blockquote footer cite::before {
|
|||
|
||||
/* 代码块增加边框 */
|
||||
#article-container pre {
|
||||
border: var(--style-border-always);
|
||||
/*border: var(--style-border-always);*/
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -12075,26 +12075,26 @@ blockquote p {
|
|||
/*}*/
|
||||
|
||||
/* 代码展开图标 */
|
||||
#article-container .code-expand-btn i {
|
||||
color: var(--heo-fontcolor);
|
||||
font-size: 1rem;
|
||||
}
|
||||
/*#article-container .code-expand-btn i {*/
|
||||
/* color: var(--heo-fontcolor);*/
|
||||
/* font-size: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
#article-container .code-expand-btn {
|
||||
background-color: var(--heo-mask);
|
||||
background: var(--heo-secondbg);
|
||||
transition: 0.3s;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
/*#article-container .code-expand-btn {*/
|
||||
/* background-color: var(--heo-mask);*/
|
||||
/* background: var(--heo-secondbg);*/
|
||||
/* transition: 0.3s;*/
|
||||
/* backdrop-filter: saturate(180%) blur(20px);*/
|
||||
/* -webkit-backdrop-filter: blur(20px);*/
|
||||
/*}*/
|
||||
|
||||
#article-container .code-expand-btn:hover {
|
||||
background: var(--heo-main);
|
||||
}
|
||||
/*#article-container .code-expand-btn:hover {*/
|
||||
/* background: var(--heo-main);*/
|
||||
/*}*/
|
||||
|
||||
#article-container .code-expand-btn:hover i {
|
||||
color: var(--heo-white);
|
||||
}
|
||||
/*#article-container .code-expand-btn:hover i {*/
|
||||
/* color: var(--heo-white);*/
|
||||
/*}*/
|
||||
|
||||
/* 结尾寄语 */
|
||||
#readmore-talk {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<th:block th:fragment="prism-code">
|
||||
<th:block th:if="${theme.config.code.enable}">
|
||||
<link rel="preload" as="style" onload="this.rel='stylesheet'"
|
||||
th:href="${assets_link+'/libs/prism/prism.min.css'}">
|
||||
<link rel="preload" as="style" onload="this.rel='stylesheet'"
|
||||
th:href="${assets_link+'/libs/prism/code.css'}">
|
||||
<link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="light"
|
||||
th:href="${assets_link+ '/libs/prism/themes/prism-'+theme.config.code.theme_light+'.css'}">
|
||||
<link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="dark"
|
||||
th:href="${assets_link+'/libs/prism/themes/prism-'+theme.config.code.theme_dark+'.css'}">
|
||||
<script data-pjax type="text/javascript" th:src="${assets_link+'/libs/prism/prism.min.js'}"></script>
|
||||
|
||||
<style>
|
||||
|
||||
#article-container .code-toolbar pre.close{
|
||||
overflow: hidden;
|
||||
height: [[${theme.config.code.height_limit}]]px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</th:block>
|
||||
</th:block>
|
||||
</html>
|
||||
|
|
@ -42,6 +42,8 @@
|
|||
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.0/css/all.min.css" media="all" onload="this.media='all'">
|
||||
|
||||
|
||||
<!-- 代码块-->
|
||||
<th:block th:replace="~{macro/prism-code :: prism-code}"/>
|
||||
|
||||
<script th:if="${theme.config.footer.footerContent.footerStyle == 'one'}" async="async">(function () {
|
||||
var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
|
||||
|
|
@ -283,6 +285,16 @@
|
|||
bgDark: "#121212",
|
||||
position: "top-center",
|
||||
},
|
||||
prism: {
|
||||
enable: [[${ theme.config.code.enable }]],
|
||||
enable_title: [[${ theme.config.code.enable_title }]],
|
||||
enable_hr: [[${ theme.config.code.enable_hr }]],
|
||||
enable_line: [[${ theme.config.code.enable_line }]],
|
||||
enable_copy: [[${ theme.config.code.enable_copy }]],
|
||||
enable_expander: [[${ theme.config.code.enable_expander }]],
|
||||
prism_limit: Number([[${#strings.isEmpty(theme.config.code.height_limit) ? 300 : theme.config.code.height_limit}]])+30,
|
||||
enable_height_limit: [[${theme.config.code.enable_height_limit}]]
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -360,6 +360,14 @@
|
|||
heo.changeMusicBg(false);
|
||||
}
|
||||
|
||||
//代码块
|
||||
if(GLOBAL_CONFIG.prism.enable){
|
||||
halo.addPrismTool()
|
||||
halo.dataCodeTheme()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" rel="noopener nofollow"
|
||||
target="_blank">51la网站统计</a></div>
|
||||
<div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')"
|
||||
data-pjax-state=""><i class="haofont hao-icon-arrow-circle-right"></i><span
|
||||
data-pjax-state=""><i class="haofont hao-icon-circle-arrow-up-right-1"></i><span
|
||||
class="banner-button-text">文章隧道</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
<div id="article-container" th:utext="${singlePage.content.content}"></div>
|
||||
<div id="article-container" th:utext="${singlePage.content.content}"></div>
|
||||
<hr>
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<article class="post-content line-numbers" id="article-container" th:utext="${post.content.content}">
|
||||
<article th:class="'post-content '+${ theme.config.code.enable_line ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
|
||||
</article>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue