WDTP：一款“三合一”的写作工具和桌面版静态网站生成器

2017 年 2 月 4 日
 SwingCoder

谢谢 Akkuman 和 CoderZh 两位朋友的介绍和推荐，让我得知了 V2EX 这个尊重原创，热爱分享与创造的好网站。我想在此和大家分享一款我刚刚开发完成的软件（目前是内测版，正在不断完善更新），如有不妥，请管理员批评指正并谅解。

WDTP 是一款“三合一”的另类写作工具与桌面 GUI 单机性质的静态网站（博客）生成器，这个项目的主页是：

http://underwaysoft.com/works/wdtp/index.html

WDTP 昨天首发于国内的凯迪论坛，我将原帖复制粘贴在此吧。

WDTP ：源于凯迪论坛的又一款写作利器

2016 年年初，我在凯迪论坛看帖的时候，意外地发现了一座高楼，所讨论的话题是我前几年很感兴趣的。于是开始关注，时不时也掺和几句，然后就和几位骨干帖友混了个脸熟——其中一位是陈坪先生。有天我去拜访他的博客，浏览文章的时候突然冒出一个 idea ，可能更像是一些自我觉察，大致如下：

诸如此类。相信其他一大批小众也会有这些想法。说实话，以上这些真心不好用，尤其是学习与使用成本，还有使用时的心情，数据的随时检视、备份、管理与迁移，远程修改、调试与刷新等等。很折磨人。它们或许非常适合更广泛的一大批用户，某些情况下肯定也是非用不可，但很多时候确实不再适合我，也没必要时时动用这些怪兽级的庞然大物。

更进一步，笔记、写书、博客、网站这几件看似互相割裂的事，其实完全可以也早就应该简简单单、清清爽爽地合而为一了。而写作时，“内容与样式分离、样式与模板分离”等程序员最熟悉的理念与常规做法，这么多年以来，我为什么没有在自己的文字写作过程中更深入地理解和贯彻呢？有点不应该。

想法中还包括了其他。比如：“静态网站生成器（ Static Site Generator ）”，这东西近两年在喜欢尝鲜的技术类博主中很受推崇。有媒体放言：“下一批互联网大事件中，新型的静态网页及其生成将位列其中”……据我所知，这类程序目前至少上百，采用了各种各样的编程语言，它们中比较知名的有： Jeklly 、 Hugo 、 Hexo 、 Octopress 、 Pelican 、 Hyde 等等。尤其是 Jekyll ，背靠 Github 这棵大树，几乎一夜之间风靡全球。我对此做了一些肤浅的调查，一个匪夷所思的事实是：就我所接触到的“对口者”，竟无一例外——清一色的命令行程序！没有 GUI ，没有文本编辑器与可视化的 TreeView ，有的居然还要安装整个语言环境或依赖库。动辄百兆以上，太让人愤慨了。大不说，还麻烦。无论获取、安装，还是设置、使用，都不直观，也不方便，对一般人来说门槛有点高。这就势必将更广泛的用户群（比如普通的写作者）排斥在外，使他们很难享受到文本标记语法、内容 /样式分离、高自由度和灵活随意的静态博客等另类而好玩的写作 /分享模式。

既然尚无，那迟早就会有人下手，不妨等等，于是我就把这个事搁置了。此期间，我曾加入一个推广某静态生成器的国内群，也在 Stack Overflow 上转了转，四下打探一番，无果。有人曾抱怨过，但最终也是不了了之。

浏览陈坪先生的文章时，以上想法突然变得强烈起来。我琢磨了一下，这个事技术含量虽不高，但并不轻巧。脏活总是让同行包揽始终让人过意不去，干脆我自己趟一次浑水，再造个轮子吧：写一款跨平台且简洁清爽的桌面版静态网页生成器，顺便糅合上面提到的那几个功能，尽量将它们捏到一起，争取做的轻巧点、优雅点，先把基础和架子搭起来，后续事务和细化处理慢慢再捯饬。

琢磨的七七八八后，就立项动工了。关于编程语言的选择，脚本不考虑，平台相关的谢绝，数据库滚蛋。这么一来，似乎只有 Java 或 C++了。 Java 一贯不是我篮子里的菜，就 C++吧。

