HeyIAmSpooky/ctfs-challenges-notes

# 数字常青园 这是配合 [Digital Garden Obsidian Plugin](https://github.com/oleeskild/Obsidian-Digital-Garden) 使用的模板。 有关如何进行设置的信息，请参阅插件代码库中的 README。 [](https://vercel.com/new/clone?repository-url=https://github.com/oleeskild/digitalgarden) ## 文档 文档可在 [docs.forestry.md](https://docs.forestry.md/) 获取 ## CSS 变量 数字常青园可以通过 CSS 变量进行完全自定义。在 `src/site/styles/custom-style.scss` 中覆盖这些变量，即可自定义你的常青园外观。 ### 如何自定义 将你的覆盖项添加到 `custom-style.scss` 中： ``` body { --dg-content-max-width: 800px; --dg-content-font-size: 16px; --dg-sidebar-max-width: 400px; } ``` ### 响应式布局说明 - 无论 `--dg-content-max-width` 的值是多少，内容区域都不会与文件树重叠 - 当视口空间不足时，右侧边栏（TOC/图谱/反向链接）会自动隐藏 - 要使侧边栏在较小的视口中显示，请减小 `--dg-sidebar-max-width` ### 可用变量 #### 颜色变量 你可以直接覆盖基础的 Obsidian 主题颜色变量： | 变量 | 描述 | |----------|-------------| | `--text-normal` | 普通文本颜色 | | `--text-muted` | 柔和/次要文本 | | `--text-faint` | 微弱文本 | | `--text-accent` | 强调色 | | `--text-accent-hover` | 强调色悬停颜色 | | `--link-color` | 链接颜色 | | `--link-color-hover` | 链接悬停颜色 | | `--link-unresolved-color` | 未解析链接颜色 | | `--link-unresolved-opacity` | 未解析链接不透明度 | | `--background-primary` | 主要背景 | | `--background-primary-alt` | 备用主要背景 | | `--background-secondary` | 次要背景 | | `--background-secondary-alt` | 备用次要背景 | | `--interactive-normal` | 交互元素颜色 | | `--interactive-hover` | 交互悬停颜色 | | `--interactive-accent` | 交互强调色 | | `--interactive-accent-hover` | 交互强调色悬停颜色 | #### 布局变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-content-max-width` | `700px` | 内容区域最大宽度 | | `--dg-content-margin-top` | `90px` | 内容顶部外边距 | | `--dg-content-margin-top-mobile` | `75px` | 移动端顶部外边距 | | `--dg-content-font-size` | `18px` | 内容基础字体大小 | | `--dg-content-line-height` | `1.5` | 内容行高 | #### 侧边栏（右侧）变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-sidebar-top` | `75px` | 侧边栏顶部偏移量 | | `--dg-sidebar-gap` | `80px` | 内容与侧边栏之间的间距 | | `--dg-sidebar-min-width` | `25px` | 侧边栏最小宽度 | | `--dg-sidebar-max-width` | `350px` | 侧边栏最大宽度 | | `--dg-sidebar-container-padding` | `20px` | 侧边栏容器内边距 | | `--dg-sidebar-container-height` | `87%` | 侧边栏容器高度 | #### 图谱变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-graph-width` | `250px` | 局部图谱宽度 | | `--dg-graph-height` | `250px` | 局部图谱高度 | | `--dg-graph-border-radius` | `10px` | 图谱边框圆角 | | `--dg-graph-margin-bottom` | `20px` | 图谱底部外边距 | | `--dg-graph-fullscreen-width` | `90vw` | 展开/全局图谱宽度 | | `--dg-graph-fullscreen-height` | `85vh` | 展开/全局图谱高度 | | `--dg-graph-node-color` | `var(--text-accent)` | 活动/当前节点颜色 | | `--dg-graph-node-color-muted` | `var(--text-faint)` | 相邻节点颜色 | | `--dg-graph-label-color` | `var(--text-normal)` | 节点标签文本颜色 | | `--dg-graph-bg` | `var(--background-primary)` | 图谱背景颜色 | | `--dg-graph-border-color` | `var(--background-secondary)` | 图谱边框颜色 | #### 文件树（左侧边栏）变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-filetree-width` | `250px` | 文件树侧边栏宽度 | | `--dg-filetree-min-width` | `250px` | 文件树最小宽度 | | `--dg-filetree-padding` | `10px 20px` | 文件树内边距 | | `--dg-filetree-gap` | `80px` | 与内容的间距 | | `--dg-filetree-title-size` | `32px` | 文件树标题字体大小 | #### TOC（目录）变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-toc-padding` | `5px` | TOC 容器内边距 | | `--dg-toc-font-size` | `0.9rem` | TOC 字体大小 | | `--dg-toc-max-height` | `220px` | TOC 最大高度 | | `--dg-toc-title-size` | `1.2rem` | TOC 标题字体大小 | | `--dg-toc-item-padding` | `2px 0 2px 8px` | TOC 项目内边距 | | `--dg-toc-indent` | `1em` | TOC 嵌套列表缩进 | #### 反向链接变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-backlinks-margin-top` | `10px` | 反向链接区域顶部外边距 | | `--dg-backlinks-max-height` | `250px` | 反向链接列表最大高度 | | `--dg-backlinks-title-size` | `0.9rem` | 反向链接标题字体大小 | | `--dg-backlinks-card-size` | `0.85rem` | 反向链接卡片字体大小 | | `--dg-backlinks-card-padding` | `6px 0` | 反向链接卡片内边距 | | `--dg-backlinks-icon-size` | `14px` | 反向链接图标大小 | #### 搜索变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-search-box-width` | `900px` | 搜索框宽度 | | `--dg-search-box-max-width` | `80%` | 搜索框最大宽度 | | `--dg-search-box-radius` | `15px` | 搜索框边框圆角 | | `--dg-search-box-padding` | `10px` | 搜索框内边距 | | `--dg-search-input-size` | `2rem` | 搜索输入框字体大小 | | `--dg-search-input-padding` | `10px` | 搜索输入框内边距 | | `--dg-search-input-radius` | `5px` | 搜索输入框边框圆角 | | `--dg-search-results-max-height` | `50vh` | 搜索结果最大高度 | | `--dg-search-result-size` | `1.2rem` | 搜索结果字体大小 | | `--dg-search-result-radius` | `10px` | 搜索结果边框圆角 | | `--dg-search-link-size` | `1.4rem` | 搜索链接字体大小 | #### 搜索按钮变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-search-btn-radius` | `8px` | 搜索按钮边框圆角 | | `--dg-search-btn-height` | `32px` | 搜索按钮高度 | | `--dg-search-btn-padding` | `0 10px` | 搜索按钮内边距 | | `--dg-search-btn-gap` | `8px` | 搜索按钮图标/文本间距 | | `--dg-search-btn-font-size` | `0.85rem` | 搜索按钮字体大小 | | `--dg-search-btn-icon-size` | `14px` | 搜索按钮图标大小 | #### 导航栏变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-navbar-title-size-mobile` | `18px` | 移动端导航栏标题大小 | | `--dg-navbar-search-margin` | `20px` | 导航栏搜索按钮外边距 | | `--dg-navbar-search-min-width` | `36px` | 导航栏搜索最小宽度 | | `--dg-logo-height` | `40px` | 桌面端站点 logo 高度 | | `--dg-logo-height-mobile` | `32px` | 移动端站点 logo 高度 | | `--dg-logo-margin` | `10px 15px` | 站点 logo 外边距 | | `--dg-filetree-logo-height` | `70px` | 文件树侧边栏中的站点 logo 高度 | #### 笔记链接 / 文件树项目变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-notelink-padding` | `4px 8px 4px 12px` | 笔记链接内边距 | | `--dg-notelink-size` | `0.85rem` | 笔记链接字体大小 | | `--dg-notelink-border-width` | `2px` | 笔记链接左边框宽度 | | `--dg-notelink-hover-bg` | `rgba(255, 255, 255, 0.05)` | 笔记链接悬停背景 | | `--dg-folder-margin` | `4px 0 4px 2px` | 文件夹名称外边距 | | `--dg-folder-icon-size` | `14px` | 文件夹图标大小 | | `--dg-inner-folder-padding` | `3px 0 3px 0` | 内部文件夹内边距 | | `--dg-inner-folder-margin` | `12px` | 内部文件夹左外边距 | | `--dg-filelist-margin` | `8px` | 文件列表左外边距 | #### 图谱控件变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-graph-ctrl-padding` | `6px 10px` | 图谱控件内边距 | | `--dg-graph-ctrl-radius` | `6px` | 图谱控件边框圆角 | | `--dg-graph-ctrl-margin` | `10px` | 图谱控件外边距 | | `--dg-graph-ctrl-size` | `0.7rem` | 图谱控件字体大小 | | `--dg-graph-ctrl-icon-size` | `14px` | 图谱控件图标大小 | | `--dg-graph-ctrl-gap` | `10px` | 图谱控件间距 | #### 时间戳变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-timestamps-size` | `0.8em` | 时间戳字体大小 | | `--dg-timestamps-gap` | `10px` | 时间戳间距 | | `--dg-timestamps-margin-top` | `20px` | 时间戳顶部外边距 | #### 杂项组件变量 | 变量 | 默认值 | 描述 | |----------|---------|-------------| | `--dg-overlay-bg` | `rgba(0, 0, 0, 0.5)` | 遮罩层背景颜色 | | `--dg-mermaid-radius` | `25px` | Mermaid 图表边框圆角 | | `--dg-mermaid-padding` | `10px` | Mermaid 图表内边距 | | `--dg-transclusion-padding` | `8px` | 嵌入块容器内边距 | | `--dg-external-link-icon-size` | `13px` | 外部链接图标大小 | | `--dg-external-link-padding` | `16px` | 外部链接右侧内边距 |

标签：Obsidian, 个人知识库, 前端模板, 笔记管理, 防御加固