415 lines
14 KiB
Markdown
415 lines
14 KiB
Markdown
## 更新说明
|
||
> [!IMPORTANT]
|
||
> NoteToMP 1.3.0版本对主题进行了优化，升级后请先清理旧版本主题文件，再重新下载新版主题。
|
||
>
|
||
> 操作步骤：在NoteToMP插件设置中，先点击『清空主题-清空』，然后点击『获取更多主题-下载』
|
||
>
|
||
> 注意：如果修改过主题文件请做备份后再操作。
|
||
|
||
## 1、简介
|
||
|
||
这是一个Obsidian插件，针对微信公众号编缉器进行了优化，通过本插件复制笔记可以把笔记样式同步到公众号编缉器，轻轻松松搞定文章格式，一劳永逸，而且支持代码高亮、代码行数显示、主题背景颜色等。针对微信公众号不能放链接也专门处理了，提供直接展示链接地址和文末脚注展示两种方式。本项目初衷仅是为了能够将Obsidian中笔记的样式完美同步到微信公众号的编辑器中，因此项目重点在于保证文章格式的一致性，而不是成为一个微信公众号编辑器。
|
||
|
||
|
||
|
||
## 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左侧工具栏中的图标
|
||
或者按`Ctrl+P`打开命令，搜索**复制到公众号**。
|
||
|
||
检查样式无误后，点击**复制**按钮，然后到公众号粘贴即可。
|
||
|
||
|
||
|
||
**★ 公众号**
|
||
插件支持多公众号，在下拉菜单中进行不同公众号的切换。该功能需要订阅才能使用。
|
||
|
||
**★ 复制**
|
||
检查样式无误后，点击**复制**按钮，然后到公众号编辑器粘贴即可。
|
||
|
||
**★ 上传图片**
|
||
点击上传图片会将文章中的本地图片上传到微信公众号，同时会替换预览中的图片地址，而您原始文章中的图片地址不会替换。上传图片完成之后，此时点击“复制”，然后到微信公众号编缉器中粘贴就可以把图片带过去了。该功能需要订阅才能使用。
|
||
|
||
**★ 发草稿**
|
||
点击发草稿会上传文章中的本地图片，并且将文章发送到公众号的草稿箱，省去粘贴步骤。在文章正式发布之前还有一些选项需要您设置，比如文章摘要等。考虑到安全性，插件暂不提供直接发布功能。该功能需要订阅才能使用。
|
||
|
||
**★ 刷新**
|
||
如果笔记内容更新了，但是预览没有更新，可以点击一下刷新按钮。
|
||
|
||
**★ 封面**
|
||
发草稿必须设置文章封面，使用默认封面，是从您的永久素材中选取最近使用的作为封面，您需要在发布文章之前重新设置一下。本地上传则需要你选取一张本地图片作为封面。
|
||
|
||
**★ 样式**
|
||
可以选取笔记的样式，目前有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]]
|
||
```
|
||
|
||
配置项：
|
||
|
||
- Gallery 根路径（galleryPrePath）：指向本地实际图片根目录，用于拼接短代码中的 dir 得到真实磁盘路径。
|
||
- Gallery 选取图片数（galleryNumPic）：每个 gallery 最多展开前 N 张图片（按文件名排序）。
|
||
|
||
可在插件设置界面直接修改，无需重启。若希望随机选取或按时间排序，可后续在 issue 中反馈需求。
|
||
|
||
### 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 解析库。
|
||
|
||
### 调试日志
|
||
|
||
在控制台（开发者工具）可看到：
|
||
```
|
||
[note2mp] active file path: your/file/path.md
|
||
[note2mp] use default cover: cover.png -> ![[cover.png]]
|
||
```
|
||
路径日志做了节流：同一文件 3 秒内不重复打印。后续可加“调试开关”以完全关闭。
|
||
|
||
### 摘要、封面裁剪、原文链接等
|
||
```yaml
|
||
---
|
||
标题:
|
||
作者: 孙博士
|
||
封面: "![[封面模板.jpeg]]"
|
||
摘要:
|
||
封面裁剪:
|
||
原文地址:
|
||
打开评论: true
|
||
仅粉丝可评论: true
|
||
公众号: 孙博士研究所
|
||
样式: MWeb Panic
|
||
代码高亮: docco
|
||
---
|
||
```
|
||
|
||
视频教程：https://www.bilibili.com/video/BV15XWVeEEmA/
|
||
|
||
## 4、反馈交流群
|
||
|
||
**微信群：**
|
||
加微信：**Genius35Plus**，备注：**NoteToMP**
|
||
|
||
 |