利用Obsidian的PDF导出功能优化排版CoC模组

本文提供一种利用Markdown语言进行跑团模组排版的简便方法。

前言

在备团，参阅各色CoC模组时，我发现常见的出版模组在PDF格式上有一些固定的风格：

双栏排版，一般来说模组的叙述是简短的，文字紧凑而易读；
复古衬线字体，制造旧书、手稿式的复古氛围；
清晰的标题层级，便于阅读和查找内容；
使用边栏、文本框，分隔正文用于展示规则、提示或剧情信息。

这些元素在传统Word文档中往往不易统一排版，尤其是双栏和复古风格很难直接做到漂亮和一致，但是它又不是十分复杂，是有可能被Markdown语言的功能（或者说Obsidian的功能）覆盖的，比如边栏、文本框之类就可以采用引用和callout格式来平替。

说不定我的读者看到这里会一头雾水，可以参详以下的链接：

有关”Markdown语言是什么“

有关”Obsidian是什么“

有关”CoC是什么“

利用 Obsidian 导出 PDF

所以我尝试利用 Obsidian 自带的 PDF 导出功能，结合自定义 CSS，效果还不错：

双栏排版在视觉上非常整齐；
标题、引用、callout等内容可以统一风格，成为低饱和的圆角文本框；

我近日为了带团，重新排版了一个模组《钢铁暴雨中的悲歌》，以此为例：

（此图仅作效果展示，等我彻底完善此模组后再和原作者接触，好在此模组允许我自由演绎）

当然，目前仍有一些小问题：

表格没有进行其他格式设置，光秃秃的，不太好看（原因是表头的背景不容易调节）；
尚未探索给PDF附加背景图片的方法（应该不难）；
横跨两栏的图片需要特别处理，可能需要手动调整或临时单栏显示（这个大概没有什么好方法吧）；
Callout的背景和标题颜色没有经过详细调试，对比比较强烈，尚且不美观（可以自由调节）；
受Obsidian限制，导出的PDF不能内置目录，需要后期添加。

虽说离完美还得远，但整体观感已经比一般 Word 文档更接近出版风格了，当然最主要的，还是Markdown格式带来的便捷性解放了。基础功能都算有了，下一次见到这个css改动，那估计就是我自己要写模组的时候了。

CSS 文件分享

为了简省大家的劳动，我把我自己正在用的这份css文件贴在此处，可以直接在 Obsidian 使用：

/* ============================
   CoC 模组 PDF 导出 CSS
   - 双栏排版
   - h1 强制换栏
   - 段首取消缩进
   - blockquote 不强制斜体
   - callout 多种类型
   - 表格风格优化
   另外也要答谢ChatGPT在css编辑过程中给我的帮助。
   ============================ */
/* ===== 全局双栏 ===== */
.markdown-preview-view {
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid rgba(0,0,0,0.08);
  font-family: "EB Garamond", "Noto Serif", "Times New Roman", "Computer Modern", serif;
  font-size: 11pt;
  line-height: 1.45;
  text-align: justify;
  hyphens: manual;
  orphans: 3;
  widows: 3;
}
/* ===== 标题 ===== */
.markdown-preview-view h1 {
  font-family: "IM Fell English SC", "EB Garamond", serif;
  text-transform: uppercase;
  color: #2f2a28;
  margin-top: 1.0em;
  margin-bottom: 0.5em;
  border-bottom: 2px solid rgba(47,42,40,0.15);
  padding-bottom: 0.18em;
  font-size: 18pt;
  text-align: center;
  break-before: column;
}

.markdown-preview-view h2 { font-size: 14pt; }
.markdown-preview-view h3 { font-size: 12pt; font-style: italic; }
/* ===== 段落 ===== */
.markdown-preview-view p {
  text-indent: 0;
  margin: 0 0 0.8em 0;
}
  /* ===== 引用 ===== */
.markdown-preview-view blockquote {
  border-left: 3px solid #5a4632;
  background: #f6f2e6;
  padding: 0.6em 1em;
  margin: 0.6em 0;
  font-family: "EB Garamond", "Georgia", serif;
  font-size: 10.5pt;
  color: #2f2a28;
  font-style: normal !important;
  break-inside: avoid;
}
  /* ===== 表格 ===== */

