目 录CONTENT

文章目录

halo博客安装简易书架

慧行说
2023-05-22 / 0 评论 / 0 点赞 / 728 阅读 / 893 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-05-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

最近在一个博主的博客中看见一个halo的书架功能,如下图所示:

image-20230522180943398

感觉这个效果还蛮不错的,虽然没多大用处,但是就是想折腾下,于是就按照博主的教程操作了下。

下载源码

我是在梦中小城的文章中下载好了源码,下载好了之后结构如下:

下载地址,密码: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次,然后会在系统>小工具中启用开发者选项。

  • 进入开发者选项,选择静态存储,上传下载好的源码。

image-20230522182927023

上传好后访问index.html,能够正常访问则说明已经正常。

配置页面及菜单

  • 新建页面并将页面插入以下代码(就是将刚刚的静态页面通过iframe的方式签入在页面中),记得src换成自己的地址。
<iframe src="https://blog.liuyude.com/book/index.html" style="width:100%;height=100%;
min-height: 800px" ></iframe>
  • 创建好的页面如下图所示:

image-20230522183221992

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

image-20230522183326069

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

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

参考资料

0

评论区