halo博客安装简易书架

慧行说

2023-05-22 / 0 评论 / 0 点赞 / 1,095 阅读 / 893 字 / 正在检测是否收录...

05/22

温馨提示：

本文最后更新于 2023-05-24，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

最近在一个博主的博客中看见一个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>

创建好的页面如下图所示：

接着配置菜单，进入外观>菜单设置，在菜单中添加当前页面作为链接菜单，即可添加成功。

配置完成访问网站即可查看正常的书架页面。

源码在参考链接中可以下载。

参考资料

目录CONTENT