.markdown-preview-view table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 0.8em 0;
  break-inside: avoid;
  font-family: "EB Garamond", "Times New Roman", serif;
  font-size: 10pt;
  /* background: #fdf8f0; 表格整体背景 */
  /* border: 1px solid #666; 表格边框 */
}
.markdown-preview-view th,
.markdown-preview-view td {
  /* border: 1px solid #666; 单元格边框统一 */
  padding: 0.4em 0.7em;
  vertical-align: top;
  /* background: #fdf8f0; 单元格背景统一 */
}
.markdown-preview-view th {
  /* background: #e9e0b8; 表头背景 */
  font-weight: 600;
  text-align: left;
}

/* ===== Callout 基本样式 ===== */
.markdown-preview-view .callout {
  border: 1.6px solid #3a2d2d;
  background: #f4efe0;
  padding: 0.7em 0.9em;
  margin: 0.9em 0;
  font-size: 10.5pt;
  line-height: 1.35;
  break-inside: avoid;
}
.markdown-preview-view .callout .callout-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.45em;
  font-family: "IM Fell English SC", "EB Garamond", serif;
  font-weight: 600;
  font-size: 11pt;
  border-bottom: 1px solid rgba(58,45,45,0.08);
  padding-bottom: 0.18em;
}

.markdown-preview-view .callout .callout-icon { display: none; }

.markdown-preview-view .callout .callout-content {
  font-family: "Noto Serif", "EB Garamond", "Times New Roman", serif;
  font-size: 10.5pt;
  line-height: 1.4;
  font-style: normal;
}
  /* ===== Callout 类型 ===== */

.markdown-preview-view .callout[data-callout="note"] {
  border-color: #345a4a;
  background: #eef6f0;
}
.markdown-preview-view .callout[data-callout="warning"] {
  border-color: #7a2a2a;
  background: #fbefed;
}
.markdown-preview-view .callout[data-callout="hint"] {
  border-color: #3a5a7a;
  background: #edf4fb;
}

.markdown-preview-view .callout[data-callout="question"] {
  border-color: #7a5a3a;
  background: #f9f4ec;
}

.markdown-preview-view .callout[data-callout="quote"] {
  border-color: #5a3a7a;
  background: #f4edf9;
}

.markdown-preview-view .callout[data-callout="tip"] {
  border-color: #3a7a3a;
  background: #ecf9ed;
}
/* ===== 场景框 ===== */
.markdown-preview-view .scene {
  font-family: "Fira Code", "Courier New", monospace;
  background: #efe6cf;
  border: 1px dashed rgba(58,45,45,0.25);
  padding: 0.6em 0.8em;
  margin: 0.9em 0;  
  font-size: 10pt;
  break-inside: avoid;
}  
/* ===== 代码块 ===== */
.markdown-preview-view pre,
.markdown-preview-view code {
  font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace;
  font-size: 9.5pt;
  background: rgba(0,0,0,0.03);
  padding: 0.4em 0.5em;
  border-radius: 4px;
}
  
/* ===== 避免跨栏断裂 ===== */

.markdown-preview-view img,
.markdown-preview-view figure,
.markdown-preview-view table,
.markdown-preview-view .callout,
.markdown-preview-view .scene,
.markdown-preview-view blockquote {
  page-break-inside: avoid;
  break-inside: avoid;
}

前缀.markdown-preview-view是Obsidian专门用于预览模式（Preview） 或PDF导出的一个容器类选择器，所以此css不会影响处于编辑模式的文档，但可能会给编辑/预览模式切换带来麻烦。

使用方法

在 Obsidian 新建一个仓库专门用于模组排版；
安装合适的主题（也可以没这个必要）（我用的是Typomagical）；
将 CSS 文件放入仓库的 *\.obsidian\snippets 中并启用，这段参考此教程；
用自带的导出为PDF功能导出基础PDF；
如果需要进一步修改基础PDF，比如增加封面或增加目录结构，可以用ABBYY FineReader或其他PDF编辑软件处理。

小结

整个流程还处于探索阶段，我也只是把自己在备团、带团过程中积累的一些经验分享出来。欢迎大家用类似的思路更改其他Markdown笔记软件的导出风格。
希望随着实践逐步完善，也欢迎大家提出改进建议，让模组排版更简便、更美观、更易读。