搭一套自己的公众号写作台：AI润色、实时排版与远程审稿

AI14小时前发布 beixibaobao

3 0 0

前言

写公众号文章时，真正拖慢效率的往往不只是写作。正文完成以后，还要调整字号、行距、代码块、图片说明和主题颜色，再复制到公众号后台检查一遍，稍有改动就要重新排版。

如果还需要同事或客户审稿，流程会更长。发Markdown文件，对方不一定方便打开；发截图，修改意见又很难对应到具体段落；直接把本地地址发出去，对方可能打不开，即使能访问，复制公众号格式时也可能因为缺少HTTPS而失败。

doocs/md把这些环节集中到了一个页面中。左侧编写Markdown，中间实时查看公众号排版效果，右侧调整主题、字体、颜色和代码样式，完成后可以直接复制为公众号格式，减少在后台反复修正排版的时间。

它还提供了AI助手入口，可以接入通义千问等兼容模型，通过自定义指令完成大纲生成、段落扩写、润色、改写和标题建议。AI生成的内容可以直接放回Markdown编辑区继续调整，不需要在多个工具之间来回复制。

本文会从Node.js环境和doocs/md本地部署开始，完成AI接口与写作指令配置。最后再借助 cpolar 将5173端口映射为HTTPS公网地址，并增加固定域名和HttpAuth认证，形成一套从写作、预览到远程审稿的完整流程。

1 项目 doocs/md 介绍

开源项目地址：https://github.com/doocs/md

doocs/md 是一个 GitHub 开源的 Markdown 编辑与排版工具。

核心能力：实时预览、可定制主题与排版细节（字距/行距）、代码高亮、公式/流程图、图片上传与多图床、草稿管理与导出。
AI 助手：润色改写、标题/摘要建议、格式转换等，显著降低内容打磨成本。
公众号复制：支持“复制为公众号格式”，将 Markdown 一键适配到公众号后台，减少二次排版工作量。
适用场景：个人与团队写作、技术文档、公众号图文排版与协作审稿。

2 安装Nodejs环境

2.1 下载Nodejs安装程序

打开Nodejs的官方下载页面，选择v20.19.5(LTS)版本，进行下载：

2.2 安装Nodejs程序

首先，双击执行下载的node-v20.19.5-x64.msi程序，然后点击Next：

接下来，勾选I accept the terms in the license agreement同意许可协议，继续点击Next进行下一步：

接着，选择安装位置（默认该位置即可），点击Next进入下一步：

到自定义设置页面可按需设置，直接默认即可，点击Next进入下一步：

接下来到本地模块的工具的界面，不用勾选，直接点击Next即可：

最后，点击Install进行安装：

安装完成，点击Finish即可：

2.3 验证Nodejs是否安装

电脑按快捷键win + R,在弹出的运行框输入cmd点击确定或者回车，打开cmd窗口（即：命令提示符窗口）,输入如下命令，进行验证nodejs版本：

# 查看node版本
node -v
# 查看npm版本
npm -v

2.4 设置国内淘宝镜像源

为了方便项目依赖下载更快，建议设置国内镜像源以加速下载，在cmd窗口中执行如下命令：

npm config set registry https://registry.npmmirror.com/

然后输入如下命令进行查看：

npm config list

3 下载本地部署doocs/md项目

3.1 将项目下载至本地

打开开源项目地址，然后点击Code展开，然后点击Download ZIP按钮进行下载：

项目地址：https://github.com/doocs/md

# 如果电脑上有安装git,也可以使用git clone命令将项目克隆下来
git clone https://github.com/doocs/md.git

下载步骤可以参考如下图：

3.2 解压doocs/md项目

压缩包下载到本地以后，进行解压(这里使用7-zip进行解压，推荐使用7-zip解压工具，比较好用)：

# 7-zip官网下载地址
https://7-zip.org/download.html

解压步骤参考如下图：

3.3 安装依赖和启动doocs/md项目

进入到md-main的项目目录中，然后在目录地址栏输入cmd回车，即可打开当前项目所在目录的cmd窗口：

输入如下命令，进行项目依赖安装：

pnpm install

安装完成如下图所示：

接下来输入如下命令，启动该项目：

pnpm web dev

启动时可能回提示Nodejs应用通过防火墙的警告，点击允许访问：

启动成功控制台如下图所示：

可以看到，控制台输出了多个访问地址，以ip为localhost的这一条为例,在浏览器中访问测试：

http://localhost:5173/md/

可以看到，成功的访问到了项目！

