项目已开源: https://github.com/OldPanda/douban-book-plus-homepage
虽然之前已经用 Bootstrap 库为 Douban Book+ 插件写了一个简单的 HTML 页面,放在了这个博客域名下 https://old-panda.com/douban-book-plus.html
,但总觉得还是比较草台班子。最近了解到了 VitePress 这个项目,就决定趁这个周末重新造一个。
在重写的过程中,由于 VitePress 自带默认主题无法完全满足我的需求,同时也因为自身前端知识储备不足,因此在页面的设计编写上花费了不少工夫,比如自定义字体,首页布局的内容扩展,甚至寻找好看的 SVG 图案等等,写这篇文章的主要目的是记录这些过程和结果,便于以后查找。
内容 | 相关资料 | 代码示例 |
自定义字体 | 官网文档 | CSS 部分 字体资源部分 |
自定义顶端图片大小及渐变效果 | 官网文档 | Layout 定义 自定义 Layout 的使用 |
Chrome , Edge ,火狐浏览器 SVG 格式 logo 的收集 | Simple Icon | |
默认主题主页布局的扩展 | 自定义 Vue 组件的声明 自定义 Vue 组件的注册 自定义 Vue 组件的使用 | |
适配不同浏览器窗口大小 | W3School | CSS 代码 |
关闭黑暗模式 | 官网文档 | 设置文件 |
项目部署在了 Cloudflare Pages 上,主要是图一个方便省心。
最后一点儿辞旧迎新的工作是把旧的页面自动跳转到新的主页上,这通过一行 HTML 很容易做到,
<meta http-equiv="Refresh" content="0; url='https://douban-book-plus-homepage.pages.dev'" />
具体可以参考这里。
看了老哥的博客,发现是个老码农了。想一想也是该看看书了,人总要成长:)
🤝 ,谢谢来这里捧场,也欢迎交流你看过的好书好文章
总感觉要转移到静态页面站点,对于我这样的老博客来讲,是需要太多的切换成本,用户曲线也很陡。
是的,所以我现在只有开新站的时候才会用静态站点生成器,博客里虽然文章评论不多,但迁移起来也是一项大工程,同时作为自己在网络上的的一亩三分地,把服务器掌握在自己手里更放心一些。