🎨 CSS 代码片段合集

CSS 代码片段是自定义 Obsidian 外观的轻量级方式，无需安装主题即可实现个性化定制。

📁 如何使用 CSS 片段

创建片段文件

打开设置 → 外观
点击「CSS 代码片段」旁的文件夹图标
在打开的文件夹中创建 .css 文件
返回设置，点击刷新按钮
启用对应的代码片段

文件结构

.obsidian/
└── snippets/
    ├── custom-fonts.css      # 自定义字体
    ├── link-colors.css       # 链接颜色
    ├── editor-enhanced.css   # 编辑器增强
    └── callout-style.css     # 标注框样式

片段命名建议

使用清晰的文件名，如 功能-描述.css，方便管理和查找。

🎨 界面美化

🔤 1. 自定义字体

css

/* ==================== 字体设置 ==================== */

/* 编辑器字体 - 适合编程和写作 */
.cm-s-obsidian .cm-line,
.markdown-source-view {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 界面字体 - 适合中文 */
body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 预览字体 - 适合阅读 */
.markdown-preview-view {
  font-family: 'Noto Serif SC', 'Source Han Serif CN', 'LXGW WenKai', serif;
  font-size: 16px;
  line-height: 1.8;
}

/* 标题字体 */
.cm-header,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
  font-family: 'Inter', 'PingFang SC', sans-serif;
  font-weight: 600;
}

📏 2. 调整行高和间距

css

/* ==================== 行高与间距 ==================== */

/* 全局行高 */
.cm-line,
.markdown-preview-view p {
  line-height: 1.8;
}

/* 段落间距 */
.markdown-preview-view p {
  margin-bottom: 1em;
  margin-top: 0;
}

/* 列表间距 */
.cm-line.HyperMD-list-line,
.markdown-preview-view li {
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}

/* 标题间距 */
.markdown-preview-view h1 { margin-top: 1.5em; margin-bottom: 0.8em; }
.markdown-preview-view h2 { margin-top: 1.3em; margin-bottom: 0.6em; }
.markdown-preview-view h3 { margin-top: 1.1em; margin-bottom: 0.5em; }
.markdown-preview-view h4 { margin-top: 1em; margin-bottom: 0.4em; }

🔗 3. 链接样式美化

css

/* ==================== 链接样式 ==================== */

/* 内部链接 - 紫色系 */
.internal-link,
.cm-link {
  color: #7c3aed !important;
  text-decoration: none;
  border-radius: 3px;
  padding: 0 2px;
  transition: all 0.2s ease;
}

.internal-link:hover,
.cm-link:hover {
  color: #6d28d9 !important;
  background-color: rgba(124, 58, 237, 0.1);
}

/* 外部链接 - 蓝色系 */
.external-link {
  color: #2563eb !important;
  text-decoration: none;
}

.external-link:hover {
  color: #1d4ed8 !important;
  text-decoration: underline;
}

.external-link::after {
  content: ' ↗';
  font-size: 0.8em;
  opacity: 0.6;
}

/* 未存在的链接 - 灰色虚线 */
.is-unresolved,
.cm-hmd-internal-link .is-unresolved {
  color: #9ca3af !important;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  opacity: 0.7;
}

📰 4. 标题样式增强

css

/* ==================== 标题样式 ==================== */

/* 一级标题 - 大而醒目 */
.cm-header-1,
.markdown-preview-view h1 {
  font-size: 2.2em;
  font-weight: 700;
  color: var(--text-normal);
  border-bottom: 3px solid var(--interactive-accent);
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}

/* 二级标题 - 带左边框 */
.cm-header-2,
.markdown-preview-view h2 {
  font-size: 1.6em;
  font-weight: 600;
  color: var(--text-normal);
  border-left: 4px solid var(--interactive-accent);
  padding-left: 0.6em;
}

/* 三级标题 - 带下划线 */
.cm-header-3,
.markdown-preview-view h3 {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 0.2em;
}

/* 四级标题 */
.cm-header-4,
.markdown-preview-view h4 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-muted);
}

/* 五六级标题 */
.cm-header-5,
.cm-header-6,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-size: 1em;
  font-weight: 600;
  color: var(--text-faint);
}