4 将网站穿透至公网（cpolar穿透篇）

在安装cpolar前，说明一下为什么需要安装cpolar。由于浏览器的安全限制，复制公众号格式的功能需要使用 Clipboard API，而这个 API 只能在安全上下文（HTTPS）或本地环境（localhost）下工作。当我们在局域网或其他网络环境下访问编辑器时，由于不是 HTTPS 协议，复制功能将无法正常使用。

举个具体例子：你在本地部署好网站后，同事通过局域网IP可以正常访问和编辑，但需要复制公众号格式时就会失败，因为局域网使用的是HTTP协议，而复制功能必须要求HTTPS环境。

相比传统的云服务器+域名+SSL方案，cpolar具有零成本启动、配置简单、即开即用等优势，特别适合个人开发者、小团队、内容创作者等需要快速搭建可分享编辑器的用户群体，无需购买服务器和域名，一条命令即可完成内网穿透，大大降低了使用门槛。

4.1 什么是cpolar?

cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并提供一键安装脚本方便部署。

4.2 下载cpolar

打开cpolar官网的下载页面：
点击立即下载 64-bit按钮,下载cpoalr的安装包:

下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:

cpolar version

出现如上版本即代表安装成功!

4.3 注册及登录cpolar web ui管理界面

4.3.1 注册cpolar

访问cpolar官网，点击免费注册按钮，进行账号注册

进入到如下的注册页面进行账号注册：

4.3.2 访问web ui管理界面

注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

http://127.0.0.1:9200

输入刚才注册好的cpolar账号登录即可进入后台页面:

4.4 穿透doocs/md项目的WebUI界面

4.4.1 随机域名方式(免费方案)

随机域名方式适合预算有限的用户。使用此方式时，系统会每隔 24 小时 左右自动更换一次域名地址。对于长期访问的不太友好，但是该方案是免费的，如果您有一定的预算，可以查看大纲4.4.2 的固定域名方式，且访问更稳定。

点击左侧菜单栏的隧道管理，展开进入隧道列表页面，页面下默认会有 2 个隧道：

ssh隧道，指向22端口，tcp协议
website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）

点击website隧道的编辑按钮，填写如下信息：

注意：每个用户创建的隧道显示的公网地址都不一样！

接着，点击左侧菜单的状态菜单，接着点击在线隧道列表菜单按钮，可以看到有2个wechatmd-5173的隧道，一个为http协议,另一个为https协议:

接下来在浏览器中访问wechatmd-5173隧道生成的公网地址（http和https皆可）
这里以https为例：

可以看到报错了，这个报错说明 Vite 的安全策略拦截了请求，因为目标域名 208ce144.r1.cpolar.top 不在允许的访问列表里。

接下来，需要修改项目中的vite.config.js文件。打开md-main项目目录，进入到apps/web目录下，找到vite.config.js文件，右键打开方式选择记事本进行编辑,操作步骤如下图所示：

打开后，在base,的后面，添加如下代码(注意：逗号一定要是英文的)：

  server: {
    allowedHosts: true
  },

添加后参考如下图所示：

代码保存后，访问浏览器进行测试（不用重启项目，vite会自行构建编译）：

可以发现，成功访问到项目啦！

4.4.2 固定域名方式（升级任意套餐皆可）

在官网升级任意套餐即可获得固定二级子域名，推荐升级NasNAS 10M或更高套餐，带宽越大加载访问的速度越快。当然预算有限的客户也可以选择基础的套餐，皆可支持固定二级子域名功能。

好啦，接下来开始固定保留二级子域名教程！

首先，进入官网的预留页面，选择预留菜单，即可看到保留二级子域名项，填写其中的地区、名称、描述（可不填）项，然后点击保留按钮，操作步骤图如下：

列表中显示了一条已保留的二级子域名记录：

地区：显示为China Top。
二级域名：显示为wechatmd。

注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主

接着，进入侧边菜单栏的隧道管理下的隧道列表，可以看到名为wechatmd-5173的隧道，点击编辑按钮进入编辑页面：

修改域名类型为二级子域名，然后填写前面配置好的子域名，点击更新按钮：

来到状态菜单下的在线隧道列表可以看到隧道名称为wechatmd-5173的公网地址已经变更为二级子域名+固定域名主体及后缀的形式了：

这里以https协议做访问测试（加载稍慢，需耐心等待一下）:

访问成功，这样一来，你本地部署的doocs/md项目就支持分享给朋友访问啦！

