0009 题头图片

开始我写了一个模板,后来发现并不需要,就直接添加图片就可以了。

废话,往笔记里加图片可不就直接添加图片就可以了么。

但是要每一天都看相同的图片,肯定会腻的,就希望它自己变。所以我用了一个随机图片 API:

1
![随机题图](https://picsum.photos/800/300)

两个数字是图片的宽度和高度,其实图片是相对方正的,所以特殊尺寸是裁剪后的结果,所以高度太小效果不好。

会有缓存,想看新图片要关闭笔记再打开(不是关闭软件)。一般来说这种方式足够用了。

还有很多随机图片 API 可用,不列举了,自己找着玩吧。

用 Templater

然后 Templater 插件提供了一个,用的是 Unsplash 的 Api(访问可能费劲一点),不过包装了一下:

1
<% tp.web.random_picture() %>

详细可以阅读这里:tp.web.random_picture

这种方式的好处是:随机,但是保存的是图片对应的地址,就不会发生下次打开看到别的图片的情况。适合于给每天一篇日记套模板的情况。

奇怪的思路

我收藏了一个占位图片 API,占位图片就是做网页的时候某个地方要展示一张图片,但是并没有具体的图片,毕竟可能设计师还在做,或者后期动态展示相关图片,那就先放一张别的图片占位。但是可能需要各种尺寸的图片,而且为了展示效果,可能需要图片颜色啥的一致,为了后期方便可能在上面标注图片尺寸啊,这是什么啊……不可能每次都开 PS 制作,所以就借助 API 生成。

那如果用这个 API 生成题图呢?你可以自己去研究一下:https://fakeimg.pl/

效果大概是这样的,注意,字体必须是 note,否则没法显示中文:

1
![](https://fakeimg.pl/640x200/FFAAAA/333/?text=这是一个标题捏&font=noto)

这种最好也搭配 Templater 来根据文章标题生成,省得自己还得自己修改,就像这样:

1
![](https://fakeimg.pl/640x200/FFAAAA/333/?text=<% encodeURIComponent(tp.file.title) %>&font=noto)

这里的关键点是要 encodeURIComponent,这样特殊字符(比如空格)才会被正确的传递。

也可以搞随机颜色,虽然不支持随机渐变色。这篇就不搞这么复杂了,以后可能单独去写。