✏️ 编辑器增强

📍 5. 当前行高亮

css

/* ==================== 当前行高亮 ==================== */

/* 编辑模式当前行 */
.cm-active {
  background-color: rgba(124, 58, 237, 0.08) !important;
  border-left: 3px solid var(--interactive-accent);
  border-radius: 0 4px 4px 0;
}

/* 深色模式适配 */
.theme-dark .cm-active {
  background-color: rgba(124, 58, 237, 0.15) !important;
}

💻 6. 代码块美化

css

/* ==================== 代码块样式 ==================== */

/* 行内代码 */
.cm-inline-code,
.markdown-preview-view code:not(pre code) {
  background-color: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}

/* 代码块容器 */
.markdown-preview-view pre,
.markdown-source-view .HyperMD-codeblock {
  background-color: #1e1e2e;
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0;
  overflow-x: auto;
}

/* 代码块内文字 */
.markdown-preview-view pre code,
.cm-hmd-codeblock {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #cdd6f4;
}

/* 深色模式 */
.theme-dark .markdown-preview-view pre,
.theme-dark .HyperMD-codeblock {
  background-color: #11111b;
}

💬 7. 引用块样式

css

/* ==================== 引用块样式 ==================== */

/* 基础引用块 */
.markdown-preview-view blockquote,
.cm-quote {
  border-left: 4px solid var(--interactive-accent);
  padding: 0.5em 1em;
  margin: 1em 0;
  background-color: rgba(124, 58, 237, 0.05);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
}

/* 深色模式 */
.theme-dark .markdown-preview-view blockquote {
  background-color: rgba(124, 58, 237, 0.1);
}

/* 多层引用 */
.markdown-preview-view blockquote blockquote {
  border-left-color: #a78bfa;
  margin-left: 0;
}

📋 8. 列表样式增强

css

/* ==================== 列表样式 ==================== */

/* 无序列表 - 圆点样式 */
.markdown-preview-view ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.markdown-preview-view ul ul {
  list-style-type: circle;
}

.markdown-preview-view ul ul ul {
  list-style-type: square;
}

/* 有序列表 */
.markdown-preview-view ol {
  padding-left: 1.8em;
}

/* 任务列表 - 勾选样式 */
.markdown-preview-view .task-list-item-checkbox:checked {
  accent-color: var(--interactive-accent);
}

/* 编辑模式任务列表 */
.cm-formatting-task {
  color: var(--interactive-accent);
  font-weight: bold;
}

📦 Callout 标注框

🏷️ 9. 自定义 Callout 样式

css

/* ==================== Callout 标注框 ==================== */

/* 全局 Callout 样式 */
.callout {
  border-radius: 8px;
  margin: 1em 0;
  padding: 0.8em 1em;
  border-left: 4px solid;
}

/* 信息框 - 蓝色 */
.callout[data-callout="info"] {
  --callout-color: 59, 130, 246;
  --callout-bg: rgba(59, 130, 246, 0.1);
}

/* 提示框 - 绿色 */
.callout[data-callout="tip"] {
  --callout-color: 34, 197, 94;
  --callout-bg: rgba(34, 197, 94, 0.1);
}

/* 警告框 - 黄色 */
.callout[data-callout="warning"] {
  --callout-color: 234, 179, 8;
  --callout-bg: rgba(234, 179, 8, 0.1);
}

/* 错误框 - 红色 */
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: 239, 68, 68;
  --callout-bg: rgba(239, 68, 68, 0.1);
}

/* 成功框 - 绿色 */
.callout[data-callout="success"] {
  --callout-color: 22, 163, 74;
  --callout-bg: rgba(22, 163, 74, 0.1);
}

/* 问题框 - 橙色 */
.callout[data-callout="question"] {
  --callout-color: 249, 115, 22;
  --callout-bg: rgba(249, 115, 22, 0.1);
}

/* 引用框 - 紫色 */
.callout[data-callout="quote"] {
  --callout-color: 124, 58, 237;
  --callout-bg: rgba(124, 58, 237, 0.1);
}

/* 示例框 - 青色 */
.callout[data-callout="example"] {
  --callout-color: 6, 182, 212;
  --callout-bg: rgba(6, 182, 212, 0.1);
}

