最近一年多,有个东西一直困扰着我,就像半夜酣睡时飞来一只蚊子,时不时在耳朵边哼哼几声,很烦。挥手赶走它继续睡,过一会儿又过来哼哼。好几次我犹豫着要不要爬起来彻底消灭它,想着想着就又睡着了,于是就一直凑合。
这只蚊子就是我自己开发的 bookdownplus 包。
关于自己是怎么被自己的包给坑住的,以后再慢慢说。这里只是说说一个小技术问题。
前两天,我做了个 bookdownplus 的展示网站,用来秀手头现有的 bookdown 模板,尤其是生成的 pdf 文件截图。由于网页背景是白的,而 pdf 截图背景也是白的,所以两页 pdf 的截图放在网页里就直接连起来了:
这哪有书的样子?于是,我想给每张图加个阴影,就像以前我做的那样:
这虽然好看,但这是用 powerpoint 一张一张做的,神烦(这是 bookdownplus 坑之一)。bookdownplus 以后的计划是接受别人贡献的模板。每有新模板,我都手动去做个图吗?
这时突然想起一个叫 css 的东西。话说这个东西就像鬼,我只听说过,从来没见过——也不是没见过,而是总视而不见。等于没见过。
我又感觉蚊子来哼哼了。这回索性坐起来研究了一下。
这个网站,用的是 hugo-creative-portfolio-theme 主题,blogdown 搭建。搭建好的文件夹里,有个”themes/hugo-creative-portfolio-theme/static/css” ,里面一大堆 .css 文件。
我就从网上搜了一句,写进 custom.css 里:
.jf-image-shadow {
box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;
}
然后,帖子里插图就不用 ![]()
markdown 语法了,而是改用 html:
<img class = "jf-image-shadow" src="https://github.com/pzhaonet/bookdownplus/raw/master/inst2/classic/showcase/cover.png" />
于是,全体插图就都自带阴影了。