最近在一个博主的博客中看见一个halo的书架功能，如下图所示：
感觉这个效果还蛮不错的，虽然没多大用处，但是就是想折腾下，于是就按照博主的教程操作了下。
下载源码
我是在梦中小城的文章中下载好了源码，下载好了之后结构如下：
下载地址，密码：8888
~/Downloads/book/ tree
.
├── css
│ ├── all.min.css
│ ├── basic.css
│ └── style.css
├── img
│ ├── beidao1.jpeg
│ ├── dahua1.jpeg
│ ├── lxqj1.webp
│ ├── mzj.jpg
│ ├── santi.webp
│ └── swift5.jpg
├── index.html
└── webfonts
├── fa-duotone-900.woff2
├── fa-regular-400.woff2
└── fa-solid-900.woff2
4 directories, 13 files
css是样式文件夹，img是书籍的封面，可以在微信读书或者其他读书应用中找到，index是源码所在，主要也是通过更改index.html文件来实现书架功能。
更改源码
源码中书架主要内容在下方的body中的li标签中。
<li>
<div class="info">
<a href="" target="_blank" rel="noreferrer noopener" class="book-container" data-pjax-state="external">
<div class="book" title="swift5">
<img src="./img/swift5.jpg" class="lazyload loaded" srcset="./img/swift5.jpg" alt="swift5" data-ll-status="loaded">
</div>
</a>
<div class="info-card">
<div class="hidden-content">
<p class="text">
Swift5从零到精通iOS开发训练营
</p>
</div>
<h3>《Swift5从零到精通iOS开发训练营》</h3>
<p>作者：张益珲</p>
<p>出版时间：2021-08</p>
<span>读书笔记：</span>
<a href="" target="_blank" rel="noopener noreferrer" data-pjax-state=""> 在读</a>
<p>
<span>推荐指数：</span>
<span></span>
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></i>
</p>
</div>
</div>
</li>
基本上对照上文修改即可。
上传源码
halo博客可通过本地上传静态资源，然后对静态资源进行访问。
- 点击下图中的halo图标10次，然后会在系统>小工具中启用开发者选项。
- 进入开发者选项，选择静态存储，上传下载好的源码。
上传好后访问index.html，能够正常访问则说明已经正常。
配置页面及菜单
- 新建页面并将页面插入以下代码（就是将刚刚的静态页面通过iframe的方式签入在页面中），记得src换成自己的地址。
<iframe src="https://blog.liuyude.com/book/index.html" style="width:100%;height=100%;
min-height: 800px" ></iframe>
- 创建好的页面如下图所示：
- 接着配置菜单，进入外观>菜单设置，在菜单中添加当前页面作为链接菜单，即可添加成功。
配置完成访问网站即可查看正常的书架页面。
源码在参考链接中可以下载。
参考资料
评论区