给 Hugo 网站的插图添加阴影

来自 赵鹏 | September 26, 2018

最近一年多,有个东西一直困扰着我,就像半夜酣睡时飞来一只蚊子,时不时在耳朵边哼哼几声,很烦。挥手赶走它继续睡,过一会儿又过来哼哼。好几次我犹豫着要不要爬起来彻底消灭它,想着想着就又睡着了,于是就一直凑合。

这只蚊子就是我自己开发的 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" />

于是,全体插图就都自带阴影了。

comments powered by Disqus