🎯 10. Callout 图标自定义

css

/* ==================== Callout 图标 ==================== */

/* 自定义图标 */
.callout[data-callout="info"] .callout-icon {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

.callout[data-callout="bug"] .callout-icon {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 2l1.88 1.88M14.12 3.88L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1'/%3E%3Cpath d='M12 20c-3.3 0-6-2.7-6-6v-3a6 6 0 0 1 12 0v3c0 3.3-2.7 6-6 6'/%3E%3Cpath d='M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M3 21c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4M17.2 17c2.1.1 3.8 1.9 3.8 4'/%3E%3C/svg%3E");
}

.callout[data-callout="idea"] .callout-icon {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}

📂 侧边栏与面板

🗂️ 11. 文件管理器美化

css

/* ==================== 文件管理器 ==================== */

/* 文件列表项 */
.nav-file {
  border-radius: 6px;
  margin: 2px 4px;
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.nav-file:hover {
  background-color: var(--interactive-hover);
}

/* 当前文件高亮 */
.nav-file.is-active {
  background-color: rgba(124, 58, 237, 0.1);
  border-left: 3px solid var(--interactive-accent);
}

/* 文件夹样式 */
.nav-folder {
  border-radius: 6px;
  margin: 2px 4px;
}

.nav-folder-title {
  font-weight: 500;
}

/* 折叠箭头 */
.nav-folder-collapse-indicator {
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.nav-folder.collapsed .nav-folder-collapse-indicator {
  transform: rotate(-90deg);
}

📐 12. 侧边栏宽度调整

css

/* ==================== 侧边栏宽度 ==================== */

/* 左侧边栏 */
.workspace-ribbon {
  width: 44px;
}

.workspace-split.mod-left-split {
  max-width: 320px;
  min-width: 200px;
}

/* 右侧边栏 */
.workspace-split.mod-right-split {
  max-width: 350px;
  min-width: 250px;
}

/* 内容区域 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 800px;
  margin: 0 auto;
}

👁️ 13. 隐藏界面元素

css

/* ==================== 隐藏元素 ==================== */

/* 隐藏标题栏按钮（macOS） */
.titlebar-button {
  opacity: 0;
  transition: opacity 0.2s;
}

.titlebar:hover .titlebar-button {
  opacity: 1;
}

/* 隐藏帮助按钮 */
.workspace-ribbon-action[aria-label="帮助"] {
  display: none;
}

/* 隐藏滚动条但保留功能 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 隐藏状态栏 */
.status-bar {
  display: none;
}

/* 紧凑模式 - 隐藏工具栏 */
.workspace-ribbon.mod-left {
  display: none;
}

.workspace-split.mod-left-split {
  margin-left: 0;
}

🏷️ 标签与属性

🔖 14. 标签样式

css

/* ==================== 标签样式 ==================== */

/* 基础标签 */
.tag,
.cm-hashtag {
  background-color: rgba(124, 58, 237, 0.15);
  color: #7c3aed !important;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.tag:hover,
.cm-hashtag:hover {
  background-color: rgba(124, 58, 237, 0.25);
}

/* 特定标签颜色 */
.tag[href="#重要"],
.cm-hashtag:has-text("重要") {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444 !important;
}

.tag[href="#进行中"],
.cm-hashtag:has-text("进行中") {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6 !important;
}

.tag[href="#完成"],
.cm-hashtag:has-text("完成") {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e !important;
}

⚙️ 15. Properties 属性面板

css

/* ==================== Properties 面板 ==================== */

/* 属性容器 */
.metadata-container {
  background-color: var(--background-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 1em;
  border: 1px solid var(--background-modifier-border);
}

/* 属性项 */
.metadata-property {
  padding: 6px 0;
  border-bottom: 1px solid var(--background-modifier-border-hover);
}

.metadata-property:last-child {
  border-bottom: none;
}

/* 属性键 */
.metadata-property-key {
  font-weight: 500;
  color: var(--text-muted);
}

/* 属性值 */
.metadata-property-value {
  color: var(--text-normal);
}

🌙 深色模式优化

🎨 16. 深色模式配色

css

/* ==================== 深色模式配色 ==================== */

.theme-dark {
  /* 背景色系 */
  --background-primary: #1a1b26;
  --background-secondary: #16161e;
  --background-secondary-alt: #1f2335;
  --background-modifier-border: #292e42;
  
  /* 文字色系 */
  --text-normal: #c0caf5;
  --text-muted: #565f89;
  --text-faint: #3b4261;
  
  /* 强调色 */
  --interactive-accent: #7c3aed;
  --interactive-accent-hover: #6d28d9;
  
  /* 选中文本 */
  --text-selection: rgba(124, 58, 237, 0.3);
  
  /* 高亮 */
  --text-highlight-bg: rgba(255, 215, 0, 0.2);
}

/* 更暗的黑底模式 */
.theme-dark.dark-mode {
  --background-primary: #0d0d0d;
  --background-secondary: #0a0a0a;
  --text-normal: #e0e0e0;
}

🔄 17. 自动深色模式

css

/* ==================== 系统深色模式同步 ==================== */

@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: #1a1b26;
    --background-secondary: #16161e;
    --text-normal: #c0caf5;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --text-normal: #1f2937;
  }
}

✨ 特殊效果

🧘 18. 禅模式

css

/* ==================== 禅模式 ==================== */

/* 自动隐藏侧边栏 */
.workspace-ribbon,
.workspace-split.mod-left-split,
.workspace-split.mod-right-split {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.workspace-ribbon:hover,
.workspace-split.mod-left-split:hover,
.workspace-split.mod-right-split:hover {
  opacity: 1;
}

/* 居中内容 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 650px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 隐藏状态栏 */
.status-bar {
  opacity: 0;
}

.status-bar:hover {
  opacity: 1;
}

🪟 19. 卡片式布局

css

/* ==================== 卡片式布局 ==================== */

/* 笔记卡片效果 */
.markdown-preview-view {
  background: var(--background-secondary);
  border-radius: 12px;
  margin: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 深色模式阴影 */
.theme-dark .markdown-preview-view {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 文件列表卡片 */
.nav-file {
  background: var(--background-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin: 4px 8px;
  padding: 8px 12px;
}

🎬 20. 动画效果

css

/* ==================== 平滑动画 ==================== */

/* 全局过渡 */
* {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}

/* 链接悬停动画 */
.internal-link,
.external-link {
  transition: all 0.2s ease;
}

/* 按钮悬停 */
button,
.clickable-icon {
  transition: all 0.15s ease;
}

button:hover,
.clickable-icon:hover {
  transform: translateY(-1px);
}

/* 文件列表动画 */
.nav-file,
.nav-folder {
  transition: all 0.15s ease;
}

.nav-file:hover,
.nav-folder:hover {
  transform: translateX(2px);
}

📊 图谱与表格

🕸️ 21. 图谱样式

css

/* ==================== 关系图谱样式 ==================== */

/* 图谱节点 */
.graph-view.color-fill {
  color: var(--interactive-accent);
}

/* 图谱连线 */
.graph-view.color-line {
  color: var(--background-modifier-border);
}

/* 高亮节点 */
.graph-view.color-fill-highlight {
  color: #7c3aed;
}

.graph-view.color-line-highlight {
  color: #a78bfa;
}

/* 图谱背景 */
.graph-view.color-circle {
  color: var(--background-primary);
}

.graph-view.color-text {
  color: var(--text-muted);
}

📋 22. 表格样式

css

/* ==================== 表格美化 ==================== */

/* 表格容器 */
.markdown-preview-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}

/* 表头 */
.markdown-preview-view th {
  background-color: var(--background-secondary);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--interactive-accent);
}

/* 表格行 */
.markdown-preview-view td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--background-modifier-border);
}

/* 斑马纹 */
.markdown-preview-view tr:nth-child(even) td {
  background-color: var(--background-secondary);
}

/* 悬停高亮 */
.markdown-preview-view tr:hover td {
  background-color: rgba(124, 58, 237, 0.05);
}

🔧 常用组合片段

✍️ 23. 完整写作模式

css

/* ==================== 写作模式组合 ==================== */

/* 居中布局 + 自定义字体 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
  font-size: 16px;
  line-height: 1.9;
  padding: 2rem 1rem;
}

/* 隐藏侧边栏 */
.workspace-ribbon,
.workspace-split.mod-left-split,
.workspace-split.mod-right-split {
  opacity: 0;
  transition: opacity 0.3s;
}

.workspace-ribbon:hover,
.workspace-split:hover {
  opacity: 1;
}

/* 段落间距 */
.markdown-preview-view p {
  margin-bottom: 1.2em;
}

/* 首行缩进 */
.markdown-preview-view p {
  text-indent: 2em;
}

⚡ 24. 紧凑效率模式

css

/* ==================== 紧凑模式组合 ==================== */

/* 减小内边距 */
.workspace-leaf-content {
  padding: 0;
}

.cm-line {
  padding-top: 0;
  padding-bottom: 0;
}

.markdown-preview-view {
  padding: 0 0.5rem;
}

/* 紧凑标题 */
.markdown-preview-view h1 { font-size: 1.6em; margin: 0.8em 0 0.4em; }
.markdown-preview-view h2 { font-size: 1.3em; margin: 0.6em 0 0.3em; }
.markdown-preview-view h3 { font-size: 1.1em; margin: 0.5em 0 0.2em; }

/* 紧凑列表 */
.markdown-preview-view li {
  margin: 0.1em 0;
}

/* 紧凑代码块 */
.markdown-preview-view pre {
  padding: 0.5em;
  margin: 0.5em 0;
}

💡 使用技巧

📝 片段管理建议

按功能分类：每个片段文件专注一个功能
添加注释：在 CSS 中添加说明，方便日后修改
版本控制：将 snippets 文件夹加入 Git 管理
渐进式应用：先小范围测试，再全面启用

🔍 调试技巧

bash

# 打开开发者工具
快捷键: Ctrl/Cmd + Shift + I

# 查找元素选择器
1. 点击开发者工具左上角的选择器
2. 悬停在目标元素上
3. 查看右侧样式面板

❓ 常见问题

CSS 不生效怎么办？

检查语法是否正确（缺少分号、括号不匹配）
确认片段已启用
点击刷新按钮重新加载
检查是否有更高优先级的样式覆盖

如何查看所有 CSS 变量？

打开开发者工具，在 Console 中输入：

javascript

getComputedStyle(document.documentElement)

🚀 下一步

主题定制 - 安装和使用社区主题
插件系统 - 探索插件生态
标签系统 - Emoji 与标签结合使用

🎨 CSS 代码片段合集 ​

📁 如何使用 CSS 片段 ​

创建片段文件 ​

文件结构 ​

🎨 界面美化 ​

🔤 1. 自定义字体 ​

📏 2. 调整行高和间距 ​

🔗 3. 链接样式美化 ​

📰 4. 标题样式增强 ​

✏️ 编辑器增强 ​

📍 5. 当前行高亮 ​

💻 6. 代码块美化 ​

💬 7. 引用块样式 ​

📋 8. 列表样式增强 ​

📦 Callout 标注框 ​

🏷️ 9. 自定义 Callout 样式 ​

🎯 10. Callout 图标自定义 ​

📂 侧边栏与面板 ​

🗂️ 11. 文件管理器美化 ​

📐 12. 侧边栏宽度调整 ​

👁️ 13. 隐藏界面元素 ​

🏷️ 标签与属性 ​

🔖 14. 标签样式 ​

⚙️ 15. Properties 属性面板 ​

🌙 深色模式优化 ​

🎨 16. 深色模式配色 ​

🔄 17. 自动深色模式 ​

✨ 特殊效果 ​

🧘 18. 禅模式 ​

🪟 19. 卡片式布局 ​

🎬 20. 动画效果 ​

📊 图谱与表格 ​

🕸️ 21. 图谱样式 ​

📋 22. 表格样式 ​

🔧 常用组合片段 ​

✍️ 23. 完整写作模式 ​

⚡ 24. 紧凑效率模式 ​

💡 使用技巧 ​

📝 片段管理建议 ​

🔍 调试技巧 ​

❓ 常见问题 ​

🚀 下一步 ​