## 更新说明
> [!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默认的方式，一种是正文，相当于模板的方式。与模板不同的是，采用嵌入方式内容会跟随被嵌入文件的内容更改。

### 插入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**

![](images/20240702203745.jpg)