然后……然后就是今天 WDTP 内测版的首发，地点就在凯迪论坛的猫眼看人版块。可能有点唐突违和，请允许我解释一下：一方面这个程序的诞生确实与凯迪有直接的关系；另一方面此处风云际会、藏龙卧虎，能写、会写、喜欢写的人非常多，给这批笔友提供另一件顺手的写作工具应该是一件有意思的事。此外，似乎还没有哪位同行在这样的大杂烩论坛里做过这种类型的“主播”。这事有挑战性，风险并不小。但我想试试。

产品的首发式上，一般都会真真假假、虚虚实实地谈谈愿景、希望什么的。我这会儿有点忐忑，不敢满口火车。现在最大的希望是：值班编辑此刻心情不错，不删改这个贴，也不打算将它转移到凯迪的其他版块里。

关于程序的授权方式和性质， GPL v3 ，开源免费。不光凯迪的网友，全世界任何个人和组织都可以随意使用、传播、解剖源码或 PR 贡献，也接受来自任何方面的捐助。这些没什么需要多解释的。该有的，《授权协议》里都提到了，不够我再加几条：）

项目开工后，中间曾停工 3 个多月。 2016 年我周围发生了几件悲伤的事，让人心碎，这几乎导致了项目的夭折。费了很大劲我才将自己振作起来，硬挺着把 WDTP 的第一个版本敲了出来。活干得如何，横竖不论，交给诸位评说。目前 Bugs 肯定一堆，代码急需规整，很多细节也亟待完善。我实在不好意思说自己是一个敲了整整 30 年代码的老一代苦逼程序员——面老色衰，人狗远之。大江东去，属于我们的时代过去了……滚出这个行业之前，尽力散发点余温吧。希望热情还在，理想还在，更希望能听到真实而有价值的反馈与意见，以及各位同行的 PR 提交、无私贡献。

可能有人对大部分开源软件的维护更新感到不放心。我在此表个态吧：未来很长一段时间内，我可能每天都要用它，而且是重度使用。无论作为设计人、开发者、项目的第一责任人，还是作为用户之一，我肯定不愿意为了它而过分难堪或郁闷，更不会让它在七歪八扭、一团乱麻的失控状态下无果而终。

关于 WDTP ，还有几个必须要感谢的人——期待未来会更多，以后有机会一定专门提及。

That's it. 谢谢所有看了此贴的人，谢谢即将成为 WDTP 用户的每一个人，谢谢陈坪先生和那个高楼长贴，以及该贴中所有让我感到温馨的人。

今日立春，使用愉快！

SwingCoder 2017.02.03 于凯迪论坛

本文已发布在凯迪论坛的猫眼看人版块： http://club.kdnet.net/dispbbs.asp?id=12102372&boardid=1

欢迎大家下载试用并提出宝贵意见！

谢谢！

SwingCoder

35276 次点击
所在节点    分享创造
651 条回复
SwingCoder
2017 年 3 月 5 日
插入音频后，网页中所显示的实际效果请参见 WDTP 示例页：
http://underwaysoft.com/works/wdtp/mdDemo.html#插入音频

依浏览器厂牌及版本的不同，音频播放组件的外观或许有较大差异。

