Haku – 7 Jun 26 石油障碍症 | Haku 林嘉乐从来没有见过真的石油。尽管她的生活已经被石油从头渗透到脚，她依然与这黑色黄金没有谋面的缘分。这也无关紧要。对于嘉乐，适当的无知反而是更理智的选择。她也常常想，如果什么都不知道，那就等于什么都没发生。这种逃跑的方式到底是否有效，不会有人知道了，但在它出问题以前嘉乐是不会放手的 … 林嘉乐从来没有见过真的石油。尽管她的生活已经被石油从头渗透到脚，她依然与这黑色黄金没有谋面的缘分。这也无关紧要。对于嘉乐，适当的无知反而是更理智的选择。她也常常想，如果什么都不知道，那就等于什么都没发生。这种逃跑的方式到底是否有效，不会有人知道了，但在它出问题以前嘉乐是不会放手的。 但嘉乐也不会蠢到学海鸥，去撞石油泄漏的事故现场。她见过新闻里的图片，墨西哥湾的黑水不比十年没洗的地毯干净多少，如果她也被石油浇遍的话，肯定很狼狈，想想都有点胆寒。但除此之外，石油只是一个遥远的名词，当谈到石油时，嘉乐的大脑里首先是钢蓝色的油桶，接着是衡量一个国家石油工业发展水平的乙烯，然后才是黑漆漆的内容物。至于其他的，一点都不重要。“一桶石油的标准体积是 158.98 升”，这种事情毫无乐趣可言，还是丢给科学家和政客们担心吧。 不过，即使从不担心——或者是厌恶了担心——石油的问题，嘉乐也绝不像其他人一样，幻想着石油供应能够瞬间回暖，或者是独独为自己开绿灯。眼下看来，石油短缺影响的仅仅是点外卖和阿司匹林，这影响实在微不足道，眼睛涣散开就消失了。这也难怪，嘉乐从小就不觉得全球变暖跟自己有什么关系，今天区区的全球性石油危机，对自己更是云淡风轻。可能也正是这种轻描淡写的态度，嘉乐对于身边人煞有介事地描述石油，总是置之一笑，反正不是她一个人能够解决的，当成笑话听总比叫它硌着自己、让人寝食难安要舒服得多。 嘉乐的思想虽然常不被人所容，但只要她乖乖地闭上嘴，就没有人会想到跟她打听石油的情报。在这样的条件下，汽油——哪一号都好——每升单价先突破 9 元，再突破 9.5 元，又有什么关系？当然，她不知道的事，她不能像以前一样随心所欲地开着冷气机了。阶梯电价仍然在节节攀升，相比起她出生的那一年，即使结合起通货膨胀，这水涨船高的电价还是让人一阵恶寒。只要她仔细地感受，用心观察，而不是用她处处飘着散光的眼睛，就会发现地球变暖就在手边，跳一下就会撞得头破血流。热就热吧，虽然时有抱怨，也没有差到让人活不下去，像是把门开来关去之后，甚至不需要为门铰链的生锈负任何责任。每当嘉乐热得受不了，就去洗洗冷水澡，冷水比冷石油便宜得多。 冷气价格的持续高温还是很使人惊醒的——大概是被烧醒的。迟钝如嘉乐，也不可能不想起以前的日子。她回忆起父亲那台桑塔纳，年纪比她还大两岁。说来也奇怪，想起桑塔纳时，似乎她的前半生都是在车上度过的。每到现在一样的夏天，父亲都要把桑塔纳的四扇门都打开，然后一手撑在左舵的顶梁上，轻轻地喘着气。不喜欢被太阳照着，嘉乐在这种时候总是坐在车里面，等着空气缓缓地降温。现在这种体验已经不可能再有，那辆老桑塔纳在她 18 岁生日的第二天就宣告报废，它现在是不是变成了一辆小小的桑塔纳模型也不可知。 当然，桑塔纳烧的是汽油。石油的日子以前呢？嘉乐以前挺喜欢火车，尤其是那种烧煤炭的蒸汽火车，现在已经很少见，狂热如当年的嘉乐也只见过一次。后来实在没有耐心抽时间去坐一坐这台火车，嘉乐决定走线路上的一道废弃铁路。当时可是十一月，微雨飞得比灰尘慢。出自最后的一点疯狂，嘉乐走完了最后一点铁路。终点是个小站，每天只有两趟火车。管理员对于这位不速之客显得很开心，但听完嘉乐的经历之后就笑不出来了。管理员感叹着：“妹妹你可真扛冻啊，五月来都不用受这活罪。”听了这话，嘉乐也说不清是什么滋味，像是错过了一个时代。自这以后嘉乐没再搭过旧式火车，宁可坐飞机也不愿意坐火车，跟她后来刻意逃开石油如出一辙。 好玩的是，嘉乐再漠不关心石油的问题，都不会改善或者折损她的生活质量，她也不会溶解进石油里，等着被分馏。这是近乎违反自然的各种原理的。但她就是这么过来的，以后还是这么过下去。 1 个帖子 - 1 位参与者 阅读完整话题
Haku – 24 May 26 好玩，大数据杀熟 | Haku 杀熟很常见，它有个更地道的称呼叫做“看人下菜碟”，但是互联网把这“人”，或者连人都不是，的范围扩得好宽好宽啊，甚至有时候奇形怪状的东西在网上爬动，我也不觉得奇怪了，反正林子大了什么鸟都有，何况是互联网这种黑暗森林。在这种环境里，有几百万个投机客蠢蠢欲动，那也再正常不过。反正投机改 … 杀熟很常见，它有个更地道的称呼叫做“看人下菜碟”，但是互联网把这“人”，或者连人都不是，的范围扩得好宽好宽啊，甚至有时候奇形怪状的东西在网上爬动，我也不觉得奇怪了，反正林子大了什么鸟都有，何况是互联网这种黑暗森林。在这种环境里，有几百万个投机客蠢蠢欲动，那也再正常不过。反正投机改变的只是行为：从低买高卖变成了贩卖焦虑；至于本质，那还是没有变。 啊……我倒不是想说某些软件故意给我卖高价的东西，主要还是被大数据逗笑了。 觉得大数据杀熟无所谓的人，那还是有的，我都可以猜到他们脑子里想的什么：“我不相信就好了”。问题是，谁能做到不相信？都上网了还不相信，就像是提起了筷子却不夹菜，光啃白米饭。我们应该用最大的恶意去揣测每一家 SNS 提供商，它给你什么，你就看什么，日积月累，尽管嘴上还是说着不相信，但心里还敢说一点认同都没有？真的不认同，你早把它们删了，也别举什么“批判性食用鱼子酱”跟“批判性驾驶奔驰车”的例子，那种风格咱普通人学不来。 每分钟更新的热搜，这例子够膨胀的吧？一天也就 1,440 分钟，在 86,400 内排 1,440 次序对现代服务器跟喝水一样。这个比喻不大恰当，我还没见过喝水不会暴毙的服务器。但这些简简单单的劳动足够把大部分人的注意力挂上死锁，看够了热搜，天已经黑了又亮了。 也别觉得这点杀熟事不关己，觉得跑到远一点的地方就无所谓了。微博再怎么样面对的只是十几亿人，你要是跑出去看看推特，Threads 之类面对全世界的社交网络，那更是臭得没边，先是筛选 IP 地址：香港 IP 就给你推政治敏感内容；新加坡 IP 就推 Cosplay 擦边；日本 IP 就只有日语内容 [1] ，谁看了都摇头；要是美国西部 IP，那就是自由美利坚。不胜枚举。这些把用户当成副本刷的行为我早就厌烦了，但我特别想要这 GeoIP 的数据库。 再说挂着节点也没那么好，想点什么打算问问 DeepSeek 都容易触发 timeout。 不过也是可惜，DeepSeek 是为数不多不用大数据杀熟的大模型了。去看看隔壁 Gemini，一旦开了记忆功能，什么妖魔鬼怪都跑出来了。现在问它点什么都提 Scoop 跟 LINUX DO ，真是跟裸奔没区别了。AI 突然提起你无意间说过的事，我想我不会觉得温暖，而是发冷汗。 AI 也参与到杀熟中来，对咱普通人是百害无一利的。当然，AI 杀熟还有个更隐蔽的地方：它会根据你的历史对话调整回答的"深度"。问同样的问题，回答也跟 IP 一起变，家宽也逃不脱（我很佩服他们判定 abuse 的能力）。更离谱的是，有些 AI 会根据你的提问习惯，故意把答案拆成好几轮对话，逼着你多问几次，实际上是在刷对话量，好让后台数据更好看。 那都是我花钱买的 tokens 啊…… 有办法吗？没有，靠自己吧，别自暴自弃。突破网络审查的技术原先只是小部分人摸索出来，比较难以大规模传播的“专利技术”，但是互联网低龄化，什么都不懂的小孩子现在也知道了全世界多么脏乱差。被这种普及化毒害的人我也见多了，特别是娱乐圈成瘾者，价值观完全是被大数据扭曲的。 讲了那么多，那还是捏着鼻子回去上网了。 [!QUOTE] 如果你因与人争强斗胜遭到封禁，那么你可能会选择和其他好胜的同道中人一起创建一个博客或论坛，在其中宣扬维基百科是多么大错特错，而自己是如何一贯正确。其他的好胜者会连声赞同，让你对自己自信度爆棚。可能在某个时点上，有一些维基百科编辑者看到了，觉得自己可能能够帮上忙，试图向你解释为什么你是错的。但是，在典型的“胜者”状态下，你只会充耳不闻、掩耳盗铃，坚称自己是对的。尽管这样，你的好胜心并没有让你得到什么。你仍然处于封禁中，其他编辑者/群体仍然在编辑维基百科。这个时候，你开始向他人灌输维基百科是个笑话的观点。我们对此并无所谓，因为你仍然会在维基百科上寻找贾斯汀·比伯的最新热门曲目。 故维基百科才是最后赢家。 —— https://zh.wikipedia.org/wiki/Wikipedia:维基百科不论成败 我们这边常常能看见日本推特涌现出一拨又一拨的强悍人物，事实上就是因为日语推文的推流几乎仅日本境内用户可见。这种封闭性是相当毒害人的。 ↩︎ 2 个帖子 - 2 位参与者 阅读完整话题
Haku – 3 May 26 给 Waline 做自己的通知邮箱！ | Haku 为了一个简简单单的域名邮箱，我花了很久很久。 没有买专业域名邮箱服务的钱，但是发现 Resend 可以自定义发件邮箱，所以简单做个记录，说说用在 Waline 设置评论回复通知的操作。 市面常见的免费邮箱虽然已经够用，但是当需要给自己的服务做收发邮件时，有一个自己域名的邮箱会美观很多。比如我的域名是 karlbaey.top ，我希望我的读者收到评论回复通知时，是来自于 notifications at karlbaey dot top 这个邮箱，就需要自己折腾折腾 Resend 和 Cloudflare。不会太难，设置几个 DNS 记录的事。 要是自购 VPS 而且开了一大堆端口 [1] 而且你前一任租客是个纯良公民拿了 VPS 什么都不干就当我什么都没说，自己拉个 docker 开邮局就行，反正我没有这个折腾的闲心。一个推荐的方案是 Mailu。 叫 Cloudflare 给你自动转发邮件 这至少需要你购买一个域名。免费域名也行，但是要能放在 Cloudflare 上。 在 这个页面 ，就能看到接入域名的提示。 转发到 Gmail 是可选的，转发到 QQ 邮箱也行，因为我们不依赖 Cloudflare 发邮件。然后设置 Cloudflare 的邮箱白名单。 这样其实就好了。但是为了防止 Cloudflare 乱发邮件，还得给特定的邮箱设置转发到 Gmail。比如我的邮箱是 hi at karlbaey dot top （记作邮箱 A），就设置一个。 这样就可以了。下面就是 Resend 那一边的事。 用 Resend 自定义发件邮箱 目前的自定义发件域名服务只有 Resend 一家是免费且额度充足的 [2] ，免费版每天可以发 100 封邮件， 这儿有官网 。跟 Resend 比起来，QQ 邮箱不能绑自定义域名；Gmail 会显示由你的 Gmail 邮箱代发，泄露风险大；Outlook 则是逼着用户开 Microsoft 365。综合考量，Resend 是最佳的选择。 嫌弃发信额度少，就考虑日后换成 Larksuite 也可以，那个一天可以发 450 封邮件，非常慷慨。 先注册一个 Resend，这个很简单，你甚至可以用你的域名邮箱注册。反正上面已经配置好了 Cloudflare 的 catch-all 规则，Resend 的验证邮件会飞到 Gmail 邮箱里边。 注册成功之后就能进入 Dashboard。选择侧栏的 Domains。 如果你照着上面 Cloudflare 配置域名邮件转发的话，下面应该会自动跳出来一个小黄云跟“Auto configure”，点那个就行。一共是 1 条 MX 记录和 3 条 TXT 记录。 在 创建新 API Key 里边 写给 Waline 的 Key，Name 随意填。然后你就能看见 只显示一次 的 Key，把它复制好，下面给 Waline 用。 这样就好了。我用的是 notifications at karlbaey dot top 来发件。 Waline 配置邮件传递 少来了，真以为有人会发评论啊。 Waline 的文档里已经写好了 怎么配置评论通知的环境变量 。我是把 Waline 部署在 Vercel 上的，跳到环境变量（Environment Variables）页面添加就行。下面是一个参考的表格。 变量名 示例值 说明 SMTP_SERVICE Resend 固定填 Resend SMTP_USER resend 固定填 resend SMTP_PASS re_123456789... 你的 Resend API Key SMTP_SECURE true Resend 推荐 SENDER_NAME 你的博客名称 邮件显示的发送者名称 SENDER_EMAIL [email protected] 你用来发信的邮箱 AUTHOR_EMAIL [email protected] 接收通知的管理员邮箱 这样就配置完了。要是你愿意继续折腾可以往下看。 Waline 的邮件模板 我基于 Waline 给的东西 自己魔改了一番，由于它用的是 Nunjunks 模板（不是我熟悉的 Hugo 模板 ），所以可以插入一些条件语法。 重要 ！每一个环境变量都需要压缩成一行之后输入 Vercel。HTML 找个地方压缩就行，压缩后不影响解析。 先是两个邮件标题模板。 # 访客收到博主的回复时，邮件的标题 MAIL_SUBJECT="您在 【{{site.name}}】 的评论收到了 {{self.nick}} 的回复" # 博主收到新评论（或新回复）时，邮件的标题 MAIL_SUBJECT_ADMIN="【{{site.name}}】新评论：{{self.nick}} 的留言" 然后是给访客评论用的 MAIL_TEMPLATE 。 <div style="max-width:600px;margin:0 auto;font-family:Arial,sans-serif;background:#f6f8fa;padding:20px"> <h2 style="color:#24292e">{{site.name}}</h2> <p>您在 <a href="{{site.postUrl}}" style="color:#0366d6">【{{site.name}}】</a> 的评论：</p> <blockquote style="background:#fff;padding:12px;border-left:4px solid #d1d5da;margin:12px 0;white-space:pre-wrap">{{parent.comment | safe}}</blockquote> <p><strong>{{self.nick}}</strong> 回复了您：</p> <blockquote style="background:#fff;padding:12px;border-left:4px solid #2ea44f;margin:12px 0;white-space:pre-wrap">{{self.comment | safe}}</blockquote> <a href="{{site.postUrl}}" style="display:inline-block;padding:8px 16px;background:#0366d6;color:#fff;text-decoration:none;border-radius:6px;margin-top:8px">点击查看详情</a> <p style="color:#586069;font-size:12px;margin-top:24px">此邮件由系统自动发送，请勿直接回复。</p> </div> 还有最后给博主的通知模板 MAIL_TEMPLATE_ADMIN 。 <div style="max-width:600px;margin:0 auto;font-family:Arial,sans-serif;background:#f6f8fa;padding:20px"> <h2 style="color:#4169E1">🔔 新评论通知</h2> <p><strong>评论者：</strong>{{self.nick}}</p> <p><strong>来源：</strong>{{self.os}} · {{self.browser}} {% if parent %} <div style="background:#fff3cd;padding:8px 12px;margin:12px 0;border-left:4px solid #f0ad4e"> <p style="margin:0"><strong>回复给：</strong>{{parent.nick}}</p> <blockquote style="margin:8px 0 0;white-space:pre-wrap;color:#586069">{{parent.comment | safe}}</blockquote> </div> {% endif %} <blockquote style="background:#fff;padding:12px;border-left:4px solid #0366d6;margin:12px 0;white-space:pre-wrap">{{self.comment | safe}}</blockquote> <a href="{{site.postUrl}}" style="display:inline-block;padding:8px 16px;background:#2ea44f;color:#fff;text-decoration:none;border-radius:6px">查看评论</a> <p style="color:#586069;font-size:12px;margin-top:16px">系统自动发送，来自 {{self.os}} · {{self.browser}}</p> </div> 效果图大概是下面这样。我把评论通知推到 QQ 邮箱，没有测试过其他家的样子。配色乱搞的，好奇我怎么配色的参考 这里 。 反正我是看过各种各样花里胡哨的评论提醒，有信封式的、有黑黑绿绿黑客式的，甚至还有一点 CSS 都不会写、把整个版面搞得乱七八糟的。我这个重在简单明了，不考虑那么多七七八八的了，关于我的哲学，感兴趣的看 漫漫长路 去（发稿时只有一篇文 ）。 See Also 【Cloudflare Docs】Enable Email Routing （英文）←本文基于 Cloudflare 的邮件路由文档写成。 包括：25（SMTP）、465（SMTPS）、587（SMTP提交）、143（IMAP）、993（IMAPS）、110（POP3）、995（POP3S）。其中，25 端口（TCP）用于邮件服务器间投递，至关重要且常被 VPS 厂商封锁，需申请解封。此外，如果使用 Web 界面管理邮局，需开放 80（HTTP）和 443（HTTPS）端口。 ↩︎ 其余的就是 AWS SES 这一类服务了，个人没有负担这费用的必要。 ↩︎ 1 个帖子 - 1 位参与者 阅读完整话题
Haku – 26 Apr 26 排版的艺术：一条很长很长的路 | Haku 排版是门技术活，这不用多说。 [!IMPORTANT] 观前提示 我在我的博客里设计了一些排版，在 L 站展示不出来。 本文中为了展示大量的、或好或坏的排版，插入了很多图片。尽管现在的浏览器会聪明地使用懒加载，但我仍然推荐你在 Wi-Fi 环境下阅读，毕竟移动数据是越来越贵了。 还有，如果一边照着本文一边翻 Mozilla 的 CSS 文档，阅读体验会好一些。这儿有 中文版 。 [!NOTE] 号外！ 开了个新坑，就叫做 漫漫长路 ，这里写杂记和思考。 小小的 leading 我的博客经历了若干次重构，从一开始用 Hexo 的 icarus 、 amazing 主题，再到后来看了不少 Hexo 的坏话 [1] ，渐渐地坚定了迁移的决心。然后换到了 Astro，就是那个黑白配色，以排版为主要特色的博客主题（不然它也不会胸有成竹地管自己叫做 Retypeset ）。最后，也就是你看到的这个，是用 Hugo [2] 一点一点打出来的，设计 CSS 用上了我关于 排版 的一生所学。 重构，排版 。设计博客样式时，这两兄弟大概是最离不开的字眼。头一个就不说了，太磨人。我要说的是第二个：明明简单却总是被人搞得如同地狱一样的 排版（Typography） 。 肯定有维新派叫嚷着： [!TIP] Protip! 2026 年了，还写什么博客？这种老掉牙的东西就应该丢进历史的垃圾堆！我都到微信公众号去写了！ 但你写微信公众号推文总要在乎排版吧？但我这里不是要教你怎么给推文排版，因为优秀的排版都是相通的，并不是像公众号里边营销号吹的那样，只有带 qq 两个字的网页才能用。 [!Note] 排版真难……对吗？ 糟糕的排版 废话少说，直接看一个。 一个人点进来这个网站，结果第一印象是：我到底要看什么？ 这种排版就是失败的。那还有一个问题： 失败在哪儿？ 排版的目的，就是要让读者马上意识到 我是来干什么的 ，是读文档也好，是看点作品集也罢，哪怕只是随意地读一读碎碎念，视线落下来的第一秒，读者的心里就要想：“喔，重点在这里”。 上面的排版，失败之处就在于字太小、分隔不清、图片和代码块喧宾夺主，正文像个被排挤的临时工。 [3] 这是 LINUX DO 社区的早期 UI，我管这种 UI 叫做“高额头和宽下巴”。 我的网站只放了萌备，因此效果不算恶劣。如果这种排版被幸运地在你的博客上展示，它会毁了你的博客：点进一个内容驱动型网站，必须要忍受这么破碎的信息，脾气好的读者可能跑路了事，脾气差点的直接找上评论区开骂了。 优秀排版和你 优秀排版的纲要显而易见： 层级必须清晰。 留白必须充足。 上面两个排版，之所以糟糕，就是因为看着太叫人窒息了。 虽然这份我自己总结出的纲要只有短短十二字，但是要实现它的确不容易。排版如果只是单纯的技术问题或者美学问题就好了，可惜它不是。 内容为王·王也要穿衣服 我们这里并不是在说 安徒生的童话 。曾有一位智者这样说过—— [!QUOTE] 智者的箴言 好的排版会让你的文章变得更好，哪怕文章的内容只是一坨大便。 其实文章的内容不是一坨大便也行。世界级名著《提问的智慧》 [4] ，它的作者埃里克·斯蒂芬·雷蒙把这旷世神作发到 个人网站上 时也没有写任何样式。 [5] 当然会有别扭精秉承着“这可是名著！ ”的精神生啃。但我们是普通人，看这玩意会觉得很头大，不是吗？你要是用电脑看的话，十有八九会蹦出一个疑惑 ：“我刚刚是不是看到这一行了？”更叫人挠头的是，原文是英文。 但是，在 GitHub 上的版本因为有完善的样式表，读起来简单轻松许多。对比看看？这和中英文没有太大关系。 读得开心多了吧？ 不过也别想着马上兴高采烈地用 github-markdown-css 来给自己的网站上样式——你得照着自己网站的个性来。还有最重要的：你得喜欢你用的样式。写了一篇好玩的游记，读者还要在一个长得神似 GitHub 的网站看，这也太可怜了。 当然，如果你嫌麻烦，Tailwind CSS 提供的 @tailwindcss/typography ，以及 Sivan 开发的 赫蹏 可能更适合你，这玩意足够大众，技术文档到生活日志全部通吃。 当年汉字排版还在搞活字印刷术、西文排版还在纠结 fi 、 ti 怎么连字的时候，排版就是拼拼图。但咱们今天有那么多的 CSS 属性，反而都不会排版了。没有内容的排版是空壳。你选再漂亮的字体、再精致的留白，如果读者读完三分钟不知道你在说什么，那就是失败。这也是为什么很多人信奉“内容为王”——只要我写得好，其他不重要。但是，王也需要穿衣服。裸奔的国王走到街上，无论他多有智慧，大伙儿第一反应都是“这个人没穿衣服”。 要吐槽还能写一堆，按下不表。 字体·丢掉你的 LXGW 看到这标题千万别皱眉。 LXGW WenKai，也就是霞鹜文楷 ，用来排版长文跟在厕纸上印刷泰戈尔诗集没什么区别：可以看，但是看得很别扭。所以，放过它吧。 这个字体又开源，又文艺青年，还有手写的提按，哪里有问题？ 问题就在这，它太吵了。LXGW 的笔画粗细太明显，确实很有楷书的顿挫和毛笔的飞白，单看几个字很漂亮，但是放到长文里就成了夹生饭。它既不是黑体字，也不是楷体字，一眼扫过去磕磕绊绊的。 字体就是空气，没人想在呼吸的时候被迫分辨空气的味道。所以，字体老老实实地选用默认的无衬线体（苹方、Inter、Noto Sans），要是想模拟英语课本你就用 Times New Roman。 下面的一些小短文使用了 <div> 标签结合内联样式展示不同的字体，从上往下依次是 Times New Roman、宋体（SimSun）和楷体（KaiTi）。为了避免太乱它们已经被折叠起来。 展开 （点击了解更多详细信息） 好的字体就像空气一样。现在几乎所有的中文图书都使用黑体和宋体进行排版，就是这个道理。不过即使它们优秀，不同的分支间亦有差异，就例如，思源宋体的横画非常的浅，白底黑字的情况下汉字的横几乎消失。 你要是不会选字体，就老老实实地用微软雅黑或者苹方。 .markdown { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif; } [!TIP] 宋体和楷体并不适合网页排版，它们的细节在网页上会被大量的锯齿替代，丢失掉原来的美感。如果为了美观我更推荐思源黑体 CJK，它专门对中文标点做了优化，例如引号和逗号、句号之间的间距。 颜色·别只会用黑白胶卷 爱画画的人可能听过这样一句理论：“给草稿勾线时，千万不要用纯黑色，而是用深蓝色或者红棕色。”我看的入门教程都没给出这样做的理由。但也很好理解：黑色在图画里是黑洞，它会吸引走人的注意力，而且不给反馈。 网页也是一样，单调的黑白，就好比 bearblog 那种黑白风格，极简确实极简，但是看了直叫人一阵空虚。好的配色应该灵动一点，别什么反馈都没有。 对了，我在配色时喜欢先选取主色调，然后排 CSS 变量，以后无论要用什么颜色直接从变量里挑选，就不另外硬编码 Hex 颜色了。 [6] :root { color-scheme: light dark; --bg: #f3eee8; --text: #1f2937; --heading: #1a1a1a; --muted: #6b7280; --meta: #6b6b6b; --subtle: #9ca3af; --accent: #517ad1; --accent-soft: #4c7bdf; --surface: #f8f4ef; --line: #d2c7bc; --inline-code-bg: #ece4dc; --code-bg: #172033; --selection: #c4826f47; --tag-pill-bg: #eee6de; --tag-pill-border: #d2c7bc; --tag-pill-text: #2b211d; --tag-pill-hover-bg: #e7ddd4; --tag-pill-hover-border: #c6b9ac; --tag-pill-hover-text: #241b17; --tag-pill-active-bg: #e1d6cc; --tag-pill-active-border: #bbac9e; --tag-pill-active-text: #1f1713; --focus-ring: #9db5e8; --scrollbar-track: #ece4dc; --scrollbar-thumb: #c8b9ab; --scrollbar-thumb-hover: #bbaa9a; --scrollbar-thumb-active: #ad9b8b; --font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "Georgia", "Times New Roman", serif; --font-body-zh: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-body-en: "SN Pro", "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "Fira Code", "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace; } 还有一个暗色版的，节约篇幅就不贴了。 一旦选定颜色，就不要乱贴什么大红大绿的东西，特别是标题、链接这些地方。如果可以，把评论区的颜色也用 CSS 变量替换掉。应该说，现在百分之八十的 WordPress 主题都没有这样的认识，它们只是把博主 可能 感兴趣的全部粘上去，丝毫不考虑读者。但你要知道，开博客是要给读者看的，给自己看的还是别放到公网了。 配色就见仁见智了，通常也就是红橙蓝紫几位，绿色是大忌。有一些比较复古的（比如阮一峰）就用氧化后的纸的颜色做背景，也没有暗色模式，同样赏心悦目。 或者，比这哥们做得好就行。 [7] [!WARNING] 配色人人都明白，无非就是让人看着舒服、一目了然，但是实际用上就知道有多吃审美眼光了。所以配色绝对不能太多，贪多嚼不烂，一个主色调就足够。网上说的撞色系、莫吉托，都是骗人的。 插个题外话，有个配色跟设计做的跟互联网厕所一样的博客，人气反而很旺。本来想作为反例放上来的，但是……我害怕后遗症，如果你也看过应该知道我在说什么。 间距·不要在夹缝中求生 Web 2.0 时代，谁也没想到会有 Vue、React 这些玩意，当时的网页就是一筒无限长的卷纸，一边扯一边看，像是把一本书的书页全部撕下，然后首尾相连粘起来。这样做的技术债就是，后来为了处理垂直居中，要花很大的力气。 咱们当然不用研究垂直居中，但跟它关系很大：我们要搞的是间距。没有任何一本书会忽略间距的设定，我在做我的网站时也是这样。 让我们回到 leading 部分。你不用动滚轮，下边有图片。 很明显吧？这里的行距是被脚注的数字顶开的，这就让字时起时落，很怪异。 但是，这样的问题还少吗？咱大可以先看点很叫人窒息的间距。 这里一共（应该）有三个间距： 截图的边界和折叠块之间的间距。 折叠块边界和 blockquote admonition 之间的间距。 blockquote 之间的间距。 段落之间的间距。 第二项和第三项都没有，看起来窒息那就是理所当然的了。 很多人喜欢在 CSS 里面加一个 text-align: justify; 。不要这样做。中文是方块字，右端不对齐不会很明显，但是，换到英文里就变味了。 里面用红线标注出的部分，叫做“ 文档的河流 ”。如果河流太多，人的注意力就会很快地涣散。所以不要自作聪明地加上两端对齐，直接用最原始的左对齐就好了。Microsoft Office Word 还有 LaTeX 都是这么干的，遵守它总不会被人笑话。 大致的图形搞定了，我们还漏了什么吗？当然有，那就是行间距和字重。 千万别吝惜行间距，该用就用。我读小学的时候，就有人告诉我每一段开头要空两格，但是网页里不能这样做。博客的段落是依靠行间距划分的，每一行顶格写都可以，不会导致两段的界限不清。 语文教材不同，里面文本的行间距就没变过，因此必须用分隔符来划分段落。HTML 不同啊，它可有 <p> 来告诉浏览器什么是段落。 如果你实在介意，CSS 里边有两个属性： text-indent （把它的值设成 2em 就是两个汉字的首行缩进）还有 text-autospace 。你的空格要是没坏就手动在汉字和英文之间插个 space 吧，很简单的，最多按两下。 配角·滚出我的文档流 你肯定看过这种页面：侧边栏、跳转按钮、光标特效还有花里胡哨的页面背景。 还有！Live2D！Live2D！Live2D！我到底是来看文章的还是看小人乱动的？ 还有太长的图片、代码块。拜托，假如不是非看不可就 滚出我的文档流 好吗？ 如果你正在我的网站上阅读，页面中应该只有左侧的目录，其余部分全部被我赶走了。包括存在意义简直莫名其妙的侧栏 résumé，这些东西塞在 /about 页面就好，而且大多数人也不怎么感兴趣就是了。 啊！不对！这里怎么出现了一张莫名其妙的图片！ mediawiki 用了一种非常聪明的方法来处理这种 不是主要内容，但是也不能删掉 的非文档流内容，叫做破版（layout break） [8] ，比如，我想告诉你这个破版的来源，但它跟我要写的排版关系没那么密切，就可以把它放在插图里。 它的问题也很明显，行为太不可预测，分分钟图片跳到下一段去了。不过比起被硬生生打断，还是好得太多。代码块……因为代码块常常是正文的一部分，所以我对于折叠代码或者移开它没有什么想法。毕竟是 读 代码， 看 图片，主次要分明。 还没完，总是有人搞出这种界面。 乱得没边了。 在后面 排版这东西，难看的大家都知道，但是做出来好的很难。因为优秀的排版就像是水，不会给人的阅读造成任何阻力。像个偏执狂一样，把行高从 1.625rem 调到 1.7rem ，然后又调回去，如此反复。读者记得吗？当然不知道。但他们知道你的排版很好，好到读完时像是喝了一杯冰冰凉凉的可乐，没有任何阻力。 排版不是设计竞赛。所有的东西怎么打磨都是为了看见，打磨排版却是为了叫它消失。 （这一集很有教育意义） 每次看到沟槽的排版，我都有种拼命找出作者的邮箱然后给他发恐吓邮件的冲动。 但那没有用：不会排版还是不会排版。嘴臭留在自己的网站上就行。 时代在变，技术在变。排版很难，从头到尾都一样。但是，别在 line-height: 1.625 和 margin-bottom: 1.25em 的死循环里纠结，有时候简单粗暴的 margin: 0.7rem 0.7rem 反而更有效。 祝你在接下来的日子里排得开心 。 哦对，记得写博客，不写博客再好的排版都是废纸一张。 See Also 【Haku】我对各种字体的看法（Go 语言版） ←我自己写的，在 IDE 里讨论了一个合适字体的重要性。 【纸鹿摸鱼处】谈谈不受欢迎的博客技术特征 ←句句见血，将讨人厌的博客网站特征全部点出来了，尽管不针对排版，还是值得一读。 【知乎】为什么海外杂志英文段落右端不对齐？ ←本文复制了其中的图片。 本文所展示的网页截图版权属于原作者，此处仅作为增强效果的工具。 Hexo 早就不活跃了。它使用的已经是十年前的老古董 ejs 模板，从今天回看它也是太过于原始了。而且，更重要的是，它既笨重，又慢。 ↩︎ Hugo 很好，真的。写 Hugo 的模板像 Go 语言一样优雅。哪怕是对于一个写习惯了 Python、不熟悉前端框架的人来说，Hugo 也足够友好。 ↩︎ 好极了，这只是最突出的问题。这个排版的问题多了去了。 ↩︎ 即 How To Ask Questions The Smart Way 。两个著名的缩写：STFW（Search the fucking web）以及 RTFM（Read the fucking manual）就是出自本文。 ↩︎ 好极了，我不能在我的网站发原文的截图， 因为它不是依赖 CC 协议发布的。 ↩︎ Codex 这家伙老喜欢用 color-mix() 这种函数了……看着就惹人厌。 ↩︎ 可喜可贺，我在 Reddit 上边找的演示，这哥们已经听人劝，改到了比较清新的风格。 ↩︎ Layout break 在大多数语境下是恶性 bug，它会把在容器内排好的文本挤得到处都是。但我希望看到的是次要的内容被挤走，所以反而在这里用上了。 ↩︎ 1 个帖子 - 1 位参与者 阅读完整话题
Haku – 20 Mar 26 各 Markdown 编辑器的使用体验 | Haku 前情提要 以前写过一篇 Markdown 编辑器推荐（已经删了，换成了这一篇）。因为以前用的图床爆炸了，里面的图片荡然无存。思来想去，换了个更稳的图床，重新写一篇。 本篇评测采用 Notepad4 写成。正经人谁用 Markdown 编辑器写博客啊。 Notepad4 这不算是一 … [!NOTE]前情提要 以前写过一篇 Markdown 编辑器推荐（已经删了，换成了这一篇）。因为以前用的图床爆炸了，里面的图片荡然无存。思来想去，换了个更稳的图床，重新写一篇。 本篇评测采用 Notepad4 写成。正经人谁用 Markdown 编辑器写博客啊。 Notepad4 这不算是一个 Markdown 编辑器，而是一个纯文本编辑器。它并没有传统意义上编辑 Markdown 所需要的所有热键，哪怕是 Ctrl + B 加粗 这样的热键都没有。实在是非常的原始。 选择这个记事本其实没有特别的理由，单纯需要一个纯文本的编辑器，而且它的颜值在 Windows 原生应用里面算高的了。开大文件（3 MB 左右的纯文本文件）也能顶住，写一写短篇博客还挺过瘾的。 Windows Notepad 下载体验： https://apps.microsoft.com/detail/9msmlrh6lzf3 。 嗯，这玩意也可以写 markdown 格式的文本，但是 微软说这东西叫做“轻量化格式” 。这东西说实话不大好看，但是随时拿出来编辑点东西还是很趁手的。 卧槽这东西怎么没办法显示图片。 哦对了 如果你的 Markdown 文件开头有 YAML frontmatter，千万不要用 Notepad 的自动格式化。它会把你的 frontmatter 搞得一团糟。 Typora 下载体验： https://typora.io/ 。 这是最受人欢迎的编辑器了，它的 最后一个开源版本 停留在 2021 年十一月。 优点很多：快捷键很多，快速插入表格、公式、mermaid 图表，所见即所得，不用手动打 Markdown 格式，有一个非常强大的 插件包 ，可以集成 PicGo 图床工具，一键式操作非常过瘾。功能强大简直无可挑剔。 缺点也很明显：太贵了，为了一个编辑器花 USD 15（2026 年 3 月 29 日汇率来看大概是 104 人民币）在我看来一点都不值得。而且我很讨厌 Electron 构建的软件，虽然确实是让开发者舒心了，但像我一样的低配电脑，浏览器开了几个标签页都费劲，更何况是塞了整个 Chromium 内核和 Node.js 环境的软件呢？哪怕是没有那么多方便的热键可以用，我还是更偏好像 Notepad4 这种纯文本编辑器。 [!TIP] Typora 的破解版满天飞，怕 DMCA 就不在这儿放了。 Obsidian 下载体验： https://obsidian.md/download 。 Obsidian 在编辑器里的地位其实很尴尬，在我看来是这样。如果是需要编辑一些零散的 Markdown 文件，那么没有必要安装 Obsidian，因为它的核心是一个又一个的 Vault（相当于只能存 Markdown 文件还有图片的仓库）。但是静态博客生成器往往有很多 Markdown 文件以外的东西。所以 Obsidian 只适合构建自己的知识库还有写笔记的人用。 但如果不是写博客，是写不愿意给人看的小东西，又想好好地组织，那么 Obsidian 确实是一个不错的选择。Obsidian 提供云端备份，但是完全没必要买，装个 git 插件搭配 GitHub 私有仓库不比每个月花上那么几美刀强？（其实假如换设备了，重装 git、配置 SSH 还有链接 GitHub 这些东西听着就头大） 这个色调看多了让人想呕吐，也不知道因为什么。 Marktext 下载体验（不建议）： https://marktext.me/ 看到这个东西时，我的内心是释怀的 讲真的，有空做这个编辑器还不如给 VSCode 提几个 PR。目前攒了 1,400 多个 issue [1] 未解决，上一次正儿八经的更新还是停留在 2023 年。现在假如还吹捧这个编辑器“老牌、稳定”，说这话自己不会笑吗。看到 Electron 就让人望而生畏，用了一会就删掉了。 不得不说作者很有审美，尽管汉化和软件维护做得欠佳，但是 Markdown 的展示看起来不错。 Visual Studio Code 下载体验： https://code.visualstudio.com/download 。 这都不用我来吹。宇宙第一编辑器的名号震山响。特别是加上一些好用的插件，像这些插件们。 然后找个好看的代码高亮，比如 Monokai 啥的，既能所见即所得还能享受专业编辑器的快捷键，感觉的确不赖。 当然缺点也很多。VSCode 界面太大，字太小，并不是一个很适合内容产出的环境。就这一点甚至不如 Windows Notepad，尽管本质都是网页，但后者毕竟是专职记事的，跟一个写代码的编辑器比起来，Notepad 专精程度胜过一筹。 Emacs 下载体验： https://www.gnu.org/software/emacs/download.html 。（哇还是老格家正牛头旗） 你为什么要这样做？ Emacs 是 GNU 家出品，换句话说，Emacs 是一款高度自定义的软件。用人话说就是难调。再说，Emacs 是用 org-mode 记录文档的，写 Markdown 总有种拿菜刀削苹果的感觉。不是做不到，就是很莫名其妙。再说了，org-mode 本身和 Emacs 深度集成，用熟练了甚至表现力比 LaTeX 还要强劲，转成 Markdown 只需要用 Pandoc，轻松又便利。不要用 Emacs 来写 Markdown。 这里贴一个友情链接，这位朋友，在我 友情链接页面 也出现过的 带鱼 ，是 Emacs 的忠实粉丝，建议和他 battle，也给他的博客涨涨人气。 Note.ms 在线体验： https://note.ms 。（非中国大陆及港澳台地区需要过五秒盾） 这东西都能写 Markdown？当然行，就是很蛋疼。 比如，我打开一个页面（ https://note.ms/skca ），这样写 在 example 里面我这样写： ```markdown :::note[真的吗] 真的哟。 ::: ``` 我希望**“真的吗”**这三个字会替代原有的 _Note_，此时不要让 _Note_ 展示。 然后打开 https://note.ms/skca.md ，就会发现写好的 Markdown 源文本已经渲染好了。 说实话，不大好看。 Notion 在线体验： https://notion.so 。 一个传统的在线笔记平台，有个项目 NotionNext 能把你的 Notion 文件转成精美的博客，非常赏心悦目。如果有一些高校的学生资格还能享受 Notion 学生版，这不比钻研什么破解轻松多了？ 与其说是编辑器，不如说是一个生产力工具。编写文章融合 AI 之后像 Vibe Coding 一样爽快。如果厌恶本地编辑器的呆板，我十二分建议试试 Notion。免费额度已经足够日常博客使用。 Stackedit 在线体验： https://stackedit.io （英文版）/ https://stackedit.cn （中文版）。 这是个轻量级的在线 Markdown 编辑器。虽然只是一个 Web APP，但是居然支持了从 GitHub/Gitee/Gitea/GitLab 同步的功能，而且可以离线使用。 对于收集癖们，它甚至有个成就系统。 有道云笔记/语雀/飞书/浏览器控制台 在线体验： https://note.youdao.com / https://www.yuque.com/ / https://www.feishu.cn/ / 太常见了我就跳过了。再说了它们的本质是富文本编辑器，不是 Markdown 编辑器。 我的天啊还有前几天（今天是 2026 年 3 月 29 日）提的 issue，这东西真有人用啊？ ↩︎ 6 个帖子 - 5 位参与者 阅读完整话题
Haku – 18 Apr 26 最近我在干些什么还有聊天还有一个久违的双休 | Haku 最近一个星期的情绪算是稳住了，还好还好。而且摆脱了一个一直缠着我的抑郁症患者——还是很好办的，随便说句硬点的话就可以了，不过我总有种“这样还不够”的感觉。说真的我想给自己涨点 KD，我们学校还没人有这么高的成就呢。 教人难堪的事就不多说了，毕竟这个星期是一个很难得的双休。 所以想 … 最近一个星期的情绪算是稳住了，还好还好。而且摆脱了一个一直缠着我的抑郁症患者——还是很好办的，随便说句硬点的话就可以了，不过我总有种“这样还不够”的感觉。说真的我想给自己涨点 KD，我们学校还没人有这么高的成就呢。 教人难堪的事就不多说了，毕竟这个星期是一个很难得的双休。 所以想趁着双休，做一些很久都没动力做的事。 写一写 Blog 最近重构了博客，样式没变，单单把框架从 Astro 改到 Hugo 了。没别的原因，纯快。Hugo 生成页面的速度还不到一秒。说来也应该惭愧，建了一整年的 Blog 居然连 Hugo 都能随便拿捏。我还见过大佬们的静态博客连 Vercel Pro 的构建时间都不够用。 样式还是很好看的，而且针对小组件也做了优化。 我好牛逼啊，真的，这些样式看起来跟原生的一样。 [1] 想着依靠 GitHub 来做一个友情链接自动表单，但是因为丢掉了 Astro 换成了 Hugo，很多东西都要重新写，一时间千头万绪，还真是不知道从哪开始。 所以我觉得复杂的东西还是丢给 AI 吧，反正我已经有了一个大概的实现框架，让 Codex 给我做做也行。 文学创作 很久没有写中短篇了。很多人说“苦难是文学的沃土”，但是疲于应付苦难才是正常的。 在学校没有写的空间，只好回家写。至少是已经新建文件夹了。 写的时候就已经意识到这篇小作品可能不会被很多人接受。没关系，自己写着开心就好。 标题……不知道。 我真的好害怕立了 flag 却还不上。 看漫画 最近看了个 Cosplay，不认识人物，看了评论区才知道她叫做佐薙圣。接着就急急忙忙地把《恋爱寄生虫》下载了下来，读了两页感觉还不错。如果买一个阅读器带到学校去看可能也好一点，不过这样的话我的成绩一定会跟坐上滑梯一样掉到深渊里去吧！ 随手挂一个 下载链接 吧，密码是 8dxf 。用了分卷压缩，不会解压自己在 Google 或者 Bing 搜索。 就这样，如果我的计划都完成了，我会回来更新的。等我好消息。 @stevessr Bro 也稍微改一改吧…… 但是还是有美中不足，那个滚动条还是得改改。而且怎么那么多沟槽的垂直居中啊！ ↩︎ 1 个帖子 - 1 位参与者 阅读完整话题