公众号排版定制化开发
最近经常看到读者评论说我的「浮之静」公众号阅读体验舒适,然后私信我是用了什么编辑器。在这里统一说明一下,我没有使用任何第三方编辑器。之前也尝试用过一些,但后来发现不是太丑了,就是很难满足我的特殊排版要求。于是就萌生开发一个专门针对公众号排版的工具。随着不断的优化,它已趋于稳定(比如支持链接脚注,代码高亮,各种提示的内容色块等等)。很可惜它是闭源的,之所以闭源是因为我想让公众号具有独一无二的特色(开源就意味着会被滥用)。
后来我也思考了一下,完全封闭并非我的初衷。我决定写一个付费系列,从零开始,教你搭建专属于自己的公众号排版工具(授人以鱼不如授人以渔)。此系列需要一定的编程基础,如果纯小白用户也是可以根据文章一步步操作。我会在文末放一个群二维码供大家进群交流学习。
这个系列主要涉及以下板块:
开发环境:基础编程入门介绍,即使你是编程小白,也可以逐步上手。这个系列带给你的远不止公众号排版那么简单,我希望此教程可以让你爱上编程。
本地编辑:在本地编写 markdown 文章,然后将其转换为公众号格式排版。
线上编辑:随着内容增多,资源文件管理,多设配同步会越来越麻烦,如何打造一个线上编辑环境就显得尤为重要了。
排版插件:教程教会你的永远只是一小部分内容,我希望学完此系列后,大家都可以定制化开发自己的排版插件,打造真正属于自己的公众号排版格式(比如:各种提示色块,代码块高亮,链接脚注,链接自动生成二维码等等)。
公众号常见问题:在编写插件时,常常会遇到一些奇怪的问题,排版没有任何问题,但在复制到公众号编辑器后,一些格式会莫名丢失。这部分内容也会结合我的一些踩坑经验,给到大家一些解决办法。
此系列会分多篇内容来讲解,未来也会不定期更新一些别的东西(总之干货满满)。
准备工作
😅 温馨提示请仔细阅读此文,它是一切开发工作的前提。如果准备工作无法搞定,不建议购买此教程。整个系列会在接下来的时间陆续放出(至少会发布 5 篇内容)。
安装开发环境
这里需要具备一些基本的 Web 编程基础(整个工具会基于 Node.js 环境来运行)。当然如果完全零基础也没有关系,你可以根据教程一步步来。
安装 Node.js
Node.js[1] 是一个开源、跨平台的 JavaScript 运行环境,允许开发者使用 JavaScript 来编写服务器端的程序。它基于 Google Chrome 的 V8 JavaScript 引擎,并具有一套丰富的 JavaScript 库。
可以实现以下功能(仅列举部分):
创建 Web 服务器: 可以快速构建高性能的 Web 服务器。
异步编程: 支持非阻塞的 I/O 操作,使得在等待数据时可以同时处理其他任务,从而提高效率。
网络应用开发: 支持构建各种网络应用,如 API 服务器、即时通讯应用等。
访问数据库: 可以和许多流行的数据库进行交互,如 MongoDB、MySQL 等。
直接去官网下载安装即可,不同操作系统的安装略有不同,也可以在浏览器搜索 Node.js 安装教程,这类文章视频很多,随便点开一个看看即可(例如:菜鸟教程 - Node.js 安装配置[2])。
安装完 Node.js 之后,打开命令行,输入以下命令,如果正常输出版本号(v18.17.0
),则证明安装成功。
node -v
常用命令有:
node -h
获取命令帮助node -v
获取 node 版本号
📌 NPMnpm 主要用于 Node.js 项目的依赖管理和自动化任务。它有助于开发者快速地构建和维护项目,确保代码的可维护性和可重用性。
NPM[3] 是随同 Node.js 一起安装的包管理工具,在安装完 Node.js 之后,你就可以使用
npm
命令来安装各种软件依赖包了。npm(Node Package Manager)是 Node.js 的包管理器,用于管理项目中的依赖库和工具。npm 提供了一种简便的方式来安装、更新和管理软件包(或称为模块)以及它们之间的依赖关系(除了看官方文档外,还可参考 菜鸟教程 - NPM 使用介绍[4])。
软件包安装: 通过 npm,你可以方便地安装和管理数以万计的可重用代码包。这些包可以是工具库、框架、插件等。
依赖管理: npm 允许你在项目中声明和管理依赖。当你安装一个包时,npm 会自动处理该包所依赖的其他包,确保所有必需的代码都被正确安装。
版本控制: 你可以指定软件包的特定版本或使用版本范围,以确保项目中使用的代码的一致性和稳定性。
全局和本地安装: npm 支持全局安装和本地安装。全局安装的包通常是命令行工具,可以在系统的任何地方使用。本地安装的包则是特定于单个项目的。
脚本运行: 你可以使用 npm 来运行定义在
package.json
文件中的脚本。这些脚本可以用于构建、测试、自动化等任务。私有仓库和组织: 对于商业用户,npm 还提供了私有仓库和组织管理功能,使得团队能够更好地协作和共享代码。
例如,如果你想在项目中使用 React,只需运行以下命令:
npm install react
npm 会自动下载 React 及其依赖,并将它们保存在项目的
node_modules
目录中。通过package.json
文件,你还可以定义项目的元数据、依赖关系、脚本等。npm 是现代 JavaScript 和 Node.js 开发中的关键工具,使项目结构更清晰,协同工作更容易。
安装 Git
Git[5] 是一个分布式版本控制系统,用于跟踪在软件开发过程中对文件(尤其是源代码)的更改。它由 Linux 的创造者 Linus Torvalds 开发。
有以下功能(仅列举部分):
版本控制: 可以记录文件的修改历史,方便追溯、对比和还原不同版本。
多人协作: 通过分支管理,多人可以同时在项目上工作,然后将更改合并到一起。
代码备份: 可以将代码存储在远程仓库,如 GitHub,增加代码的安全性。
问题追踪: 与项目管理工具集成,可以方便地追踪问题、任务和进度。
也是直接去官网下载即可,不同操作系统的安装略有不同(例如:菜鸟教程 - Git 安装配置[6])。
安装 VSCode
Visual Studio Code[7] (VSCode)是一款由微软开发的免费、开源的代码编辑器。它提供了许多强大的功能,使得开发者可以更高效地编写和调试代码。以下是关于 VSCode 的一些特点:
跨平台: VSCode 可以在 Windows、macOS 和 Linux 等主要操作系统上运行。
语言支持: 支持多种编程语言,如 JavaScript、TypeScript、Python、Java、C++ 等,通过安装扩展插件,支持更多的编程语言和框架。
代码高亮和智能提示: VSCode 提供了语法高亮、代码自动补全、重构和智能感知等功能,大大提高了编程效率。
Git 集成: VSCode 与 Git 完美集成,可以在编辑器内进行版本控制操作,如提交、拉取、推送等。
调试支持: 提供了强大的调试功能,允许开发者设置断点、检查变量值、单步执行代码等,有助于快速定位和解决问题。
扩展插件系统: 具有丰富的插件市场,开发者可以根据需要安装各种扩展插件,以增强编辑器的功能。
可定制性: 用户可以自定义主题、字体、快捷键等,打造个人化的开发环境。
终端集成: 内置了命令行终端,可以直接在编辑器中运行 Shell 命令,方便进行构建、测试和运行应用。
Node.js 脚本
Node.js 脚本是用 JavaScript 语言编写,并在 Node.js 环境下运行的脚本文件。这些脚本可以访问操作系统的底层功能,进行文件操作、网络通信等任务。
安装完开发环境后,就可以开始进入我们今天的主题了,在这里是通过编写 Node.js 脚本来实现我们想要的功能(当然,如果你学会了这部分内容,未来还可以深入学习,做更多自动化任务)。
可以实现以下功能(仅列举部分):
自动化任务: 可以编写脚本来自动执行一些重复的任务,如文件备份、数据处理等。
开发工具: 可以编写构建工具,进行代码编译、压缩、测试等任务。
服务器端应用: 通过编写 Node.js 脚本,你可以开发服务器端的应用逻辑,如处理 HTTP 请求、与数据库交互等。
结合 Node.js、git 和 Node.js 脚本,你可以构建完整的现代化 Web 开发工作流程。从代码编写、版本控制到部署,它们共同提供了一个强大和灵活的工具集(脚本可以高效地帮你处理任何可以被流程化的任务,所以它是真正的生产力)。