注：浏览器需支持 html 5 。
SwingCoder
2017 年 3 月 5 日
- （重大）新增：专业级数字音频及 DSP 处理的底层架构。
TheKiteRunner
2017 年 3 月 5 日
哇，那个音频是您编曲演奏的？！听起来不错！
SwingCoder
2017 年 3 月 5 日
- 实现：弹出模态对话框，设置音频驱动（系统菜单-设置音频驱动）。支持包括 ASIO 在内的所有平台下的主流音频驱动。可直接设置硬件缓冲区大小，延迟时间最小可达 1 毫秒。
TheKiteRunner
2017 年 3 月 5 日
居然是😭数字音乐方面耕耘多年的专业人士啊，赞一个，当时跟您自我介绍的时候说自己有读书笔记习惯，现在想起来真想找个缝挤进去。对了，请问您的思维导图工具是，那种辐射状紧密排布的导图挺有意思。
SwingCoder
2017 年 3 月 5 日
@TheKiteRunner 先生，谢谢您的肯定。是的，音频示例是我 2002 年的时候即兴弹的一小段 solo 。当时身边一个关系很好的藏族朋友离开了，心里很难受。有天在棚子里调试设备时，走了这么一段，刚好设备开着，无意间录了下来。后来配上了其它声部，简单混了一版。
SwingCoder
2017 年 3 月 5 日
谢谢 @TheKiteRunner 先生的鼓励。您过谦了：）我用过好几款画思维导图的软件，顺手的还真不多。如果不是太忙，我都想自己弄一个。 2012 年的时候，我设计过一个软件叫“思维树”，极大地扩展了传统的思维导图。可惜由于事情多，最后没有开始编码。

您说的那个排列比较紧密的，可能是 SimpleMind+，是我原来在 iPad 上常用的一个画导图的 app ，很简单，功能不多。这个软件也有 macOS 版的，好像也有 Windows 版本的。
SwingCoder
2017 年 3 月 5 日
对了，如果情况乐观， WDTP 可能会加上简单而另类的“画导图、流程图、思维树”等功能。不过我还没有仔细考虑过，只是模模糊糊有一点想法。

思维树是我在传统思维导图基础上做的一点扩展。传统的导图太发散，适应面看起来很宽，实则窄了。树状则不同，它更明确。更符合人类考虑问题的习惯与大脑神经运作的数学模型。这棵树有根系、主干、枝干、枝叶。最重要的：它有果实。果实“采摘”后，可以种植并成长为另一棵树……它们有继承与复用等特点，就像面向对象编程领域的“继承、封装与多态”……

简单说，就是一棵棵苹果树的样子：）
TheKiteRunner
2017 年 3 月 5 日
哈哈，画导图，这样的么～

```map
0
1
1.1
1.2
2
2.1
2.2
```

上面的话，基本的流程图就可以了，看起来还不错哈～

