启用
配置名
配置值
备注
创建日期
{ "TEST" : "测试值" }
JSON格式注意要用英文半角双引号 ""。
若无双引号或用中文双引号 “” 会错误
多行配置,用于批量导入json格式的配置。V4.4.3 后支持
Jan 30, 2025 04:11 PM
启用
https://notion.kuhehe.top
上线后的站点网址,必填!
请务必在
blog.config.js中或者环境变量中配置,以确保配置在项目编译时生效。
Jan 30, 2025 04:11 PM
启用
[
"https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css",
"https://fonts.googleapis.com/css?family=Bitter&display=swap",
"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap",
"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap"
]
WEB_FONT 字体,在4.4.4版本中支持在NOTION_CONFIG设置。
Jan 30, 2025 04:11 PM
启用
* {
font-family:serif,Menlo,Monaco,Consolas,system-ui,"Courier New","LXGW WenKai",monospace,sans-serif;
}
html { scroll-behavior: smooth; height: 100%; /* 启用硬件加速惯性滚动(重点) */ -webkit-overflow-scrolling: touch;}
#announcement-wrapper *{
text-align: left!important;
}
.notion-collection-header {
display: none;
}
.notion-gallery-grid-size-small { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));grid-column-gap: 2px;}
.notion-collection-view-tabs-content-item-active { background-color: rgba(33, 150, 243, 0.3) !important; box-shadow: 0 0 15px rgba(33, 150, 243, 0.5) !important; border-radius: 5px;}
[class="notion-orange_background"] { border-radius: 2px;}
[class="notion-blue_background"] { border-radius: 2px;}
[class="notion-red_background"],.notion-h.notion-red_background { border-radius: 2px;}
[class="notion-teal_background"] { border-radius: 2px;}
[class="notion-yellow_background"] { border-radius: 2px;}
[class="notion-purple_background"] { border-radius: 2px;}
[class="notion-pink_background"] { border-radius: 2px;}
[class="notion-brown_background"] { border-radius: 2px;}
[class="notion-gray_background"] { border-radius: 2px;}
.notion blockquote { font-size: .8rem;line-height: 1.5;}
.notion-orange_background_co, .notion-quote.notion-orange_background,.notion-orange_background { color: rgba(250, 100, 0, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-red_background , .notion-red_background{ color: rgba(255, 60, 60, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-blue_background,.notion-blue_background { color: rgba(33, 150, 243, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-teal_background,.notion-teal_background { color: rgba(61, 197, 80, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-purple_background,.notion-purple_background { color: rgba(191, 90, 242, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-yellow_background,.notion-yellow_background { color: rgba(255, 176, 0, 1) !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1); /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-gray_background,.notion-gray_background { color: rgba(160, 150, 150, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-brown_background,.notion-brown_background { color: rgba(165, 110, 80, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-quote.notion-pink_background,.notion-pink_background { color: rgba(255, 80, 172, 1) !important; /* 浅色模式为白,深色模式需反转逻辑 */}
.notion-gallery { margin: 0 2px; padding:0;}
.notion-gallery a { margin: 0 2px!important; }
.notion { font-size: 0.8rem;}
.notion-page-title-text::-webkit-scrollbar { display: none;}
.notion-page-title-text { overflow-x: auto; white-space: nowrap; text-overflow: initial; /* overflow-wrap: break-word; */ }
.notion-property.notion-property-text {
overflow-x: auto;
white-space: nowrap;
text-overflow: initial;
}
.notion-property.notion-property-text::-webkit-scrollbar { display: none;}
a.notion-page-link {border-radius: 5px !important; /* 圆角大小 */}
a.notion-page-link:hover {
border-radius: 5px !important; /* 圆角大小 */}
:root {
--notion-red_background: rgba(244, 67, 54, 0.2);
--notion-blue_background: rgba(33, 150, 243, 0.2);
--notion-orange_background: rgba(250, 100, 0, 0.2);
--notion-yellow_background: rgba(255, 221, 0, 0.2); /* 柠檬黄荧光 */
--notion-teal_background: rgba(61, 197, 80, 0.2);
--notion-pink_background: rgba(244, 223, 235, 0.4);
--notion-gray_background: rgba(230, 230, 230, 0.15); /* 中灰荧光 */
--notion-brown_background: rgba(165, 110, 80, 0.2); /* 深驼色荧光 */
--notion-purple_background: rgba(191, 90, 242, 0.2); /* 电子紫荧光 */
--notion-pink_background: rgba(255, 80, 172, 0.2); /* 电子紫荧光 */
--notion-default_background: rgba(0, 0, 0, 0);
--notion-red_background_co: rgba(255, 60, 60, 0.2); /* 亮红色荧光 */
--notion-pink_background_co: rgba(255, 80, 172, 0.2); /* 霓虹粉荧光 */
--notion-blue_background_co: rgba(33, 150, 243, 0.2); /* 深天蓝荧光 */
--notion-purple_background_co: rgba(191, 90, 242, 0.2); /* 电子紫荧光 */
--notion-teal_background_co: rgba(61, 197, 80, 0.2); /* 氰色荧光 */
--notion-yellow_background_co: rgba(255, 221, 0, 0.2); /* 柠檬黄荧光 */
--notion-orange_background_co: rgba(255, 140, 0, 0.2); /* 警示橙荧光 */
--notion-brown_background_co: rgba(165, 110, 80, 0.2); /* 深驼色荧光 */
--notion-gray_background_co: rgba(240, 240, 240, 0.15); /* 中灰荧光 */
--notion-green_background_co: rgba(50, 215, 75, 0.2); /* 荧光绿 */
}
/* 荧光红-文字 */
.notion-red_background_co { color: rgba(255, 60, 60, 1) !important; border: 1px solid rgba(255, 60, 60, 0.5);}
/* 霓虹粉-文字 */
.notion-pink_background_co { color: rgba(255, 80, 172, 1) !important; border: 1px solid rgba(255, 80, 172, 0.6);}
/* 深空蓝-文字 */
.notion-blue_background_co { color: rgba(33, 150, 243, 1) !important; border: 1px solid rgba(33, 150, 243, 0.5);}
/* 电子紫-文字 */
.notion-purple_background_co { color: rgba(191, 90, 242, 1) !important; border: 1px solid rgba(191, 90, 242, 0.5);}
/* 氰色荧光-文字 */
.notion-teal_background_co { color: rgba(61, 197, 80, 1) !important; border: 1px solid rgba(61, 197, 80, 0.5);}
.notion-yellow_background_co { color: rgba(255, 176, 0, 1) !important; /* 琥珀金色 */ text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 176, 0, 0.5);/* 浅色模式增强轮廓 */}
/* 警示橙-文字 */
.notion-orange_background_co { rgba(250, 100, 0, 1) !important; border: 1px solid rgba(250, 100, 0, 0.5)}
/* 深驼色-文字 */
.notion-brown_background_co { color: rgba(165, 110, 80, 1) !important; border: 1px solid rgba(165, 110, 80, 1);}
/* 中灰荧光-文字 */
.notion-gray_background_co { color: rgba(165, 110, 80, 1) !important; border: 1px solid rgba(165, 110, 80, 0.5);}
/* 荧光绿-文字 */
.notion-green_background_co { color: rgba(50, 215, 75, 1) !important;border: 1px solid rgba(50, 215, 75, 0.5);}
.notion-text { border-radius: 6px !important; overflow: hidden; /* 防止子元素溢出圆角 */ }
/* 橙色背景特化样式 */
.notion-text.notion-orange_background {color: rgba(255, 100, 0, 1); background: rgba(255, 140, 0, 0.2) !important; /* 保持原有透明度 */ border: 1px solid rgba(255, 140, 0, 0.15); /* 可选边框增强立体感 */}
.notion-text.notion-teal_background {color: rgba(61, 197, 80, 1); background: rgba(61, 197, 80, 0.2) !important; /* 保持原有透明度 */ border: 1px solid rgba(61, 197, 80, 0.15); /* 可选边框增强立体感 */}
.notion-text.notion-blue_background {color: rgba(33, 150, 243, 1); background: rgba(33, 150, 243, 0.2) !important; /* 保持原有透明度 */ border: 1px solid rgba(33, 150, 243, 0.15); /* 可选边框增强立体感 */}
.notion-text.notion-red_background {color: rgba(255, 60, 60, 1); background: rgba(255, 60, 60, 0.2) !important; /* 保持原有透明度 */ border: 1px solid rgba(255, 60, 60, 0.15); /* 可选边框增强立体感 */}
/* 核心圆角样式 */
.notion-callout { border-radius: 10px !important; overflow: hidden !important; position: relative !important;}
/* 核心圆角容器 */.notion-bookmark { border-radius: 8px !important; overflow: hidden !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.notion b { background: linear-gradient(0, rgba(255, 255, 0, 0.6), rgba(255, 255, 0, 0.4)) no-repeat center bottom / 100% 40%;font-weight: bold;}
.notion a:not(.notion-page-link):not(.notion-collection-card):not(.notion-hash-link) { box-shadow: inset 0 -0.07em 0 rgba(33, 150, 243, 1); color: rgba(33, 150, 243, 1); transition: box-shadow 0.3s ease;}
.notion a:not(.notion-page-link):not(.notion-collection-card):not(.notion-hash-link):hover {box-shadow: inset 0 -1.5em 0 rgba(33, 150, 243, 0.2); color: rgba(33, 150, 243, 1);border-radius: 4px;}
.notion-toggle { margin: 1px 0; position: relative;}
.notion-toggle > summary { list-style: none; cursor: pointer; font-size: 13px; padding-left: 16px; /* 给箭头预留左侧空位 */ position: relative; transition: background 0.2s ease;}.notion-toggle[open] > summary { font-weight: 600;}.notion-toggle > summary:hover { background: rgba(128, 128, 128, 0.15); border-radius: 4px;}
/* 自定义箭头,绝对定位,悬浮在左边空白处,不挤占文字 */.notion-toggle > summary::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(-90deg); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(150,150,150,0.7); transition: transform 0.2s;}.notion-toggle[open] > summary::before { transform: translateY(-50%) rotate(0deg);}
/* 层级竖线 */.notion-toggle[open]::after { content: ""; position: absolute; left: 6px; top: 30px; width: 1px; background: rgba(150,150,150,0.4); bottom: 0;}
/* 正文和标题padding-left完全一致,完美对齐,无错位 */.notion-toggle > div { margin: 1px 0; padding-left: 10px; display: flex; flex-direction: column; gap: 1px; font-size: 13px !important; line-height: 1.3 !important;}
article h2:not(.post-title):before{content: "";}
article h3:not(.post-title):before{content: "🌳";}
article h4:not(.post-title):before{content: "🍁";}
article h5:not(.post-title):before{content: "🍃";}
article h6:not(.post-title):before{content: "🍂";}
.notion-page-title > .notion-page-icon-inline { display: inline-flex; align-items: center; justify-content: center; width: calc(1em + 0px); /* 包含边框补偿 */ height: calc(1em + 2px); margin-right: 0.2em;}
.notion-page-title > .notion-page-icon { width: 100%; height: 100%; object-fit: contain; transform: translateY(2%); /* 视觉补偿 */}
.notion-page-title > .notion-page-title-text {line-height: 1.5;font-weight: bold!important; position: relative; top: 0.03em; /* 微调系数 */ transform: translateZ(0); /* 触发GPU加速 */ margin-left: -3px !important;}
/* 图标容器保护策略 */
.notion-page-title > .notion-page-icon-inline { flex-shrink: 0 !important; /* 禁止缩小 */ min-width: 16px !important; /* 设置最小宽度 */ width: 22px !important; /* 固定宽度 */ height: 22px !important; /* 固定高度 */ margin-right: 4px;}
/* 图片保护策略 */
.notion-page-title > .notion-page-icon { width: 100% !important; height: 100% !important; object-fit: contain !important; /* 保持比例 */ min-width: 0 !important; /* 修复 flex 压缩问题 */}
.notion-callout .notion-text {
/* 调整行间距为1.6倍(根据实际效果可调整) */
line-height: 1.5 !important;
/* 调整段落间距为1em(根据实际效果可调整) */
margin-bottom: 0.5em!important;}
/* 如果换行是使用多个text块实现的 */
.notion-callout .notion-text + .notion-text { margin-top: 0.7em !important;
/* 段落之间的间距 */
}
.notion-collection-card { border-radius: 10px!important; /* 您可以根据需数}
/* 针对.notion-page-title 类设置样式 */
.notion-page-title { display: flex;
justify-content: center;
align-items: center;
gap: 4px; }
.notion-page-icon-span.notion-page-icon {
font-size: 0.8rem!important; }
.notion-page-title-text { font-size: 0.8rem!important; }
.notion-collection-card-property {
margin: 0!important;
}
4.2.0版本开始支持:在代码里写CSS很麻烦,干脆在Notion里写;
这里的css将背景换成了一张图片。
编写CSS时请注意使用英文半角空格,而非中文全角空格.
底部表示将所有主题的字体更改为落霞文楷,自定义字体旧版本需要改动blog.config.js ,之后的新版本中,建议直接在这里编辑font-family的css样式。
Jan 30, 2025 04:11 PM
启用
{
"网站推荐":"website",
"软件推荐":"app",
"每日分享":"share",
"原创文章":"original"
}
在使用%category% 路径前缀时: 将url中的分类名映射成英文,效果如下:
【使用前】
xx.com/知行合一/slug
【使用后】
xx.com/learning/slug
Jan 30, 2025 04:11 PM
启用
font-sans
字体前者控制非衬线,后者控制粗细,留空是默认粗细
[font-sans,font-serif] , [font-light,font-bold]
Jan 30, 2025 04:11 PM
Hi,我是一个程序员, Hi,我是一个打工人,Hi,我是一个干饭人,欢迎来到我的博客🎉
hexo,matery主题欢迎语在此配置,英文逗号隔开 , 即可支持多个欢迎语打字效果。
Jan 30, 2025 04:11 PM
启用
document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('a.notion-page-link').forEach(function(el){ el.classList.remove('underline','decoration-black','decoration-2'); el.style.textDecoration='none'; el.style.textDecorationThickness='0'; })})
4.2.0版本开始支持:在代码里写JS很麻烦,干脆在Notion里写;这里的JS将直接在网站中运行注入。
Jan 30, 2025 04:11 PM
启用
https://bu.dusays.com/2025/01/31/679c9acae2452.webp
站点在浏览器的小图标 favicon
Jan 30, 2025 04:11 PM
启用
https://npm.elemecdn.com/prism-themes/themes/prism-one-dark.min.css
Mar 19, 2025 09:37 AM
配置中心使用说明
1.仅 V4.1.0 之后的版本中支持该配置页面
2.此处配置的优先级最高,它将覆盖
Vercel环境变量、覆盖blog.config.js。
3.您可以在blog.config.js以及各个主题的config.js中找到所有支持配置的配置名与配置值
4.并非所有配置都支持,例如NOTION_PAGE_ID就不支持在这里配置等表格字段说明
表头字段 | 说明 |
启用 | 想要生效的配置,请将其勾选 |
配置名 | 参阅配置文件变量名,例如 AUTHOR |
配置值 | 输入您的值 例如作者名 tangly1024 , 或者 true / false |
配置备注 | 仅作为备忘说明使用 |
配置附件 | 如果配置的值是一张图片,可以在这里上传 |
请不要修改这里的表头,除非你知道在哪里修改对应的代码。