## 更新说明
> [!IMPORTANT]
> NoteToMP 1.3.0版本对主题进行了优化，升级后请先清理旧版本主题文件，再重新下载新版主题。
> 
> 操作步骤：在NoteToMP插件设置中，先点击『清空主题-清空』，然后点击『获取更多主题-下载』
> 
> 注意：如果修改过主题文件请做备份后再操作。

完整历史变更请查看: [CHANGELOG](./CHANGELOG.md)

## 1、简介

这是一个Obsidian插件，针对微信公众号编缉器进行了优化，通过本插件复制笔记可以把笔记样式同步到公众号编缉器，轻轻松松搞定文章格式，一劳永逸，而且支持代码高亮、代码行数显示、主题背景颜色等。针对微信公众号不能放链接也专门处理了，提供直接展示链接地址和文末脚注展示两种方式。本项目初衷仅是为了能够将Obsidian中笔记的样式完美同步到微信公众号的编辑器中，因此项目重点在于保证文章格式的一致性，而不是成为一个微信公众号编辑器。

### 图片方向自动处理

为了优化微信公众号图片上传体验，插件新增了 EXIF 方向自动处理功能：

**功能说明：**
- 自动检测 JPEG 图片的 EXIF Orientation 信息
- 对存在方向问题的图片自动旋转并转换为 PNG 格式
- 确保上传到微信公众号的图片显示方向正确

**支持的方向类型：**
- `Orientation=1`：正常方向（无需处理）
- `Orientation=3`：需旋转 180°
- `Orientation=6`：需顺时针旋转 90°（右旋 90°）
- `Orientation=8`：需逆时针旋转 90°（左旋 90°）

**处理流程：**
1. 检测图片文件类型（仅处理 JPEG/JPG 格式）
2. 读取 EXIF 方向信息
3. 如有方向问题，使用 Canvas 进行旋转处理
4. 将处理后的图片转换为 PNG 格式上传

**用户体验：**
- 本地 Obsidian 中显示正常的图片，上传到公众号后也会保持正确方向
- 自动处理，无需用户手动调整
- 转换为 PNG 格式可避免 EXIF 信息导致的显示问题

### 调试日志

在控制台（开发者工具）可看到：
```
[note2mp] active file path: your/file/path.md
[note2mp] use default cover: cover.png -> ![[cover.png]]
[note2mp] EXIF orientation detected: 6
[note2mp] Image converted to PNG with rotation
```
路径日志做了节流：同一文件 3 秒内不重复打印。后续可加"调试开关"以完全关闭。

### 摘要、封面裁剪、原文链接等ges/screenshot.png)

## 2、安装
首先，**请确认已关闭了Obsidian的安全模式**。如未关闭，请通过**设置——第三方插件——关闭安全模式**关闭。
### 2.1 插件安装

#### 从官方**社区插件市场**安装
通过Obsidian**设置——第三方插件——社区插件市场**，输入**NoteToMP**搜索安装。

### 2.2 主题资源安装
如果采用的是用从插件市场或者Github下载安装的方式，在插件安装完成后还需要再下载主题资源。网盘里的安装包已经集成了主题样式，无需下载。

**1）通过设置下载**
为了尽可能保证插件符合官方规范，主题和代码高亮需要打开Obsidian的**设置**界面，在底部的**第三方插件**——**Note to MP**——**获取更多主题**手动下载。