5 使用doocs/md项目编写公众号文章(实战)

经过前面的部署配置，现在我们已经成功搭建了一个功能强大的AI加持Markdown编辑器。接下来，让我们深入体验这个编辑器的核心功能，包括Markdown转公众号格式、AI智能对话、自定义主题等特性，看看它是如何让我们的创作效率提升10倍的。

5.1 界面布局与基础功能介绍

首先，介绍一下页面的区域和结构：

整个编辑器采用经典的三栏布局设计，分别为：

左侧：Markdown原生编辑区域

这里是我们的主要工作区域，支持完整的Markdown语法
顶部工具栏包含文件、格式、编辑、样式、帮助等菜单
右上角有复制、发布按钮，以及设置按钮（齿轮图标）

左侧主体区域的详细图示可以参考如下图：

中间：实时预览区域

实时显示Markdown转换后的公众号格式效果，所见即所得，编辑时立即看到最终效果
右边顶部工具导航栏，支持复制预览的文章格式，主题定制面板等，发布（暂不可用）
预览区域内左上角可展开查看大纲和跳转
底部状态栏显示文章统计信息（字数、字符数、阅读时间）

中间主体区域的详细图示可以参考如下图：

右侧：主题定制面板

点击设置按钮展开，包含丰富的个性化选项
主题选择：经典、优雅、简洁三种风格
字体设置：无衬线、衬线、等宽字体
字号调节：从更小到更大的五个级别
主题色：11种预设颜色 + 自定义颜色选择
代码块主题：支持多种代码高亮风格
图注格式：多种图片说明显示方式
预览模式：移动端和电脑端
白天模式or暗黑模式

右侧主体区域的详细图示可以参考如下图（截图进行拼接了，定制面板一页显示不全）：

暗黑模式效果图参考如下：

好了，主体页面大概就介绍这么多啦，具体功能可以自行详细挖掘一下！

5.2 Markdown转公众号格式

首先，需要准备一篇Markdown格式的文章，然后将其导入至doocs/md项目中(直接复制粘贴到编辑区域也可以)：

以当前编写的这篇文章为例，如下为Markdown的效果图：

将该文章复制到编辑器中（也可以选择左上角文件>导入.md的方式导入），然后查看其效果图：

觉得怎么样？效果如何，是不是很棒！

接下来，我们把转换成公众号格式的预览效果复制起来，粘贴到公众号查看效果，看看是否和预览的效果一模一样！

首先，点击右上角的复制按钮，点击复制:

复制下来公众号的格式后，打开公众测试平台的公众号发布文章页面,将文章内容粘贴进来，查看效果：

可以发现，是不是一模一样！等于是你在doocs/md项目中简单调整好主题字体等格式后，直接在公众号中设置封面等相关信息就可以直接发布啦，效率简直极大提升！

5.3 AI智能对话与内容生成

在完成了“写作—预览—复制发布”的基础流程后，本节将把AI真正融入写作：我们会打开内置的AI助手面板，配置大模型API，示范如何用指令一键生成大纲、段落与配图文案，并通过“润色/改写/续写/提炼要点”等能力快速打磨内容，最终把AI生成的结果无缝落到Markdown中，形成可直接预览与发布的成稿。

5.3.1 AI助手面板功能介绍

首先，需要打开AI对话框，点击左侧Markdown原生编辑区域的右上角黑色的小按钮：

点击打开后，可以看到如下AI对话框页面：

5.3.2 配置通义千问大模型

首先，需要领取千问百万tokens，来到阿里云百炼官网，点击右上角新用户登录即享每个模型100万免费tokens:

阿里云百炼官网：https://bailian.console.aliyun.com/#/home

领取完成后，接下来进入密钥管理，设置设置千问api密钥：
密钥管理：https://bailian.console.aliyun.com/?spm=a2c4g.11186623.0.0.60907980OAftBf&tab=model#/api-key

点击创建api-key，填写完信息：

然后点击复制按钮：

复制下来格式大概如下：

sk-53207f95f7e44ec18d05669767f649b7

接下来点击AI对话框中的设置图标按钮，进入到AI大模型api配置页面，具体操作如下图：

通义千问-plus模型api地址：

https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions

5.3.3 配置编写Markdown文章的AI指令

为了让通义千问-plus在本项目中发挥最佳效果，建议新增一条“自定义指令”，用于生成/改写更贴近公众号风格的 Markdown。操作：点击 AI 对话框顶部“+”新增指令，名称建议填入公众号化改写（结构化），模板粘贴下方内容即可。

