本文因为知识含量低,并不尝试进行任何教学,只是一个解决问题的过程和思路复盘。
我在使用小宇宙 app 的时候,出于做了多年新媒体的职业敏感,发觉那些优秀的播客节目,除了在最重要的音频质量上下足功夫外,也没有放过单集的 show notes 等细节。
(资料图片仅供参考)
然而,小宇宙的编辑器说实在的,很朴实,只有最基本的功能,包括只能用二级标题做更高一级的大标题、引用、列表、粗体、斜体、添加链接和图片,以及添加时间点。
虽然这样可以让大部分的播客 show notes 保持统一的简洁,但也确实让人很难大展拳脚。
不过,让我动了研究一下这个编辑器的主要原因,还是它那固定的行间距。如果我没有使用引用或列表格式,通常情况下,在撰写单集的时间点时,界面真的会很丑。
然而我却发现,不止一个播客在这一点能够做到无视行间距的存在。
我也想要,所以我开始想办法解决这个行间距的问题。
如果别人能够实现这个需求,或许他们也是在网上看到的经验分享,就像你第一次想要排版一个好看的微信公众号版面,在搜索引擎一搜,就会有无数人分享经验来教你。
至少作为一个自食其力自给自足的 I 人,我是这么想的。
可惜,搜索引擎并帮不到我,就连比搜索引擎还万能的小红书都没有任何相关的帖子。
虽然没有找到方法,但是我相信,那么多人能做到的,那我也一定可以。
在小宇宙更新一档播客节目,有两个途径,一个是通过 RSS 订阅链接进行同步更新,另一个就是直接上传音频到小宇宙的服务器。
通过 RSS 订阅链接进行更新的运营者,可能可以从源头上解决这个问题,但像我这种没有搞服务器的,只能尝试钻研一下小宇宙的编辑器了。
由于之前刚学习了如何用 HTML 和 CSS 给 Obsidian 改界面,而且微信公众号第三方编辑器也是用 HTML 的原理进行美化排版,所以我第一步就是想到了用 HTML 来试试这个方法是否也能套用到小宇宙的编辑器上。
所以,我就先在播客单集 show notes 找一个间隙,添加了一个代表空行的<br>在中间,并进行更新。
在审核通过了之后,我发现,原本写着<br>的地方,确实变成了一个空行,而不是「<br>」这段字符,这说明,在小宇宙编辑器上书写 HTML 确实是可行的。
使原本单调乏味的 HTML 变得更美观,通常是经过 CSS 进行设定,有三种方法,内联样式、内部样式和外联样式。
我之前在 Obsidian 上修改外观,使用的就是直接修改外部 CSS 文件,也就是所谓的「外部样式表」方法——先在 CSS 文件中对样式进行了定义,HTML 再直接根据这个定义对页面外观进行设置。
但是,我并无法通过编辑器修改到小宇宙的 CSS 文件,所以我只能通过「内联样式」对 HTML 进行修改,并且内联样式的设定优先级也是三者中最高的,可以无视外部 CSS 文件的设定。
那么,我首先尝试直接修改行间距,也就是——
无效。
我打开 Chrome 开发者工具,发现自己犯了一个很想当然的错误。
原来我看到的行间距,并不是通过 line-height 行间距设置的,而是小宇宙设置了每段文字有 20 像素的 margin-bottom,换句话说就是每一段文字下方固定有 20 像素的空白,形成了行间距的假象。
而且每一段文字是用的 div 标签,而不是 p 标签。
清楚了这个设置之后,我再次尝试——
失败。
我再定睛一看,发现原来小宇宙是给这些 div 块加了名为「paragraph」的 class 属性,再在样式中设定「paragraph」的 margin-bottom 值为 20 像素。
尽管说内联样式的优先级是最高的,但我直接在小宇宙编辑器上书写,也只不过是在原有的 div 块上添加一个新 div 块,并定义这个新块的 margin-bottom 值为 0 像素。
也就是说,不管我怎么修改新 div 块的 margin-bottom,都不影响原 div 块的 20px 下边缘,原本该在的 20 像素空白边还是会在。
而我并没办法使用内联样式修改「paragraph」的 CSS 值,至少目前我的了解是这样的。
就在我多次尝试,每次尝试都要等待一次漫长的审核,实在是受不了之后,我突然灵光一动,把已经实现了我想要的效果的 show notes 页面,复制链接到网页端打开,再用开发者工具查看。
结果发现,实际上并没有那么复杂。
我在用小宇宙编辑器撰写 show notes 时,每次换行都是直接用回车键,导致生成的每一段文字都是一个 div 块或 p 块,而块与块之间就会默认有 20 像素的行间距。
而别人是如何做到没有行间距的呢?
答案就是,不要换行,把文字都放在同一个块里。
换句话说,我那些分好的行,每行就是一个块,每个块之间就会有 20 像素的间隔,但是别人因为不换行,所有文字只在一个块里,这个块还是有 20 像素的间隔。这 20 像素的间隔不作用在块里面的文字里,而是起到跟下一个块的分界作用。
至于为什么在手机端看到的 show notes 页面时,又是分好行的样子呢?
原来,诀窍就藏在我最开始测试是否能使用 HTML 的 <br> 里。
每行文字分段的时候,不要用回车键手动换行,而是使用 <br>,让编辑器识别到 <br> 后自动换行。
测试,成功。
页面终于变成了我想要的样子,不过,还有一个问题,就是如果通过小宇宙的 RSS 链接托管到其他播客平台,而那些平台的 show notes 却并不支持 HTML,比如苹果播客,就会出现下面这种状况。
所以这只能当一个临时的解决办法,可能最终要让 show notes 变得好看、容易阅读,还是得弄个服务器。
那么,有机会我们再解决这个问题吧。