**2）手动下载**
也可以直接在[Release](https://github.com/sunbooshi/note-to-mp/releases)页面下载`assets.zip`文件，解压后放到`.obsidian/plugins/note-to-mp/assets`目录下。

### 2.3 常见安装问题

**只有默认主题**
确认根据**2.2 主题资源安装**里的步骤操作了，然后检查一下插件目录内容，应如下所示： 
```
.obsidian/plugins/note-to-mp/
├── assets
│   ├── themes.json
│   ├── highlights.json
│   ├── themes
│   │   ├── maple.css
│   │   ├── mweb-ayu.css
│   │   └── ...
│   └── highlights
│       ├── a11y-dark.css
│       ├── a11y-light.css
│       └── ...
├── main.js
├── manifest.json
└── styles.css
```

## 3、使用
点击Obsidian左侧工具栏中的图标
![](images/clipboard-paste.png)或者按`Ctrl+P`打开命令，搜索**复制到公众号**。

检查样式无误后，点击**复制**按钮，然后到公众号粘贴即可。

![](images/20240630221748.jpg)

**★ 公众号**
插件支持多公众号，在下拉菜单中进行不同公众号的切换。该功能需要订阅才能使用。

**★ 复制**
检查样式无误后，点击**复制**按钮，然后到公众号编辑器粘贴即可。

**★ 上传图片**
点击上传图片会将文章中的本地图片上传到微信公众号，同时会替换预览中的图片地址，而您原始文章中的图片地址不会替换。上传图片完成之后，此时点击“复制”，然后到微信公众号编缉器中粘贴就可以把图片带过去了。该功能需要订阅才能使用。

**★ 发草稿**
点击发草稿会上传文章中的本地图片，并且将文章发送到公众号的草稿箱，省去粘贴步骤。在文章正式发布之前还有一些选项需要您设置，比如文章摘要等。考虑到安全性，插件暂不提供直接发布功能。该功能需要订阅才能使用。

**★ 刷新**
如果笔记内容更新了，但是预览没有更新，可以点击一下刷新按钮。

**★ 封面**
发草稿必须设置文章封面，使用默认封面，是从您的永久素材中选取最近使用的作为封面，您需要在发布文章之前重新设置一下。本地上传则需要你选取一张本地图片作为封面。

**★ 样式**
可以选取笔记的样式，目前有30多款，还在持续增加中。如果有钟意的样式，可以在插件设置中，设置为默认样式，这样就不用每次都点一下了。

**★ 代码高亮**
设置代码高亮的样式。


### 数学公式使用指南

- [LaTeX使用指南：从入门到精通 - 少数派](https://sspai.com/post/77684)
- [通用 LaTeX 数学公式语法手册 - UinIO.com 电子技术实验室](http://www.uinio.com/Math/LaTex/)
- [AsciiMath Parser 🚀 Asciimath Parser](https://asciimath.widcard.win/zh/introduction/)
- [AsciiMath](https://asciimath.org/)

目前插件支持LaTeX和AsciiMath两种数学公式语法，对于公式输入不是特别频繁，而且不怎么熟悉LaTeX的用户来说可以尝试使用AsciiMath，AsciiMath相对简单一些，可以现学现用，直接在官网查找手册编写就可以了。因为在正常的Markdown语法中无法区分采用的是哪种数学公式语法，所以需要在插件中设置默认的数学公式语法，默认是LaTeX语法。对于有混写需求的朋友来说，可以采用代码块的语法来写数学公式，然后指定latex或者asciimath来明确当前语法。但使用代码块语法的时候在Obsidian中并不能实时预览公式。

如果需要使用AsciiMath，还需要安装asciimath插件才能在Obsidian中实时预览，不过asciimath插件的解析器和官方的语法有一些差异，主要体现在矩阵写法上，所以使用时也需注意。另外需要特别提醒的是AsciiMath不支持在一个语法块中写多行公式，所以如果要写多行公式，只能每行公式单独写一个语法块。LaTeX是支持多行公式的。

数学公式的专业性很强，我也无法全面测试，如果遇到无法正常渲染的情况，欢迎反馈。

````markdown
行内公式：$c=\pm\sqrt{a^2+b^2}$
行间公式：
$$
c=\pm\sqrt{a^2+b^2}
$$

使用代码块方式可以指定公式语法，该方法仅适用行间公式。

采用latex语法的数学公式：
``` latex
c=\pm\sqrt{a^2+b^2}
```

采用asciimath的数学公式：
``` am
c=+-sqrt(a^2+b^2)
```
````

数学公式的渲染效果可以看这篇文章：[公众号文章里的数学公式排版秘籍](https://mp.weixin.qq.com/s/-kpT2U1gT_5W3TsDCAVgsw)👈️
### 自定义CSS使用指南

新建一篇笔记，例如**自定义样式**，直接将如下内容粘贴进笔记：

````CSS
```CSS
.note-to-mp {
    font-family: Optima, Optima-regular, "Microsoft YaHei", PingFangSC-regular, serif;
    padding: 0;
    background-color: #FFFFFF;
} 
```
````

然后打开NoteToMP插件设置，将**自定义样式**（即包含自定义CSS内容的笔记名称），粘贴到**自定义CSS笔记**中即可。如果不使用自定义CSS，留空即可。

关于自定义CSS的写法可以参考下面的代码
```css
/* 全局属性  
 * 这里可以设置字体，字体大小，边距，背景颜色等
 */  
.note-to-mp {  
    /* 注：请在大括号内改写！！！ */  
}  

/* 段落 */  
.note-to-mp p {  
    /* 注：请在大括号内改写！！！ */  
}  

/* 一级标题 */  
.note-to-mp h1 {  
    /* 注：请在大括号内改写！！！ */  
}


/* 二级标题 */  
.note-to-mp h2 {  
    /* 注：请在大括号内改写！！！ */  
}


/* 三级标题 */  
.note-to-mp h3 {  
    /* 注：请在大括号内改写！！！ */  
}

  
/* 无序列表整体样式  
 * list-style-type: square|circle|disc;  
 */  
.note-to-mp ul {  
    /* 注：请在大括号内改写！！！ */  
} 

/* 加粗 */  
.note-to-mp strong {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 斜体 */  
.note-to-mp em {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 加粗斜体 */  
.note-to-mp em strong {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 删除线 */  
.note-to-mp del {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 分隔线  
 */  
.note-to-mp hr {  
    /* 注：请在大括号内改写！！！ */  
}
/* 图片
 */  
.note-to-mp img {  
    /* 注：请在大括号内改写！！！ */  
}
/* 
 * 文件嵌入引用
 */
.note-embed-file {
	/* 注：请在大括号内改写！！！ */  
}
/* 
 * 高亮颜色
 */
.note-highlight {
  /* background-color: rgba(255,208,0, 0.4); */
}

/* 
 * Callout
 * 可以调整各种类型Callout的文字颜色和背景颜色
 * color: rgb(158, 158, 158);
 * background-color: rgba(158, 158, 158, 0.1);
 */
.note-callout-note { 
}
/* abstract tip hint */
.note-callout-abstract {
}
.note-callout-success {
}
/* question  help, faq, warning, caution, attention */
.note-callout-question {
}
/* failure, fail, missing, danger, error, bug */
.note-callout-failure {
}
.note-callout-example {
}
.note-callout-quote {
}
```

例如这篇文章[几个让公众号排版更精致的小技巧，手机上也可以！](https://mp.weixin.qq.com/s/Q4_pV9TW8un3qZ0vrUvD1A)👈️使用的自定义样式如下：
```css
.note-to-mp {
    font-family: Optima-regular, Optima, "Microsoft YaHei", PingFangSC-regular, serif;
}

h2 strong {
    display: inline-block;
    background: rgb(90, 185, 131);
    color: rgb(255, 255, 255);
    padding: 2px 16px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin-right: 10px;
    visibility: visible;
}

h2 {
  border-bottom: rgb(90, 185, 131) 2px solid;
  color: rgb(90, 185, 131);
}

section .note-callout-example {
    color: rgb(90, 185, 131);
    background-color: rgba(90, 185, 131, 0.1);
}
```
上面的例子，通过`.note-to-mp`指定了文章的字体，通过`h2 strong`单独定义了h2标题下strong的样式，这样可以在标题中通过使用粗体增加了一个边框样式。通过`h2`定义了h2标题的底部线条的宽度和文本颜色。这样配合**Olive Dunk**主题就形成了自己的风格。
### 公众号名片

请参考 https://mp.weixin.qq.com/s/1wYd15Irmv9BPabgp5XMCA


### 设置图片大小

在Obsidian中可以设置图片的大小，语法如下：

```markdown
![[1.jpg|120x80]] 设置图片的宽度和高度
![[1.jpg|120]] 设置图片的宽度，高度按比例缩放
```

NoteToMP插件支持该语法。

### 文件嵌入

文件嵌入是Obsidian一个很有用的功能，可以直接展示其它文件中的段落、章节。在写公众号的时候可以将以前文章的内容引用展示，也可以将该功能当作模板使用。

文件嵌入的语法如下：

```markdown
![[文件名称#章节标题]]
![[文件名称#^段落标记]]
```

在NoteToMP插件中有两种展示文件嵌入内容的样式，一种是引用，也就是Obsidian默认的方式，一种是正文，相当于模板的方式。与模板不同的是，采用嵌入方式内容会跟随被嵌入文件的内容更改。

## 批量发布（Batch Publish）

从 v1.3 起，插件新增“批量发布文章”功能，方便把满足条件的一批文章批量发送到公众号草稿箱以便后续编辑与发布。

如何打开：在命令面板（Ctrl/Cmd+P）中搜索“批量发布文章”，或在插件命令中找到“批量发布文章”。

主要功能：
- 条件筛选：按标签（tag）、文件名关键字、文件夹路径、及 frontmatter 字段进行筛选，支持 AND/OR 逻辑组合（当前为 AND 默认行为）。
- 预览与选择：筛选结果以列表展示，支持单个复选、全选、取消全选，以及鼠标拖拽框选（常规拖拽为添加选择，按 Ctrl/Cmd 拖拽为取消选择）。
- 批量发布：点击“发布选中文章”后会依次调用渲染与上传流程（与单篇发布同一实现），每篇之间有 2s 延迟以降低并发请求风险。发布过程中会显示进度通知并在结束汇总成功/失败数量。

注意事项：
- 批量发布会激活 NotePreview 视图并复用其渲染/上传逻辑，若无法取得 NotePreview，将无法完成发布。
- 单篇发布失败不会中断整体流程，失败项会在结束时统计并提示。
- 为避免误操作，建议先在小范围内测试筛选条件与发布流程再对大量文件执行批量发布。

示例使用场景：
- 你想要把所有标记为 `篆刻` 的文章筛选出来，批量上传到公众号草稿箱并逐条完善后发布。
- 按文件夹 `content/post` 筛选并批量发布该文件夹下的近期文章。

### 详细使用指南（一步步）

1. 打开模态
    - 命令面板（Ctrl/Cmd+P）→ 输入“批量发布文章”，回车打开模态窗口。
2. 设置筛选条件
    - 按标签：在“按标签筛选”中输入标签名（例如 `篆刻`）。
    - 按文件名：输入关键词（例如 `教程`）。
    - 按文件夹：输入路径（例如 `content/post`）。默认值已预填为 `content/post`。
    - 按 frontmatter：目前可通过自定义筛选扩展（未来计划支持更复杂的 frontmatter 表达式）。
3. 回车快速应用
    - 在任一输入框中按回车将立即执行“应用筛选”。
4. 选择文章
    - 使用复选框逐条选择；点击行的任意位置也会切换对应复选框。
    - 使用鼠标拖拽进行框选：不按修饰键时为“添加选择”，按住 Ctrl/Cmd 时为“取消选择”。
    - 支持“全选/取消全选”复选框。
5. 批量发布
    - 点击“发布选中文章”开始发布。发布会按顺序执行并在每篇之间等待 2 秒。
    - 发布过程中会显示进度提示（Notice），发布结束会弹出成功/失败汇总。

### 筛选示例（可参考）
- 筛选有 `篆刻` 标签的文章：在标签输入框输入 `篆刻`，按回车。
- 筛选文件名包含 `教程` 的文章：在文件名输入框输入 `教程`。
- 同时按标签和目录筛选：标签输入 `篆刻`，文件夹输入 `content/post`，按回车。

### 常见问题与故障排查

- 无法发布或没有响应：检查是否已激活 `NotePreview` 视图（插件会在发布前尝试激活）；如果视图打开失败，尝试手动打开插件右侧的预览窗格再重试。
- 部分文章发布失败：失败不会中断整体流程，发布结束时会通知失败数量。点击失败项单独重试发布。
- 图片上传失败或方向错误：插件会自动处理 JPEG 的 EXIF 方向并转换为 PNG，若仍有问题请检查图片是否受损，或在 `开发者工具` 查看日志（节流为 3 秒同一路径）。
- 筛选结果为空：确认筛选条件是否正确（区分目录路径、标签是否存在、关键词是否拼写正确）。可以先留空所有条件查看全部可用文章，然后逐项缩小范围。

### 配置说明（相关设置）

- `defaultCoverPic`：默认封面文件名（默认 `cover.png`），当文章没有 frontmatter 封面与正文首图时使用。
- `galleryNumPic`：Gallery 展开时默认选取的图片数量（可在设置中调整）。
- `batchPublishPresets`：预设筛选模板（可在插件设置中新增常用筛选项）。

### 使用建议与最佳实践

- 先在少量文章上试运行一次批量发布，确认模板、封面与图片上传逻辑满足需求，再对大量文件执行批量发布。
- 如果担心频率限制或网络不稳定，可在代码中调整发布间隔（当前为 2s）或分批次发布以降低失败率。
- 建议为常用筛选条件创建 Preset（设置中），节省重复输入时间。

### 示例：把 database 视图筛选规则映射到模态

如果你使用 Obsidian Dataview 或内置视图创建了如下视图：

```yaml
views:
  - type: table
     name: 表格
     filters:
        and:
          - file.tags.contains("篆刻")
     order:
        - file.name
```

在模态中相当于：标签输入 `篆刻`，排序选择按 `文件名（name）`。

---

如果你还需要我把一张示例截图（标注关键按钮）加入 README，我可以把占位图片生成并放到 `images/` 目录（需要你允许我在本地生成渲染的图片），或者我可以为你准备好截图模板与标注位置说明，方便你手动截屏粘贴。

### 插入SVG图标
https://www.bilibili.com/video/BV15XWVeEEJa/

### Gallery 短代码支持

自 1.x 版本起，插件支持将形如 Hugo/Hexo 风格的短代码：

```
{{<gallery dir="/img/guanzhan/1" figcaption="毕业展"/>}}{{<load-photoswipe>}}
```

在渲染阶段自动展开为若干行图片 WikiLink：

```
![[001.jpg]]
![[002.jpg]]
```

可选参数新增：

`mppickall=1` 选取目录中所有图片（忽略“Gallery 选取图片数”限制）；`mppickall=0` 或缺省时按配置的数量限制。支持写法：`mppickall=1`、`mppickall='1'`、`mppickall="1"`（0 同理）。

示例：

```
{{<gallery dir="/img/guanzhan/1" mppickall=1/>}}{{<load-photoswipe>}}
```

或属性顺序不同、带 figcaption：

```
{{<gallery dir="/img/guanzhan/1" figcaption="毕业展" mppickall=1/>}}{{<load-photoswipe>}}
```

在 `mppickall=1` 情况下，仍保持文件名排序（同原逻辑）。

配置项：

- Gallery 根路径（galleryPrePath）：指向本地实际图片根目录，用于拼接短代码中的 dir 得到真实磁盘路径。
- Gallery 选取图片数（galleryNumPic）：每个 gallery 最多展开前 N 张图片（按文件名排序）。

可在插件设置界面直接修改，无需重启。若希望随机选取或按时间排序，可后续在 issue 中反馈需求。若需要永久“全部图片”效果，可同时将“选取图片数”设为一个足够大的值，或在需要的单个 gallery 上使用 `mppickall=1` 精确控制。

### Gallery 块与 figure 支持

除了带 dir 的短代码，还支持块级：

```
{{<gallery>}}
{{<figure src="/img/a.jpg" caption="说明" >}}
{{<figure link="/img/b.png" caption="说明" >}}
{{</gallery>}}
```

渲染为：

```
![[a.jpg]]
![[b.png]]
```

说明：
- 支持 `src` 或 `link` 属性任选其一。
- `caption` 当前忽略（可后续增强：写入 `![[file|caption]]` 或紧随段落）。
- 去重/排序策略：按出现顺序，文件名原样。

### 自定义行级语法扩展

为提升公众号排版效率，插件内置以下“轻语法”转换（发生在 Markdown 解析前）：

1. 斜体标注：`[fig 一段说明 /]` → `<span style="font-style:italic;...">一段说明</span>`
2. 彩色提示块（只作用当前这一行，不跨行）：
    - `|| 内容` 默认灰底
    - `||r 内容` 棕底白字
    - `||g 内容` 黄绿色背景
    - `||b 内容` 浅灰背景
    - `||y 内容` 浅黄背景

这些语法不会写回原笔记，只影响发布预览。后续可加入：类名替换 + 主题化配置 + caption 支持，欢迎反馈需求。

### 无图片时的默认封面

自动封面选择优先级：
1. frontmatter: cover / image（非空）
2. 正文首图（Markdown 或 WikiLink）
3. Gallery 短代码 / 块展开得到的首图
4. 默认封面 `defaultCoverPic`（设置面板可配置，默认 `cover.png`）

配置说明：
- 若填写文件名（如 `cover.png`），会按当前笔记目录解析并包装为 `![[cover.png]]`。
- 若填写完整 `![[xxx]]` 语法或 `http(s)://` URL，将原样使用。
- 若文件不存在，不会报错（可后续增加存在性提示）。

### Frontmatter 解析回退

如果 Obsidian `metadataCache` 暂未命中（例如首次载入或缓存延迟），插件会手动对首段 `---` YAML 进行轻量行级解析，提取：
- title / author / cover(image)

避免因为缓存未就绪导致标题/作者缺失。若需复杂 YAML（数组、多行字符串）建议等待官方缓存，或后续考虑引入完整 YAML 解析库。

### 摘要、封面裁剪、原文链接等
```yaml
---
标题: 
作者: 孙博士
封面: "![[封面模板.jpeg]]"
摘要: 
封面裁剪: 
原文地址: 
打开评论: true
仅粉丝可评论: true
公众号: 孙博士研究所
样式: MWeb Panic
代码高亮: docco
---
```

视频教程：https://www.bilibili.com/video/BV15XWVeEEmA/

## 4、反馈交流群

**微信群：**
加微信：**Genius35Plus**，备注：**NoteToMP**

## 附：批量发布 - 快速交互速览与截图占位

如果你想把功能教学放到 README 中，这里是推荐的简短速览（已在模态中实现）：

- 回车快速应用：在任一筛选输入框中按回车即可触发“应用筛选”，无需额外点击按钮。
- 鼠标框选：在结果列表中按住鼠标左键并拖拽可以创建选择框，松开后会添加范围内的文章为选中状态。
- Ctrl/Cmd + 拖拽：按住 Ctrl（或 macOS 上的 Cmd/Meta）再拖拽会把框内的文章从当前选择中取消（方便进行批量取消选中）。
- 全选/取消全选：列表顶部提供全选复选框，一键切换所有结果的选择状态。

截图占位：如果你希望我把一张带标注的示例截图放到 `images/`，请回复“可以生成截图”，我会：

1. 在 `images/` 中放置占位文件 `batch-publish-example.png`（示例标注），
2. 在 README 中替换占位为图片预览并附带关键交互标注说明。

如果你更愿意手动截屏，我也可以把一个标注模板（SVG 或说明）发给你，方便手动粘贴到 `images/` 目录。