指令模板：

你是公众号写作与排版编辑。请把输入内容整理为层次清晰、易读的 Markdown：
— 标题采用编号结构：二级标题用阿拉伯数字（如“## 1 …、## 2 …”），三级标题按“3.1/3.2/3.3”。
— 仅输出 Markdown 正文（简体中文），不写解释或前后缀。
— 段落短句化（单段≤3行），关键点用列表；必要时用引用 > 提示。
— 保留代码块/链接/图片的原始 Markdown，不修改 URL。
— 用词简洁、信息密度高，避免空话与“AI/免责声明”等无关表述。
若未提供选区内容，请基于标题与上下文先给出合理结构与简短导语。
待处理内容：
{{sel}}

配置好后，回到AI对话的首页，可以看到添加的指令已经成功显示了，点击后，下方的对话框中会自动插入指令模板：

这样，一个AI指令就创建好啦！

5.3.4 使用AI指令进行编写文章

在前面小节中，已经设置好了AI指令，接下来，用配置好的AI指令加上我们自己的白话文询问尝试一下：

写一篇小白入门markdown的教程，必须详细，相关的语法代码块中演示了还需要显示出效果等

点击发送，可以看到AI已经按照markdown格式的要求，给我们输出了一篇文章内容：

生成完成后，点击复制按钮，粘贴到markdown原生编辑区域中，查看效果预览：

可以看到，效果是很不错的：

开头部分：

语法及效果展示：

末尾还贴心的加上了误区和技巧，以及推荐使用的markdown编辑工具：

最后，让其给我一个适合这篇文章的公众号标题，它也是给出了多种风格的标题供我挑选：

稍微做了一下小的主题格式调整，是不是感觉文章就已经挺好看的了：

怎么样，这个doocs/md项目是不是提升了很大的效率！

6 给doocs/md项目添加访问授权验证

在完成公网部署后，我们发现doocs/md项目默认无需登录即可访问，这在家庭或团队环境中可能存在安全隐患。为了确保只有授权用户才能使用我们的编辑器，cpolar提供了便捷的访问授权验证功能。

6.1 为什么需要访问授权？

隐私保护：防止他人随意访问你的创作内容
资源安全：避免AI API密钥被恶意使用
访问控制：确保只有团队成员或指定人员可以使用
成本控制：防止API调用量被恶意消耗

6.2 配置访问授权验证

首先，打开cpolar管理界面，进入隧道管理 → 隧道列表，找到wechatmd-5173隧道，点击编辑按钮：

在编辑页面中，点击高级按钮展开高级配置选项，按照下图进行设置：

在HttpAuth这一栏，输入admin:123456 其中【admin】为你想要设置的账号，中间的冒号是英文的（不是中文），【123456】为想要给admin用户设置的密码

6.3 验证授权效果

重新访问你的公网地址，会发现浏览器弹出登录验证框：

输入刚才设置的用户名和密码，即可正常访问编辑器。这样，你的doocs/md项目就具备了基础的安全防护，既保持了便捷的远程访问能力，又确保了内容与资源的安全。

总结

完成配置以后，doocs/md就不只是一个Markdown编辑器，而是一套更贴近公众号实际发布流程的写作工作台。文章可以在同一个页面中完成编写、预览、主题调整和格式复制，不必频繁切换工具。

AI助手适合处理大纲整理、语句润色、结构重组和标题备选，但不建议把生成结果不经检查直接发布。事实、数据、链接和技术命令仍需人工确认，文章的观点与表达也要保持自己的判断。

通过 cpolar 提供的HTTPS地址，异地设备可以直接打开编辑器，Clipboard API也能在安全上下文中正常工作。这样同事或客户可以查看接近最终发布效果的页面，不必再依赖截图进行审稿。

固定二级子域名适合长期作为团队入口，HttpAuth则可以增加一层基础访问控制。用户名和密码不要使用admin:123456这类示例弱口令，公网地址也不应随意公开。

模型API Key同样需要重点保护。密钥不要出现在公开文章、代码截图和共享文档中；如果曾经完整展示过真实Key，应立即到对应平台撤销并重新生成，避免额度被他人调用。

doocs/md负责把写作与排版集中起来，AI负责缩短内容打磨时间，cpolar负责补上HTTPS访问和远程协作。整套流程跑通后，公众号创作才能真正从“写完再慢慢排”，变成写作、预览、审稿和发布连续完成。

文章版权归作者所有，未经允许请勿转载。