不要在自己看重的事情上附加不着边际的价值。
罗翔,中国政法大学刑法学教授

Hugo Shortcode

升级 Hugo 最新版本之后直接用 iframe 嵌入 Bilibili 会造成以下这样的萎缩:

这段代码想要自适应高度并且隐藏边框,但 Hugo 的主题会自动萎缩,无奈只能把边框加上完美解决:

<div class="video-player">
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="dplayer" class="dplayer-video">
                <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
                    <iframe src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

但不可能每次都这样长篇复制修改,在查阅阅读 mogeko 大佬的这篇博客后发现 Hugo 有 shorcode 的功能,比如在想要嵌入 Bilibili 视频的时候直接输入 bv 或者 av 号码即可

在折腾尝试复刻后我发现他的代码嵌入萎缩的问题并不能解决,于是自己魔改:

在博客目录下的 layout 目录创建 shortcodes 目录, 建立 bilibili.html 文件,复制以下代码:

{{ $videoID := index .Params 0 }} {{ $pageNum := index .Params 1 | default 1}} {{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
<div class="video-player">
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="dplayer" class="dplayer-video">
                <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
                    <iframe src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
{{ else }}
<div class="video-player">
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="dplayer" class="dplayer-video">
                <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
                    <iframe src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}

嵌入 shortcodes 后的成果展示:

codefence.io

由于学习 C++ 和 Java 的过程中有些东西没明白什么意思,一直想要一个能和 Jupyter Notebook 一样但能直接在博客上一边记录 Markdown 也可以直接编辑运行代码的功能;直到有一天我碰到了 codefence 这个项目。根据官网,直接内嵌就是以下这种效果:

但是可以看到结果被主题自带的 css 覆盖显示了白色,刷新后甚至会被覆盖了一层 highlight,这直接导致了运行错误。在给 codefence 团队发送邮件后得到了如下回复:

It's the .post-warp .post-content code, .post-warp .post-content pre and .post-warp .post-content code:not([class]) classes that are causing the issue, since the embed is direct and not an iframe, you'll need to make sure that doesn't get applied to codefence elements as well.

The first one can be fixed by changing the selector to .post-warp .post-content code, .post-warp .post-content pre:not(div.CodeMirror-code div pre)

The second one can be fixed by changing the selector to .post-warp .post-content code:not(div.os-content code)

但在浪费了将近两百、闲鱼找了两个前端工程师还是无法解决后我彻底放弃放下了执念,最后决定用 iframe 的形式嵌入父业。Github 搜索含有 codefence 的代码后只找到了两个相关联项目,其中只有唯一一个用在了自己的 Jekyll 静态博客主题上并且同样带有一点点的 css 的冲突问题,我觉得这应该和静态博客本身的局限有关。

最后只好同样模仿上面的 shortcode 勉强隐藏了滑动栏,然后手动调整 height 同时我还加了两个在线 IDE,一个是 C++ 一个是 Python

听到这句话我顿时深受触动,仿佛有什么东西突然被打破了,另外一样东西被打开了一样

因为学过一些经济学的东西,对边际这个词其实比较敏感,尝试从这个角度解释一下

从正面看,在在自己看重的事情上附加不着边际的价值,也就是始终在投入大量时间,精力,注意力等等,但由于边际效应递减,其实每多投入一份,所得到的东西就越来越少,我们的满足感(效用)也越来越少

由于已经形成习惯,我们为了得到更多的满足感,很可能进一步增加投入,如此循环,直到我们完全陷入其中无法自拔

从反面看,不计成本的增加投入,会阻碍我们向其他事物上的投入,以罗翔老师的观点,我们会越来越像刺猬,而固化自己的一元论思维,而不是发展多元思维

用一句古文总结“祸患常积于忽微,志勇多困于所溺”。虽然意思不完全一样,不过也比较契合了


这篇文章开头我引用了罗翔老师的金句:『不要在自己看重的事情上附加不着边际的价值』,这句话一开始看到的时候觉得应该差不多就是告诫人们不要 ”过度的付出“,无论在任何事情上或人上都不要当舔狗。在看到知乎的这段回答后有了点深刻的理解:我如此执着于一个博客的设计和好看与否,装作伟大却忘了主动学习前端自己成为伟大;又或是过于执着于 Hugo 这一个框架,忘了它本身也只不过是个工具,十年一变更好的框架可能早就革新,我花费了过多的精力和时间在自己喜爱的事情上,却固化了自己的思维,忘记了写日记,忘记了应该把大部分时间花费在课业上等等。。。