目前市面上大多数思维导图，以图形界面编辑为主，大纲界面为辅，大纲界面就和上面的文本结构差不多。但大纲模式一般比较差，针对这个补充的有一个大纲列表工具[幕布]( https://mubu.com/list)。

这种单中心辐射的大纲模式似乎就是您说的树。只是对于一个森林来说，除了一棵树，有时候应该有很多树，从不同的根长出来。找思路的时候，不就是希望一定程度上跳出原来的文本内容和逻辑框架对吧。

比较好的思维导图工具往往太“重”，比如我最喜欢用 mindmanager 。我们往往是突然思路遇阻，希望快速找到灵感，或者将脑袋里面的模糊印象现实化。这时候半天才打开一个工具，然后新建，建完之后再保存，还得考虑把导图保存下来或者截图到一个编辑器里面做一点说明，切换成本还挺高。

这些工具之所以重，我觉得就是功能太多。思维导图可能还是用专门的工具弄好一些，尤其是 wdtp 本来就 N 合一～当然如果能够用极简的思路，厘清一个完整的写作逻辑，并且保证一定的用户体验，那就极好啦。

对了，市面上还有这两种用法：

流程图？

```flow

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

甘特图？

```gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2016-07-05 , 5d
详细设计 :2016-07-08, 10d
section 发布验收
发布: 2d
验收: 3d
```

似乎都挺有意思，但我没有用过～ 2333 ，我感觉我想的那个 map 还挺好的～～～
TheKiteRunner
2017 年 3 月 5 日
无语，居然变形了～

最后的那个就是： https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#9-甘特图
TheKiteRunner
2017 年 3 月 5 日
map 那个是：然后代码框包裹，
0
1
1.1
1.2
2
2.1
2.2

我感觉这样基本的思维导图渲染还不错的～～～
TheKiteRunner
2017 年 3 月 5 日
主要是思维导图有时候得跳离文本摆脱已有逻辑的约束，写作的话则如您所说主要呈线性，两个不太好结合在一个软件里面吧。倒是有一个软件「幕布」，它和一般的思维导图模式相反：编辑 界面为大纲列表，可以显示为思维导图。我感觉，思维导图
TheKiteRunner
2017 年 3 月 5 日
评论不能删除，最后一条浏览器 bug ，不好意思
SwingCoder
2017 年 3 月 5 日
谢谢 @TheKiteRunner 先生。您的讨论对我启发很大！

确实，用文本的形式体现图形和图示，本身有不可调和的矛盾处，渲染的结果、操作效率和灵活性也很难兼顾。特别是不同的浏览器对 html 5 新增的绘制方面的相关功能，理解与实现也不一致。

这个方面，所见即所得技术确实有得天独厚的优势。

另一个思路就是 WDTP 加入一个新模块，本机作图，随时可以内部转换为图像，贴到文本中。这个工作量不小，相当于全新架构和设计一款新软件了。或者用 JavaScript 技术，写一个类似于 MathJax 这样的图形解析库。后者更有意义。也可能已经有团队开始干了。
TheKiteRunner
2017 年 3 月 6 日
simplemind+的确是一个不错的产品：

- 做事的时候，有时候贪心希望充分利用空间，刚好它的自由布局比较紧致

- 可以插入 pdf 链接，从而定位到具体页面，这一点太适合回顾文献了。

*******

- 对应的， wdtp 的编辑窗口只能够以小窗口显示，虽然如您所说比较“科学”，但可视窗口上内容太少，即不便于回顾，与此同时需要频繁使用滚轮。

- 另外， wdtp 的图片文件是不是不能放在文档所在文件夹，提示「 无需导入本项目内部的图片」

- 列表模式有点不习惯，个人比较习惯：
- 三层列表，两层关系往往不够，对我来说，第二层是标签，第三层是描述；
-，+，*均可作为无编号列表的标识符，个人一般分别对应三个级别；
- 数字作为有序列表。

- 最后一个建议，打开编辑窗口，会默认出现#提示输入标题。
- 那么讲道理，既然文档名称已经默认为日期，右侧栏也默认标题=文档名称，何不默认为#日期。至少编辑窗口的标题应该等于右侧栏的标题对吧。
- 否则，何不干脆不默认出现#。

以上建议仅作参考，感谢。
SwingCoder
2017 年 3 月 7 日
实现：声音记录（录音）功能。该功能对 WDTP 来说是一个标志性事件。详情：

- 文本编辑器中右键菜单，点击“录音”菜单项（快捷键“ Ctrl + W ”）。
- 弹出“录音”对话框。此时自动开始录音。对话框中部将实时显示所录制的波形（高精度）。
- 随时可点击停止按钮。
- 停止录音后，可播放试听。试听时，播放指针开始走动。点击或拖拽可实时改变其播放位置。
- 如不满意，可删掉后重录（点击“话筒”图标）。
- 如对本次录音满意，点击“对号”按钮。点击后，录音对话框关闭，文本编辑器中将自动插入已经录制完成的音频文件。


- **注 1**：考虑到 WDTP 的网页生成特色与主流浏览器对 html 5 音频规范的支持现状，目前暂使用遵循 LGPL 开源协议的 Lame 编码器对录制后的音频数据进行 MP3 压缩转换。 Lame 编码器需位于操作系统“文档（文稿）”目录下。可在 WDTP 下载页下载对应平台下的 Lame 编码器。

- **注 2**： WDTP 的录音模块是一个简化版的全功能专业级 GUI 数字音频录制程序。在本机音频硬件支持的前提下，可使用 ASIO 等所有专业级 /主流音频驱动，底层音频处理采用 64 位双精度浮点格式，最高支持 192Khz 采样率，最低延迟可达 1 毫秒（系统菜单-设置音频驱动），音质与长时间工作的恒稳性符合目前世界上最严苛的工业级（广电级）标准。 64 位程序，可突破单次录音的数据大小不能超过 4GB 的限制。

- **注 3**： Lame 并不是这个世界上最优秀的 MP3 数字音频压缩编码器。此外，出于各种兼顾的原因， WDTP 目前暂时采用中低品质的 MP3 VBR 压缩编码设置。以上两点，对原始音质有较大破坏。

- **注 4**：录音模块的 GUI 设计侧重于触摸屏操作。设计原则：简洁、直观、高效。
SwingCoder
2017 年 3 月 7 日
@TheKiteRunner 先生，谢谢您的建议。

WDTP 在宽屏和安静模式下，都允许用户调整主窗口大小。左右侧的两个面板，也可以调整其宽度。如果宽屏模式下您感觉编辑区太窄，最可能的原因是：您的显示器分辨率设置的太低，或者需要一个更大的显示器。就目前的主流显示器来说，窗口最大化之后，编辑区已经太宽了。

主界面布局的代码位于： MainComponent.cpp, Line 56~74 ，您可以按自己的需求调整并改写。主界面布局使用了比较另类的 stretched layout 技术，设置 layout 管理器的语句在该类的构造函数中。

项目内部的媒体文件，直接使用相对路径即可。普通的对话框式插入，会将所选的文件复制到项目中。因为 WDTP 有网站生成与管理功能，为防止产生不必要的冗余数据和完全相同的重复数据，这方面做了控制。

列表限制在 2 层以内的原因我在《快速上手》这个文档中做了一点解释。还有其他一些原因……我个人很反感嵌套超过 2 层的文档，这方面同样做了严格限制。如果您感觉 2 层不够，可使用此方面原本不复杂的 html 代码，或者改写 Markdown 解析模块的 Md2Html::orderedListParse(...)，文件： MD2Html.cpp ， Line 623~680 。有序列表和无序列表的解析都在这一个方法中。 WDTP 的 Markdown 解析是我自己写的，所有解析都是静态方法。 Md2Html 是结构体，没有任何成员数据。

传统的 Markdown 在无序列表方面的标记太多、太乱。对任何计算机语言（语法）来说，这不是好的标准和做法。我对此做了简化和规范。“-”是无序（表示去掉序号，无序号的意思），“+”是有序（代表序号的递增）。如果您打算使用传统的 Markdown 解析，可改写上面给出的那个静态方法。

新建文档后，自动给出一级标题的 Markdown 标记，这样方便用户少敲两下键盘（特别是触摸屏弹出的软键盘。因为有些软键盘的#与字母不在一起，要切换）。新建文档时默认给出日期，是方便匆促情况下的灵感记录（新建文档后两下回车，开始写）。日期与文档的内容与标题，是两码事……文档名称与文档内容、内容标题等等，都不是一个概念，我之前解释过……自动添加标题之后，绝大多数用户还是会删掉。对于判断用户想输入什么内容，标题选择什么最贴切，这方面， AI 算法有比较新的研究，但有限制和上下文环境，其数学模型和实际效果目前还不太理想。这方面不太适合 WDTP 所采用。

新建文档时自动添加标题或任何您想要的内容，可改写 DocTreeViewItem::createDoc()， Line 735 ：

thisDoc.appendText ("# " + whateverYouWant...);
SwingCoder
2017 年 3 月 7 日
更新：系统默认的样式表。网页文字采用“类 mac ”的“微”浮雕效果。
SwingCoder
2017 年 3 月 7 日
网页文字“微”浮雕的实际效果可参见项目主页里的各个文档：
http://underwaysoft.com/works/wdtp/index.html

推荐浏览器：
- Safari 10.0 以上
- Chrome 55.0 以上
- IE 11.0 以上
SwingCoder
2017 年 3 月 8 日
•实现：跨项目复制、粘贴功能。操作方法：

◦文件树面板中右击某个文档，弹出的菜单中点击“跨项目复制”。
◦切换到本程序的另一个实例（ WDTP 可同时运行多个程序实例，每个均可加载不同的项目）。
◦在另一个程序实例的文件树面板中右击某个目录，弹出的菜单中点击“跨项目粘贴”。
◦此功能不仅可以复制原文档的全部内容，还包括其所有属性和媒体文件。
◦程序内部会自动处理粘贴时有可能出现的文档 /媒体重名等问题。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/338138

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX